咱们通常用到ajax的时候是在同服务器下,通常状况下不会跨域,但有时候须要调用其余域名或ip下的数据的时候,遇到跨域请求数据的时候。javascript
今天在工做中碰到javascript(如下简称js)跨域的问题,之前有看过相关的文章不过没有亲自操做实践只是浏览了一下。因为不少页面调用相同的东西,我把须要出来操做的js代码统一放在了一个命名为.js文件中,若是是主域名访问不会出现什么问题,二级域名访问死活代码没有执行,纠结了我很长时间,不过最终仍是搞定了,如下做为此次通过和经验的总结!php
什么引发了ajax不能跨域请求的问题?
ajax自己其实是经过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不容许js代码进行跨域操做,因此会警告。
跨域的安全限制都是指浏览器端来讲的,服务器端是不存在跨域安全限制的。因此针对这2种状况衍生出2类跨域解决方案,一类是服务器端作中转相似代理方式,一类是js处理浏览器端的真正跨域访问。java
$.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是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。jquery
$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)";
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)行为,因此也有必定的安全隐患.ajax