小皮球，下腳踢，馬蓮開花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>複製代碼

---

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