孤独求学人

Jquery跨域请求php获取数据之jsonp

2014-1-15 杜世伟 Jquery

静下心来，有时候停下来是为了走的更远 ！

今天在工作中碰到javascript(以下简称js)跨域的问题，以前有看过相关的文章不过没有亲自操作实践只是浏览了一下。由于很多页面调用相同的东西，我把需要出来操作的js代码统一放在了一个命名为.js文件中，如果是主域名访问不会出现什么问题，二级域名访问死活代码没有执行，纠结了我很长时间，不过最终还是搞定了，以下作为这次经过和经验的总结！

 

什么引起了ajax不能跨域请求的问题？

ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互，而浏览器出于安全考虑，不允许js代码进行跨域操作，所以会警告。

跨域的安全限制都是指浏览器端来说的，服务器端是不存在跨域安全限制的。所以针对这2种情况衍生出2类跨域解决方案，一类是服务器端做中转类似代理方式，一类是js处理浏览器端的真正跨域访问。

 

以下代码是我写在js文件中的一部分代码;

$.ajax({

   type:'get',

   url:"",//将要请求的方式

   contentType: "application/json",//contentTy类型

   data:"",

   dataType:'jsonp',//数据格式

   jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)

   jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据

   success : function(data){//请求成功

                 alert($data);

   },

   error: function () {//请求失败

   }

});

以上代码是用于请求php文件异步获取数据实现二级联动菜单.或许你看到了标红的字样，平常异步调用数据dataType使用的都是json，而标红的是jsonp！是的你没有看错就是jsonp。

两者有什么请区别呢？

JSON和JSONP虽然只有一个字母的差别，但其实他们根本不是一回事儿：JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。

请求的php文件返回数据的格式为json，范例代码如下:

$result = json_encode(array($data));

echo "flightHandler($result)";//此处的flightHandler是上面$ajax中jsonpCallback定义的名称,由于jquery已经封装好了jsonp可以直接拿去用。

 

 

当使用jsonp时，使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

有人建议此处的函数名称可以弄成动态获取的，为了实现不同的操作代码范例：

$method = isset($_GET[‘method’])?trim($_GET[‘method’]):’flightHandler’;//获取方法名称

$result = json_encode(array($data));

echo $method ."($result)";/

 

Jsonp原理：

1):首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器。

此时，服务器先生成 json 数据。

2):然后以 js语法的方式，生成一个function , function 名字就是传递上来的参数 'jsoncallback'的值 jsonp1236827957501 .

3):最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。客户端浏览器，解析js标签，并执行返回的js 文档，此时js文档数据,作为参数，传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里.（动态执行回调函数）

可以说jsonp的方式原理上和<script src="http://跨域/...xx.js"></script>是一致的(qq空间就是大量采用这种方式来实现跨域数据交换的) .JSONP是一种脚本注入(Script Injection)行为,所以也有一定的安全隐患.

标签: PHP JavaScript linux js json jsonp 跨域