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

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐