当前位置 > 首页 > Asp.net

ASP.NET中JSONP的两种实现以及其他跨域解决方案的简单实现

2012-12-7 16:25:00来源:Asp.net

   jQuery中JSONP的两种实现方式:

   都很简单,所以直接上代码!

   前台代码如下:

<script type="text/javascript">
$(
function () {
alert(
"start...");

// 第一种方式
$.ajax({
type:
"get",
url:
"http://localhost:9524/Home/ProcessCallback", // 这个就是不同于当前域的一个URL地址,这里单纯演示,所以同域
dataType: "jsonp",
jsonp:
"jsonpcallback", // 指定回调函数,这里名字可以为其他任意你喜欢的,比如callback,不过必须与下一行的GET参数一致
data: "name=jxq&email=feichexia@yahoo.com.cn&jsonpcallback=?", // jsonpcallback与上面的jsonp值一致
success: function (json) {
alert(json.Name);
alert(json.Email);
}
});

// 第二种方式
$.getJSON("http://localhost:9524/Home/ProcessCallback?name=xiaoqiang&email=jxqlovejava@gmail.com&jsonpcallback=?",
function(json) {
alert(json.Name);
alert(json.Email);
}
);

alert(
"end...");
});
</script>

   后台Action代码如下:

public string ProcessCallback(string name, string email)
{
if (Request.QueryString != null)
{
string jsonpCallback = Request.QueryString["jsonpcallback"];
var user = new User
{
Name
= name,
Email
= email
};
return jsonpCallback + "(" + new JavaScriptSerializer().Serialize(user) + ")";
}

return "error";
}

   运行后就可以看到结果了。我追踪了下后台ProcessCallback代码,如下图:

   可以看到jsonCallback的值为"jQuery17104721....",它是前端传给远程服务器后台Action的。这里jQuery171..表示的是jQuery的版本,可以简单地将这个理解为JSONP类型请求回调函数,jQuery在我们每次指定Ajax请求方式为JSONP时都会生成这么一个JSONP回调函数,第一种方式下面这三行代码设定了JSONP请求方式:

dataType: "jsonp",
jsonp:
"jsonpcallback", // 指定回调函数,这里名字可以为其他任意你喜欢的,比如callback,不过必须与下一行的GET参数一致
data: "name=jxq&email=feichexia@yahoo.com.cn&jsonpcallback=?", // jsonpcallback与上面的jsonp值一致

   第二种方式则直接在GET参数后面带上jsonpcallback=?来标识。

   我们可以推断这么做以后,jQuery内部机制就帮我们绕过了浏览器的跨域访问限制,然后就可以像正常请求同域Action一样请求跨域Action了。

   最后返回的是一个函数表达式:

return jsonCallback + "(" + new JavaScriptSerializer().Serialize(user) + ")";

   这样返回给前端的就是类似这种jQuery17104721....({Name:"jxq", Email:"feichexia@yahoo.com.cn"}),它一返回到前端就会执行,得到的是一个JavaScript对象,对象有两个属性:Name和Email,所以我们可以直接调用json.Name和json.Email。

   上面return时千万别忘了圆括号,原因不多说,看看下面的例子就明白了:

var response = "{'foo' : 'bar'}";
var json = eval(response); // Invalid label
var json = eval("(" + response + ")"); // OK

   此外也可以通过动态创建Script、内嵌iframe方式实现跨域。动态创建script的简单代码如下:


  • 设计模式初学者系列-模板方法

    2007-10-9 10:31:00

    摘要: 模板方法属于行为型设计模式,行为型设计模式主要关注对象之间职责分配和算法的问题。类行为型模式使用继承来分配类之间的职责,模板方法就是个类行为型模式。对象行为型模式使用组合来分配职责。在我们

  • WPF:如何在VisualTree上增加Visual?

    2009-11-10 0:29:00

    阅读: 37 评论: 0 作者: Aaron Lu 发表于 2009-11-09 23:50 原文链接 作为一个 WPF 控件开发者,我在工作中经常遇到如本文标题所示的问题。其实,这个

  • 面向对象之设计

    2009-4-14 9:29:00

    摘要: 面向对象之设计面向对象魅力在于真实与抽象之间的演变。 管理信息系统是个强调个性化的主题,但应当明确的是:这种个性化所对应的是系统功能,而不一定是软件的设计元素与设计过程。当我们把设计粒度降低

  • flash编程入门,用actionscript3.0实现经典游戏【连连看】

    2009-7-9 15:09:00

    连连看作为一个经典的游戏受到很多上班族的喜爱 我老婆就很喜欢玩这个游戏,好,给她做一个 做起来也不难,只要知道实现的原理,不管用什么语言都很容易实现 先看效果

  • Desert Code Camp – November 2009 Lessons Learned

    2009-11-10 0:29:00

    My first Code Camp is done and I wanted to jot down some of the lessons I learned. Bring EXTRA

  • IP数据报之Internet Header Length

    2011-10-19 18:15:00

      如图所示,此为IP包的表头格式,对应图中的信息,我们可以计算出,每一行的总长度都为32bit。   在看TCP/IP协议卷一的时候,看到IP首部长度为4bit,首部最

  • 实现ICTCLAS到C#平台的移植

    2007-3-7 23:59:00

    在研究了一段时间中科院计算所张华平、刘群所开发的ICTCLAS分词系统(Free版)代码后,阅读了大量的相关资料,我开始着手将C++的ICTCLAS分词系统移植到.net平台下,并取得了较好的实验结

  • 在SqlServer2000的视图中小心使用*符号

    2007-7-25 13:47:00

    摘要: 在视图中使用*符号要注意的问题你注意到了吗?使用视图你犯过这样的错误吗? 阅读全文 today 2007-07-25 12:45 发表评论

  • 说说ADO.NET EF 中的实体修改方法

    2009-12-1 14:25:00

    阅读: 475 评论: 4 作者: ejiyuan 发表于 2009-12-01 12:00 原文链接 1.传统修改模式,看下列代码 using (NorthwindEnti

  • .net3.0 中跨线程访问控件

    2007-5-10 21:27:00

    摘要: 这两天用WPF做一个项目的UI部分时, 发现跨线程地访问了UI控件, 自然地报异常了. 当时找了半天也没在控件中找到InvokeRequired属性和Invoke方法, 郁闷之极.....最