jquery ajax跨域请求详解

本文章来给大家详细jquery中的ajax跨域请求, 在JQuery对于Ajax的跨域请求有两类解决方案，不过都是只支持get方式。分别是JQuery的jquery.ajax jsonp格式和jquery.getScript方式。

ajax要在各种浏览器下都实现完美的跨域需要借助于jsonp技术，jsonp实质是请求一个js脚本文件，在js文件载入完毕时执行某个函数，这样就可以完美的规则跨域问题了。

什么是jsonp格式呢？API原文：如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。意思就是远程服务端需要对返回的数据做下处理，根据客户端提交的callback的参数，返回一个callback(json)的数据，而客户端将会用script的方式处理返回数据，来对json数据做处理。JQuery.getJSON也同样支持jsonp的数据方式调用。

jquery封装了jsonp请求的发送方式，使jsonp请求和ajax请求方式几乎相同了，如下是jquery跨域请求的写法：

代码如下	复制代码
$.ajax({      url:"testserver.php",      dataType: 'jsonp', // 注意：JSONP <-- P (lowercase)      success:function(json){          // do stuff with json (in this case an array)          alert("Success");      },      error:function(){          alert("Error");      }, });

注意跨域请求的一般ajax请求的区别在于dataType设置成了jsonp了

对应的服务器端代码示例如下：

代码如下	复制代码
<?php $arr = array("element1","element2",array("element31","element32")); $arr['name'] = "response"; echo $_GET['callback']."(".json_encode($arr).");";  // 09/01/12 corrected the statement ?>

上面介绍的是php的，下面我来看个与asp.net的

前台请求代码

代码如下

复制代码

$.ajax({                 type: "GET",                 url: "http://www.xxx.com/Rest/ValidAccountsExists.aspx?accounts=admin",                              dataType: "jsonp",                 jsonp: "jsoncallback",                    success: function (result) {     alert(result.Success);     alert(result.Content);                                                 }, error: function (result, status) {                    //处理错误                 }             });

后台处理代码 ValidAccountsExists.aspx

代码如下	复制代码
string accounts = GameRequest.GetQueryString("accounts"); string jsoncallback = GameRequest.GetQueryString("jsoncallback"); Response.ContentEncoding =System.Text.Encoding.UTF8;  Response.ContentType = "application/json"; Response.Write(jsoncallback + "({"Success":"True","Content":"" + accounts  + ""})");  Response.End();

上面服务器代码在输出时添加了js函数调用$_GET['callback']，很显然是通过对此php文件的get参数callback传递了一个js的函数名，jquery会自动设置这个callback。

另外jquery还提供了 $.getJSON()方法，这个方法是对上面跨域请求的封装，注意使用此方法时需要将请求的url的callback参数设置为?。