[HtmlCssJs] 2024-04-29 圈点976
摘要: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的方法