一、原理
我的理解：因为script标签（类似的还有img，iframe）不受同源策略限制，故可以用于跨域数据的获取，这是根本原因。
客户端设置一个script，其url指向支持JSONP的后端API，再声明一个callback函数，函数名需与url中?callback=字段值相同。当包含特定url的script载入时，会向后端API发起请求，后端会将数据包裹进一个函数的参数里，当然这个函数的名称是根据前端url参数自动生成的，前端script载入完成则自动调用已有的callback函数，对接受到的数据（此刻是函数参数）做出处理，从而实现了跨域。
二、实现
1.JS实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<script>
"use strict";
let test = function (data) {
console.log(data);
};
let url = "http://cache.video.iqiyi.com/jp/avlist/202861101/1/?callback=test";
let script = document.createElement("script");
script.setAttribute("src",url);
document.getElementsByTagName("body")[0].appendChild(script);
</script>
</body>
</html>
|
2.jQuery实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<script src="jquery.js"></script>
<script>
"use strict";
$(function () {
$.ajax({
url: "http://cache.video.iqiyi.com/jp/avlist/202861101/1/",
dataType: "jsonp",
jsonp: "callback",
success: function (data) {
console.log(data);
},
error: function(){
alert("fail");
}
})
})
</script>
</body>
</html>
|
注：jQuery的callback函数名是随机生成的，返回的数据直接放入success函数处理，很方便。
三、JSONP与AJAX的区别
我的理解：
1.AJAX基于xhr对象实现，而JSONP是通过script标签动态加载后端js实现，原理不同
2.AJAX支持get/post，而JSONP因为需要在script的url中传参，所以只支持get
四、JSONP优缺点
优点：极好的浏览器兼容性
缺点：存在脚本注入的安全隐患
参考：
【原创】说说JSON和JSONP，也许你会豁然开朗，含jQuery用例
5 分钟彻底明白 JSONP
JSONP原理优缺点(只能GET不支持POST)