JSONP是JSON with padding(填充式JSON或参数式JSON)的简写，常用于服务器与客户端跨域通信，由于其良好的兼容性，在Web服务中非常流行
基础
JSONP的基本思想是向网页中动态的添加一个<script>元素，并设置script元素的src属性为接口地址，利用script元素天生的跨域功能实现跨域请求。当通过script元素调用数据时，响应内容必须用JavaScript函数名包裹起来，这个函数名是可以自定义的，它取决于src地址的callback参数值（callback参数名也是可以自定义的，但通常默认设置为callback）
http://127.0.0.1:3030/api/test?callback=info
JSONP由回调函数和数据两部分组成。回调函数就是响应数据时应该在页面中调用的函数，回调函数的名称是在请求中指定的，而数据就是传入回调函数中的JSON数据
info({name: "wmui", age: 18})
JSONP示例
前端示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<button id="btn">btn</button>
<script>
function loadScript(url){
if(!loadScript.mark) {
loadScript.mark = 'load';
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.body.appendChild(script);
}
}
function info(response) {
console.log(response)
}
btn.onclick = function() {
loadScript('http://127.0.0.1:3040/api/test?callback=info')
}
</script>
</body>
</html>
后端示例
app.get('/api/test', function(req, res) {
res.jsonp({name: "wmui", age: 18});
})
结果
三句话解释jsonp:
- 前端动态创建带有callback函数的script
- 后端返回callback函数包裹的数据
- 前端调用这个函数拿到数据