jquery Ajax跨域请求

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

这是jquery api文档对跨域请求的解析：如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用JSONP类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。如果要指定回调函数的参数名来取代默认的callback，可以通过设置$.ajax()的jsonp参数。

我们通过demo来参悟上面的解析：

$.ajax({
type: "get",
url: "http://www.yourdomain.com/site/test",//实际上访问时产生的地址为: http://www.yourdomain.com/site/test?callback=jsonpCallback&id=1
data: { id: },
dataType: "jsonp",
success: function (data) {
alert(data.statu);
},
error: function (XMLHttpRequest,textStatus,errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
});

上面就是一个最简单的跨域访问请求了。好了，来说说跟普通ajax的区别。首先实际上访问时的地址为：

http://www.yourdomain.com/site/test?callback=随机数&id=10。参照api定义:

使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的URL后面。

这个随机数是jQuery自动生成的。采用jsonp类型情况下，最终生成的url就是如此的。

接下来，看看后台：

服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。

这是服务器（C# MVC）的代码：

[HttpGet]
public string test(string callback, string id)
{
return callback + "(" + "{\"statu\":" + id + "});";
}

一个有效的JSONP请求，需要在JSON数据前加上回调函数名。回调函数名是上面url中callback传递过来的值。此时服务器传递过来的值为：

jQuery18308788135794457048_1419557549884({"statu":""});

alert(data.statu);也能正确的输出“1”。有人会说json数据前还有回调函数名么，不用处理也能正常输出data.statu??是的，这就是JSONP。

至此，API的前3句已经解析清楚了。就剩后半句了。上面的callback是jQuery随机生成的，回调函数名也是固定为callback，倘若用户要自己定义呢？这就需要用到最后一句话了。

如果要指定回调函数的参数名来取代默认的callback，可以通过设置$.ajax()的jsonp参数。

ajax代码如下:

$.ajax({
type: "get",
url: "http://www.yourdomain.com/site/test",//实际上访问时产生的地址为: http://www.yourdomain.com/site/test?mycallback=jsonpCallback&id=1
data: { id: },
dataType: "jsonp",
jsonp: "mycallback",
jsonCallback: "jsonpCallback",
success: function (data) {
alert(data.statu);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
} });

看到代码应该懂了吧。jsonp属性是设置传递过去的请求参数名的。jsonCallback属性则是自定义传递过去的参数。此时实际访问的url为：

http://www.yourdomain.com/site/test?mycallback=jsonpCallback&id=1接下来就不细说了。后台接收代码：

[HttpGet]
public string test(string mycallback, string id)
{
return mycallback + "(" + "{\"statu\":" + id + "});";
}

接收过来的数据：

jsonpCallback({"statu":""});

强调一下的就是。JSONP类型 ajax只支持get请求，post请求的情况已经测试过，是不行的。

至此，api的解析全部解析透了。

接下来，就是曲折版了。

假如你传递过去的jsonpCallback参数为一js函数的话，也是可以的。成功回调之后，会首先调用jsonpCallback函数，然后是success函数。也就是会先alert("I am back~"),后alert(10)。

注意：jsonpCallback属性不能为匿名函数。即不能如下：

$.ajax({
type: "get",
//async: false,
url: "http://www.yourdomain.com/site/test4", //实际上访问时产生的地址为: test4?callback=undefinedk&id=10
data: { id: },
cache: false, //默认值true
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
jsonpCallback: function () { },
//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
//如果这里自定了jsonp的回调函数，则回调函数先起作用，后是success函数
success: function (data) {
alert(data.statu);
//alert(json.message);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
});