在页面上引入不同域上的JS脚本文件却是可以跨域的,JSONP正是利用这个特性来实现的,下面我们将逐步认识JSONP。
一、初识JSONP
JSON是一种数据交互格式,JSONP是一种非官方跨域数据交互协议。JSONP(json with padding)也叫填充式JSON,是被包含在函数调用中的JSON,可以让网页从别的网站获取资料,即跨域读取数据。
二、JSONP的组成
回调函数和数据。
三、JSONP的格式
callbackFunction({"name":"camille","sex":"male"})
四、JSONP的优缺点
1、优点
它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;
它的兼容性更好,在古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持;
在请求完毕后可以通过调用callback的方式回传结果。
2、缺点
它只支持GET请求而不支持POST等其它类型的HTTP请求;
它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
五、JSONP的原理
1、直接引入js文件
A、页面的代码
<script type="text/javascript" src="https://xxx.com.cn/js/test.js"></script>
B、test.js的代码
alert("script方式引入js文件");
页面弹出:script方式引入js文件
2、跨域的js调用本地方法获取数据
A、页面的代码
<script type="text/javascript">
var testCallbackFunc = function(result){
alert("我是本地函数,可以被跨域的test.js文件调用,name: " + result.name);
};
</script>
<script type="text/javascript" src="https://xxx.com.cn/js/test.js"></script>
B、test.js的代码
testCallbackFunc({
"name": "camille",
"sex": "male",
"age": 27});
页面弹出:我是本地函数,可以被跨域的test.js文件调用,name:camille
3、怎么让远程js知道它应该调用的本地函数叫什么名字呢?
可以传一个参数过去告诉服务端“我想要一段调用testCallbackFunc函数的js代码,请你返回给我”,于是服务器就可以按照客户端的需求来生成js脚本并响应了。
//jsonp回调方法,一定要写在jsonp请求前面
//script默认会把请求回来的内容当成js脚本进行解析运行。
var testCallbackFunc= function (result) {
alert("je suis " + result.name);
};
var scriptsrc ="https://xxx.com.cn/api/getUserInfo?sCallback=testCallbackFunc"; //访问后端接口,得到服务器端生成的被回调函数包裹的JSON数据,js脚本。
var dscript = document.createElement("script");
dscript.setAttribute("src", scriptsrc);
document.getElementsByTagName('head')[0].appendChild(dscript);
在network中查看请求,可以看到服务端返回的数据是这样的。
testCallbackFunc({
"name": "camille",
"sex": "male",
"age": 27
});
接下来,把代码封装一下,以便于与用户界面交互,从而实现多次和重复调用。
4、jQuery如何实现jsonp调用
$.ajax({
url:"https://xxx.com.cn/api/getUserInfo",
async: false,
type: "get", // jsonp模式只有get是合法的
data:{
sUrl: "https://sss.com.cn/page/detail.html"
},
dataType: "jsonp",
jsonp:"sCallback",// 指定回调函数名,与服务器端接收的一致,并回传回来
jsonpCallback:"testCallbackFunc",//自定义jsonp回调函数名称,该方法不用自己写
success:function(result){
//dosomething
},
error:function(){
//dosomething
}
})
JSONP协议的特点就是允许用户给服务端传递一个jsonpCallback参数(如jQuery2030038573939353227615_1402643146875)
服务端返回数据时,会将jsonpCallback的参数值作为函数名来包裹json数据,这样客户端就可以自定义函数处理返回数据了。
A、如果不设置jsonpCallback参数,jQuery会自动帮我们随机生成一个回调函数,类似jQuery2030038573939353227615_1402643146875。每刷新一次页面,该值就会变。在network中查看请求,可以看到服务端返回的数据是这样的。
jQuery2030038573939353227615_1402643146875({
"name": "camille",
"sex": "male",
"age": 27
});
B、如果设置jsonpCallback参数,我们可以自定义一个回调函数testCallbackFunc。在network中查看请求,可以看到服务端返回的数据是这样的。
testCallbackFunc({
"name": "camille",
"sex": "male",
"age": 27
});
jquery内部会转化成
https://xxx.com.cn/api/getUserInfo?sCallback=testCallbackFunc&sUrl=http://sss.com.cn/page/detail.html
然后动态加载
<script type="text/javascript" src="https://xxx.com.cn/api/getUserInfo?sCallback=testCallbackFunc&sUrl=http://sss.com.cn/page/detail.html
"></script>
获取到数据后,jQuery会自动销毁这个全局函数。
5、封装后的简写方式
$.getJSON方法会自动判断是否跨域,不跨域的话,就调用普通的ajax方法;跨域的话,则会以异步加载js文件的形式来调用jsonp的回调函数。
$.getJSON("https://xxx.com.cn/api/getUserInfo?sUrl=https://sss.com.cn/page/detail.html&sCallback=testCallbackFunc",
function(result){
//dosomething
});
六、如何处理跨域请求失败?
如果服务器拒绝请求,或者请求地址不正确,参数错误,网络不通,跨域就取不到数据,怎么办?下面介绍3种方案。众所周知,在浏览器中,script标签遇到服务器错误时,会触发onerror事件。
1、如果自己实现jsonp,可以这么做。
var ele = document.createElement('script');
ele.type = "text/javascript";
ele.src = '...';
ele.onerror = function() {
alert('error');
};
ele.onload = function() {
alert('load');
};
document.body.appendChild(ele);
2、如果想用jquery的jsonp
JQuery不会处理此类错误,而是选择“静静地失败”,fail回调不会执行,你的代码也不会得到任何反馈,所以你没有处理这种错误的机会,也无法向用户报告错误。
jQuery.ajaxTransport( "script", function(s) {
if ( s.crossDomain ) {
var script,
head = document.head || jQuery("head")[0] || document.documentElement;
return {
send: function( _, callback ) {
script = document.createElement("script");
script.async = true;
...
script.src = s.url;
script.onload = script.onreadystatechange = ...;
head.insertBefore( script, head.firstChild );
},
abort: function() {
...
}
};
}
});
可以看到script是个局部变量,外部无法取到。但是我们可以根据script标签的位置,动态获取head第一个元素,就可以拿到script,然后添加onerror事件。
function jsonp(url, data, callback) {
var xhr = $.getJSON(url + '?jsoncallback=?', data, callback); // request failed
xhr.fail(function(jqXHR, textStatus, ex) {
/*
* in ie 8, if service is down (or network occurs an error), the arguments will be:
*
* testStatus: 'parsererror'
* ex.description: 'xxxx was not called' (xxxx is the name of jsoncallback function)
* ex.message: (same as ex.description)
* ex.name: 'Error'
*/
alert('failed');
}); // ie 8+, chrome and some other browsers
var head = document.head || $('head')[0] || document.documentElement; // code from jquery
var script = $(head).find('script')[0];
script.onerror = function(evt) {
alert('error'); // do some clean // delete script node
if (script.parentNode) {
script.parentNode.removeChild(script);
}
// delete jsonCallback global function
var src = script.src || '';
var idx = src.indexOf('jsoncallback=');
if (idx != -1) {
var idx2 = src.indexOf('&');
if (idx2 == -1) {
idx2 = src.length;
}
var jsonCallback = src.substring(idx + 13, idx2);
delete window[jsonCallback];
}
};
}
3、修改jquery源码,加上onerror事件。