(三)ajax请求不同源之jsonp跨域

时间:2021-11-06 06:15:14

在页面上引入不同域上的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事件。