[HtmlCssJs] 2026-03-10 圈点683
摘要：JSONP的基本原理分析全过程，知jsonp所有然,解析：jsonp实际上是在ajax基础上调用了返回可变JS的方法
JSONP的基本原理分析全过程，知jsonp所有然
先对比几个实例：
示例1：
1,a站的a.html
内容如下：
<html> <head> <script type="text/javascript" src="b/b.js"></script> </head> <body> </body> </html>
2,b站的b.js
alert('i am b.js');很显然打开a.html会提示b.js中的内容，跨域调用成功。
稍微修改一下，变成示例2
1,a站的a.html
内容如下：
<html>
<head>
<script type="text/javascript">
var jsfun = function(data){
alert('the other data is ' + data.result);
};
</script>
<script type="text/javascript" src="b/b.js"></script>
</head>
<body>
</body>
</html>2,b站的b.js
jsfun({"result":"i am b.js"});打开a.html后，发现仍然能显示b.js中的内容，跨域调用成功。
当然也可以将参数再丰富一点，然后就有了jsonp的原形。
比如b.js中可以传递再多的参数
再来一个jsonp的jquery示例(公共基本代码忽略，比如引用jquery等)：
示例3：
a.html内容为
<script type="text/javascript">
jQuery(document).ready(function(){
$.ajax({
type: "get",
async: false,
url: "b/b.php?a=a&b=b",
dataType: "jsonp",
jsonp: "callback",//调用函数的参数名，一般默认是这个
jsonpCallback:"jsfun",//jsonp回调函数名称
success: function(json){
alert('stats:' + json.status + ',msg:' + json.status);
},
error: function(){
alert("bad")
}
});
});
</script>b.php可以根据get参数返回对应的函数名和数据，如：
jsfun({
"stats": "1",
"msg": "ok"
});解析：jsonp实际上是在ajax基础上调用了返回可变JS的方法