小皮球，下腳踢，馬蓮開花JSONP

簡單直白的實現jsonp

昨天和小夥伴聊天，聊到ajax和jsonp，網上關於jsonp的原理文章很多，但是因為jquery的封裝，好多人以為ajax和jsonp是一回事，那麼他們有什麼不同呢？時間寶貴，我們用簡短的方式瞭解一下jsonp。

一個get請求的樣子

正常的一個get請求是通過建立XHR物件，呼叫XHR物件的open、send、onreadystatechange方法來完成一次請求。

    var XHR=new XMLHttpRequest();//建立例項
    //啟動
    XHR.open("GET","test1.txt",true);
    //傳送
    XHR.send();
    //監聽執行狀態
    XHR.onreadystatechange=function()
    {
        //狀態判斷
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            // responseText：響應資料、readyState：響應狀態、status：響應狀態碼
            document.getElementById("myDiv").innerHTML=XHR.responseText;
        }
    }複製程式碼

jsonp是怎麼實現的?

• 不是XHR物件：jsonp並不呼叫XHR，而且和XHR沒什麼關係，是為了實現跨域，而衍生出來的一個野路子（相對於XHR），如今已經已被大家廣泛使用，相信看完這個你也就知道為什麼jquery封裝的jsonp不能設定同步了。

• 實現原理

  1. 建立script標籤，插入到頁面，引入js檔案。
  2. js檔案載入完成後執行引入的js檔案方法，並且return資料。

直白的展示

data.js為需要請求引入的js檔案

//data.js
function data(){
    return 'hello'
};複製程式碼

index.html

<script src="data.js"></script>
<script>
    var value = data();
    alert(value);//彈出hello
</script>複製程式碼

自己來寫一個jsonp

原理我們清楚以後，實現起來就簡單了，無非就是封裝一個方法，把檔案地址、回撥名稱、回撥函式封裝一下。

data.js

//具體方法名可讓後臺接收入參並且給你拼接出方法名`
function data(){
    return 'hello'
};複製程式碼

index.html

<script>
function jsonp(src,callbackName,fn){//建構函式， src:js地址，callbackName:回撥名稱，fn:回撥方法
    // 建立script標籤
    var El = document.createElement('script');
    // 設定src屬性為地址
    El.setAttribute('src',src);
    // 插入到body中
    document.body.appendChild(El);
    El.onload= function(){ // 載入完成回撥
        var cbFneval = eval(callbackName); // 根據callbackName入參字串轉換成可執行函式
        var value = cbFneval(); // 執行callbackName()，獲得返回的相應資料
        fn(value); // 執行回撥方法並傳入資料
        document.body.removeChild(El) //移除script標籤
    }; 
};

// 執行jsonp方法
jsonp('data.js','data',function(data){
    alert(data);
});
</script>複製程式碼

---

本文對你有幫助？歡迎掃碼加入前端學習小組微信群：