本文章来给大家详细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参数设置为?。