同源策略
当我们尝试去访问其他服务器的时候,总是被拒绝,这是因为同源策略的限制性导致的,所谓同源,就是同域名同端口下才叫同源,只要你访问的服务器是不同域名或者不同端口,都会无法请求到
jsonp处理原理
而 HTML 的<script>
元素是一个例外。利用 <script>
元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。
大部分人可能已经了解过这些原理,我就不再赘述,直接看代码吧
原本是通过JS文件来处理,我们当然不可能从这一步开始做起,Jquery已经很好的封装好了这些内容。
下面就是例子:
我的前端网页:http://127.0.0.1:8020/jq/jsonp.html
//回调函数,callbackFunc是你在AJAX中定义的jsonpCallback属性,在请求成功后就会调用这个回调函数
function callbackFunc(data){
alert(data.name);
}
$.ajax({
type:type,//请求类型GET、POST
dataType:'jsonp',//声明希望返回的格式为JSONP
jsonp:"callback",//默认值为callback这个函数名,即使不写这个参数也没关系(后台获取回调函数名的参数,这个回调函数是为了让你请求成功后获取数据用的,当然也可以在success属性上面直接操作而不用回调函数)
jsonpCallback:callbackFunc,//回调的函数名,如果需要你得自己写一个相同函数名的函数,以处理请求成功后的业务
url:url,//请求地址(非同源服务器)
data:data,//你的数据
success:function(data) {
console.log(data.name);
},error:function(){
console.log('请求失败');
}
});
<?PHP $callback = $_GET['callback'];//这里的参数callback就是对应前端AJAX中的jsonp参数,告诉后台你一会要调用哪个回调函数 echo $callback."({name:1})";//将该回调函数名和JSON数据一起拼接起来并返回 //之后就可以通过success的data来获取数据:data.name ?>
如果AJAX请求中没有jsonpCallback和JSONP属性,也是可以请求成功的,可以直接在success属性中操作请求回来的数据,但是PHP文件中的代码不能改变,因为你虽然没有填,但是他有默认值,那就是jsonp:callback,但无法通过自定义的回调函数做进一步的处理,所以操作只能在success属性中完成
使用场景
如果你的前端和后台文件不在同一台服务器或者同一台服务器但是却放在不同端口环境下,就需要JSONP跨域处理数据
JSONP不再提示跨域请求,但是请求失败的原因
由于jsonp的原理和script src属性访问的原理是一致的,这意味着这些数据再后台只能用GET的方式获取到,而不能用POST方式,即使你用JQ.ajax中的type:post也只能通过GET获取,所以如果后台用POST方式获取数据,则无法获得你上传的数据,因此,只要把所有数据包括callback都已get获取就行了。