封裝jsonp
阿新 • • 發佈：2017-06-27
pan 目的 lba onload back ack osc 創建 瀏覽器
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