jQuery Ajax 实现跨域名请求的方法 JSONP - 服务端C#/ASP.NET示例代码图文讲解

Web Service 是不能进行跨域请求数据的，但是我们应该怎么解决jQuery Ajax 跨域请求数据的方法呢。JSONP就是答案，我们可以使用JSONP实现jQuery Ajax跨域访问的问题。

什么是JSONP?

说说jsonp是怎么产生的吧，首先下面几个问题应该了解：

• Ajax直接请求跨域的静态、动态网页、Web Service等等，只要是跨域的，一律是不允许的。
• 回忆一下，我们在HTML页面中使用script、img标签的时候是没有受到跨域的影响。
• 于是想到了解决方案，就是把服务器端的数据封装在js文件中，客户端可以通过获取js跨域文件的方法来获取数据
• 回想一下，我们服务端如果直接返回给Ajax请求返回json格式的数据时候，客服端Ajax方法的success：function(e)是可以接受json数据的。所以我们服务端动态生成json文件返回给客服端使用是可以实现的。
• 所以在这种思想下，形成了一种看似非正常的网络协议，这就是JSONP,这个协议的关键点是允许用户传递一个callback参数给服务端，然后服务端将这个callback参数的值作为js的函数名来封装JSON数据，这样客户端就可以实现跨域访问来处理数据了。

示例代码如下所示：

$.ajax({
        type : "post",
        url :'http://跨域域名/test?callback=GetPersonName', 
        dataType : "jsonp",
        jsonpCallback:"callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
        jsonpCallback:"GetPersonName",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
		success: function(json){
             alert('用户名为： ' + json.Name);
         },
         error: function(){
             alert('fail');
         }
    });

服务端C#代码如下所示

    String callbackFunName = Request.QueryString["callback"];
    Response.Write(callbackFunName + "({ \"name\":\"知道91博客\"})");

服务端获取到callback的值为GetPersonName，然后返回GetPersonName({ \"name\":\"知道91博客\"})这个字符串给客服端，jQuery由于封装了JSONP,在处理jsonp类型的ajax时会自动将返回GetPersonName({ \"name\":\"知道91博客\"})中的参数{ \"name\":\"知道91博客\"}传递给success：function(json)的属性方法，因此我们可以看到显示“用户名为：知道91博客”的弹出框。

好了，到此通过jQuery的Ajax的JSONP方法就可以实现跨域请求数据。