当前位置 > 首页 > Asp.net

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

12/7/2012 4:25:00 PM来源: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的简单代码如下:


  • ASP.NET MVC 2: Strongly Typed Html Helpers

    1/11/2010 1:55:00 PM

    [In addition to blogging, I am also now using Twitter for quick updates and to share links. Follow

  • Flex分页控件

    1/13/2010 3:49:00 PM

    阅读: 312 评论: 2 作者: 镜涛 发表于 2010-01-13 11:47 原文链接 提到分页大家应该都很熟悉了,几乎所有的应用中都会用到。因而完成一个分页组件在不同的应用中进行

  • IE 8 - IP Address Mapping Accelerator

    4/2/2009 12:27:00 AM

    On the ASP.NET forums where I moderate, the posters IP address is displayed at the bottom of the po

  • IE6/IE7/FF的CSS hack总结

    11/28/2009 3:48:00 AM

    阅读: 35 评论: 5 作者: 小黑 发表于 2009-11-28 01:04 原文链接 摘要 昨天去178.com公司参加笔试,对CSS仅有一道题,要求是写CSS,在IE6/

  • 如何在CodePlex 创建开源项目

    8/20/2007 6:04:00 PM

    摘要: CodePlex是微软的一个开源网站(http://www.codeplex.com/).开发人员可以在上面创建自己的开源项目. 并对项目进行源代码版本控制和BUG/任务分配管理. Co

  • Equals、RefrenceEquals和==的区别

    9/17/2009 3:41:00 PM

    摘要: 今天无意看到一篇有关Equals和==的区别的帖子,帖子中间简单的说成是比较引用和比较值,这样的理解很有问题。看了看MSDN,总结如下。从两个方面来说说这三者的区别。先给出一个类和一个结构:

  • WSS3.0和MOSS2007对移动设备浏览器的支持

    2/7/2007 8:52:00 PM

    摘要: Windows SharePoint Services 3.0 和 SharePoint Server 2007 增加了很多新功能,其中包括对移动设备浏览器的支持。本文将介绍如何通过移动设备

  • Asp.net Web.config文件读取路径你真的清楚吗?

    11/16/2012 4:16:00 PM

    我们经常都在用ConfigurationManager的AppSettings和ConnectionStrings属性,当一个项目中有很多Web.config时它们的读取顺序究竟是怎么的了?也许我们

  • 求助一个p2p的测试算法

    8/16/2009 3:41:00 PM

    摘要: 我做了一个P2P的系统,想测试一下它的性能,于是想做一个测试程序,我把数据都收集好了,可是对数据的分析的算法却无从下手,各位大侠们感兴趣的不妨试一下如何解决这个问题。 问题前奏:被测试的程

  • Visual Studio SDK 4.0, Vista and symbolic links...

    9/23/2007 7:31:00 AM

    When you install Visual Studio SDK on Vista, it doesnt install by default on X:\Program Files, but