封装jsonp

Posted 2020-09-25 Code_User

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了封装jsonp相关的知识，希望对你有一定的参考价值。

jsonp的原理：

　　　　就是利用<script>标签没有跨域的“漏洞”来达到与第三方通讯的目的，当需要通讯时，本站脚本创建一个script标签，地址指向第三方API

　　地址并提供一个回调函数来接收数据，第三方产生相应为json数据的包装，这样浏览器会调用callback()函数并传递解析后的json对象为参数。。

jsonp的核心：

　　　　动态创建添加script标签来调用服务器提供的js脚本。

别的不多说，直接上代码：

　　html代码;

1 <body>
2         <input type="text" name="text" id="text" value="" />
3         <div id="div"></div>
4     </body>

　　js代码：

 1 <script>
 2             //封装一个jsonp方法
 3             function jsonp(json){
 4                 //判断路径是否正确
 5                 if(!json.url){
 6                     alert("请输入正确路径");
 7                     return;
 8                 }
 9                 //设置默认值
10                 json.data = json.data || {};
11                 json.cbName = json.cbName || ‘cb‘;
12                 
13                 
14                 var fnName = "show" + Math.random();
15                 fnName = fnName.replace(".","");
16                 window[fnName] = function(json2){
17                     json.success && json.success (json2);
18                     oHeade.removeChild(oScript);
19                 }
20                 json.data[json.cbName] = fnName;
21                 var arr = [];
22                 for(name in json.data){
23                     arr.push(name + ‘=‘ + json.data[name]);
24                 }
25                 
26                 //创建script标签
27                 var oScript = document.createElement("script");
28                 //设置script的src属性
29                 oScript.src = json.url + ‘?‘ + arr.join("&");
30                 //获取head标签
31                 var oHeade = document.getElementsByTagName("head")[0];
32                 //将动态创建的script标签添加到head中
33                 oHeade.appendChild(oScript);
34             }
35             
36             
37             window.onload = function(){
38                 var oText = document.getElementById("text");
39                 oText.onkeyup = function(){
40                     jsonp({
41                         url:‘https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su‘,
42                         data:{
43                             wd:oText.value
44                         },
45                         success:function(json){
46                             var oDiv = document.getElementById("div").innerHTML = json.s;
47                         }
48                     });
49                     
50                 }
51             }
52             
53             
54         </script>

这就封装好了一个jsonp方法。。。

以上是关于封装jsonp的主要内容，如果未能解决你的问题，请参考以下文章

封装JSONP

原生javascript实现jsonp的封装

Node+H5 实现简单的 JSONP 封装

VSCode自定义代码片段14——Vue的axios网络请求封装