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

知道91 | JS | 2016-05-22 | 阅读:2257

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方法就可以实现跨域请求数据。