前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>jsonp 的使用</title>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="test"></div>
<script>
$.ajax({
url: "http://169.254.217.223:3000/",type: "post",dataType : "jsonp",contentType: "application/json",jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"jsonpCallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
success: function (data) {
$("#test").text(JSON.stringify(data));
},error: function () {
}
});
</script>
</body>
</html>
后台代码
需要本地有 nodejs 环境，以及安装 express 包 npm install express --save
var express = require('express');
var app = express();
app.get('/',function (req,res) {
var callback = req.query.callback; //这里的callback 就是上面 jsonp: "callback" 定义的名称
res.send(callback + '({"data": "test","test": "data"})');
});
app.listen(3000,function () {
console.log('app is listening at port 3000');
});
实现原理
先来看看用js 实现 jsonp 的代码
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>js 实现jsonp </title>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="test"></div>
<script>
function jsonpCallback(data) {
$("#test").text(JSON.stringify(data));
}
var scriptStr = '<script src="http://127.0.0.1:3000/?callback=jsonpCallback"><\/script>';
$("body").after(scriptStr);
</script>
</body>
</html>
从代码可以看出来，要实现 jsonp 只是多定义了一个 回调函数 jsonpCallback，再把jsonp请求的url 改为了用script src 请求的方法。
总结得出jsonp 实现原理是：因为script 标签是不受同源策略约束的，所以只要把请求写在src 中，就可以得到你要的 json 数据，但是通过这种方式获得的如果只是 json 数据，就不能用，但是数据还是一样会返回来。
如果后台要返回一个回调函数包裹的字符串，在前端定义好该回调函数的方法，就能在回调函数中获取到后台返回的数据了。
返回来后会执行 jsonpCallBack 方法，并把数据作为参数传到 jsonpCallBack 方法执行。
常见问题
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
