本文详细介绍了JSONP（JSON with Padding）的概念，它是一种跨域数据交互协议，通过动态创建script标签利用其跨域能力实现。JSONP的工作原理是通过指定回调函数并在服务器响应中返回函数调用的JS代码片段。文中还给出了jQuery中使用JSONP的示例，以及JSONP与JSON的区别。通过实例展示了如何在实际项目中应用JSONP进行跨域数据请求。
一、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返回的是脚本代码（包含一个函数调用）。
5458
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
