jsonp的原理，封裝jsonp的方法介紹

jsonp的原理：

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

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

jsonp的核心：

　　　　動態建立新增script標籤來呼叫伺服器提供的js腳本。

別的不多說，直接上程式碼：

　　HTML程式碼;

2         
<input>3         
<div></div>4    

　　js程式碼：

 <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 || &#39;cb&#39;;               
 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 + &#39;=&#39; + json.data[name]);24                 }         
 //创建script标签27                
 var oScript = document.createElement("script");28                 
 //设置script的src属性29                 
 oScript.src = json.url + &#39;?&#39; + arr.join("&");30                 
 //获取head标签31                 
 var oHeade = document.getElementsByTagName("head")[0];32                 
 //将动态创建的script标签添加到head中33                 
 oHeade.appendChild(oScript);34             }            
 window.onload = function(){38                 
 var oText = document.getElementById("text");39                 
 oText.onkeyup = function(){40                     
 jsonp({41                         
 url:&#39;https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su&#39;,42                         data:{43                             
 wd:oText.value44                         },45                         
 success:function(json){46                             
 var oDiv = document.getElementById("div").innerHTML = json.s;47                         }               
 }        
 </script>

這就封裝好了一個jsonp方法。 。 。

以上是jsonp的原理，封裝jsonp的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！