封裝jsonp

時間 2019-12-16

標籤封裝 jsonp 欄目軟件設計简体版

原文原文鏈接

jsonp的原理：json

　　　　就是利用<script>標籤沒有跨域的「漏洞」來達到與第三方通信的目的，當須要通信時，本站腳本建立一個script標籤，地址指向第三方API跨域

　　地址並提供一個回調函數來接收數據，第三方產生相應爲json數據的包裝，這樣瀏覽器會調用callback()函數並傳遞解析後的json對象爲參數。。瀏覽器

jsonp的核心：服務器

　　　　動態建立添加script標籤來調用服務器提供的js腳本。app

別的很少說，直接上代碼：dom

　　HTML代碼;函數

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

　　js代碼：jsonp

 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方法。。。url

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。