jquery ajax跨域请求详解

时间：2013-05-22 编辑：简简单单来源：一聚教程网

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了

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

代码如下	复制代码
$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参数设置为?。

上一个： JQuery 获取验证上传文件大小代码
下一个：根据生日计算年龄的JS代码

推荐专题

最新下载

热门教程

jquery ajax跨域请求详解

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程