Jquery跨域请求PHP服务端数据

我们一般用到ajax的时候是在同服务器下,一般情况下不会跨域,但有时候需要调用其他域名或ip下的数据的时候,遇到跨域请求数据的时候。

今天在工作中碰到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文件返回数据的格式为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的方式原理上和是一致的(qq空间就是大量采用这种方式来实现跨域数据交换的) .JSONP是一种脚本注入(Script Injection)行为,所以也有一定的安全隐患.