大佬教程收集整理的这篇文章主要介绍了jsonp 实现原理及代码解析，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<!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 方法执行。
以上是大佬教程为你收集整理的jsonp 实现原理及代码解析全部内容，希望文章能够帮你解决jsonp 实现原理及代码解析所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。