一、JSONP是什么?
JSONP(JSON with Padding),是一个非官方的跨域解决方案,纯粹凭借程序员开发出来,只支持get请求。
二、JSONP是怎么工作的?
在网页有一些标签天生具有跨域能力,比如:img、link、iframe、script,
JSONP就是利用script标签的跨域能力来发送请求。
利用动态创建一个script标签并利用它的src属性向服务器发送一次HTTP请求,并提前声明好一个回调函数,回调函数的函数名利用callback请求参数传递给后端。
后端接收到来自前端的请求后,获取callback请求的请求参数并拼接一个调用函数的JS代码段并将要返回给前端的数据以实参的形式存在。前端接收到来自后端的响应后,
会将后端的返回内容当做JS代码来执行即调用一个函数,并用一个形参来接收后端向要传递过来的数据。
三、JSONP的使用。
- 动态创建一个script标签。
var script = document.createElement('script');
- 设置script的src,设置回调函数。
script.src = "http://localhost:3000/testAJAX?callback=abc";
function abc(data) {
alert(data.name);
};
-
将 script 添加到 body 中。
document.body.appendChild(script);
-
服务器中路由的处理。
router.get("/testAJAX" , function (req , res) {
console.log("收到请求");
var callback = req.query.callback;
var obj = {
name:"jack", age:18
}
res.send(callback+"("+JSON.stringify(obj)+")");
});
四、jQuery 中的 JSONP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">点击</button>
<ul id="list"></ul>
<script type="text/javascript" src="./jquery-1.12.3.js"></script>
<script type="text/javascript">
window.onload = function () {
var btn = document.getElementById('btn')
btn.onclick = function () {
$.getJSON("http://api.douban.com/v2/movie/in_theaters?callback=?",function (data) {
console.log(data); //获取所有的电影的条目
var subjects = data.subjects; //遍历电影条目
for(var i=0 ; i<subjects.length ; i++){
$("#list").append("<li>"+ subjects[i].title+"<br />"+ "<img src=\""+subjects[i].images.large+"\" >"+ "</li>");
}
});
}
}
</script>
</body>
</html>
五、JSONP的原理
利用了script标签不受同源策略的限制,在页面中动态插入了script,script标签的src属性就是后端api接口的地址,并且以get的方式将前端回调处理函数名称告诉后端,
后端在响应请求时会将回调返还,并且将数据以参数的形式传递回去。
六、JSONP和JSON的区别
json是一种轻量级的数据交换格式。jsonp是一种跨域数据交互协议。
json返回的是一串数据;而jsonp返回的是脚本代码(包含一个函数调用)。