大家好!我們又見面了,昨天我們講了一下jQuery的表單驗證插件,今天我們來說一下Jsonp.

我們平常做的頁面大部分的數據其實都是從後臺獲取過來的,最常用的方法就是Ajax,但是Ajax不能跨域取數據,這時我們就要用到Jsonp,那麽什麽是Jsonp?

jsonp原理:

就是利用<script>標簽沒有跨域的"漏洞"來達到與第三方通訊的目的，當需要通訊時，本站腳本創建一個<script>元素，地址指向第三方API地址，並提供一個回調函數來接受數據，第三方產生為Json數據的包裝，這樣瀏覽器會調用callback()函數，並傳遞解析後的Json對象作為參數，本站腳本可在callback()函數裏處理傳入的數據.

具體代碼如下:

function jsonp(json){ //封裝一個函數,方便以後使用, 參數傳入一個json對象
　　if(!json.url){ //考慮默認的情況
　　　　alert("請輸入地址");
　　　　return;
　　}
　　json.data = json.data || {}; //都要考慮默認情況
　　json.cbName = json.cbName || "";

　　var fnName="show"+Math.random();//為了不使每個函數名一樣,給函數名加隨機數,避免了一些不必要的麻煩,
　　fnName=fnName.replace(".","");//隨機數會有小數點,函數名不能有小數點,替換掉

　　window[fnName]=function(json1){//因為動態添加的script標簽,每次調用都會創建一堆的script標簽,頁面加載的時候先清除一下
　　　　json.success && json.success(json1);//判斷用戶有沒有傳入success方法有就執行
　　　　head.removeChild(script);
　　};

　　json.data[json.cbName]=fnName;
　　var arr=[];//創建一個空數組,把用戶傳入的值放進去
　　for(var name in json.data){
　　　　arr.push(name + "=" + json.data[name]);
　　　　console.log(arr);
　　};

　　var script=document.createElement("script");

　　//網址的格式是地址+?+&(中間是數據)
　　script.src= json.url + "?" + arr.join("&");
　　var head=document.getElementsByTagName("head")[0];
　　head.appendChild(script);
}

剩下的在頁面使用這個方法就好了,相信你們都會用的,再見了!

原生封裝Jsonp