原生封裝Jsonp

你們好!咱們又見面了,昨天咱們講了一下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);
}

剩下的在頁面使用這個方法就行了,相信大家都會用的,再見了!