前言

我工作以來接觸的第一個項目就是前後端分離的，前端靜態文件有自己獨立功能變數名稱，通過介面來獲取數據進行渲染等操作。
跨域的方法不需要多言，隨便一搜，就有很多，但最常用不外乎jsonp和CORS。jsonp著重於前端，也算是前端Hack技巧，CORS重於後端，服務端需要配置的地方會較多。
這篇解析一下jsonp的實現原理。

基本原理

基本原理很容易說明白，在html頁面中有一些標簽是不受跨域限制的，比如img，script，link等。如果把我們需要的數據，放在一個js文件裡面，這時，我們就能突破瀏覽器同源的限制。

創建script標簽

《高性能JavaScript》中提到了動態腳本元素，作者寫道：

1. 文件在該元素被添加到頁面時開始下載。這種技術的重點在於：無論何時啟動下載，文件的下載和執行過程不會阻塞頁面其他進程。

2. 使用動態腳本節點下載文件時，返回的代碼通常會立刻執行（除了Firefox和Oprea，它們會等待此前所有動態腳本節點執行完畢。）當腳本自執行時，這種機制運行正常。

引用1保證了JSONP請求的時候不會阻塞主線程，引用2保證了JSONP代碼在載入完成後，立刻自執行時不會出錯。

callback

服務端在接收到GET請求之後，通常要判斷是否有callback參數，如果有，則需要在返回的數據外面加上一個方法名和括弧。例如，發起如下請求：

http://www.a.com/getSomething?callback=jsonp0

那麼服務端就會返回如下內容：

jsonp0({code:200,data:{}})

很明顯，由於這是在動態載入的Script標簽中包含的內容，那麼這就是一段自執行代碼，這段代碼只有一個函數被調用———jsonp0。
當然，有執行，則必須先創建，否則就會報錯。創建這一步，就需要在調用前執行。
具體實現如下：

function jsonp (url, successCallback, errorCallback, completeCallback) {

    // 聲明對象，需要將函數聲明至全局作用域
    window.jsonp0 = function (data) {
        successCallback(data);
        if (completeCallback) completeCallback();
    }
    // 創建script標簽，並將url後加上callback參數
    var 
        script = document.createElement('script')
        , url = url + (url.indexOf('?') == -1 ? '?' : '&') + 'callback=jsonp0'
    ;
    script.src = url;
    document.head.parentNode.insertBefore(script, document.head);
    // 等到script載入完畢以後，就會自己執行
}

上面基本上完成了一個jsonp方法的核心，此時，jsonp0是我們聲明好的一個函數，如果服務端正常回傳的時候，就會執行jsonp0函數，裡面的successCallback回調也會執行。

完善一下

在實際情況下，通常會有許多個jsonp的請求同時調用，
那麼既然jsonp0就能滿足我們的需要，為什麼常常看到jsonp1，jsonp2等等依次累加的代碼呢？
這是因為，請求可能是很多個非同步進行。在第一次執行jsonp方法時，window.jsonp0是函數A，此時去載入js文件，在js未載入完畢的情況下，又調用了一次jsonp方法，此時，window.jsonp0指向了函數B。那麼等到兩次的js載入完畢以後，都會執行第二次的回調。
所以，我們需要對callback的名字做一個區別處理，累加就能滿足需要。
修改一下代碼：

var jsonpCounter = 0;
function jsonp (url, successCallback, errorCallback, completeCallback) {
    
    var jsId = 'jsonp' + jsonpCounter++;
    
    // 聲明對象，需要將函數聲明至全局作用域
    window[jsId] = function (data) {
        successCallback(data);
        if (completeCallback) completeCallback();
        clean();
    }
    // 創建script標簽，並將url後加上callback參數
    var 
        script = document.createElement('script')
        , url = url + (url.indexOf('?') == -1 ? '?' : '&') + 'callback=' + jsId
    ;
    script.src = url;
    document.head.parentNode.insertBefore(script, document.head);
    // 等到script載入完畢以後，就會自己執行
    
    //在執行完我們這個方法以後，會有很多script標簽出現在head之前，我們需要手動的刪除掉他們。
    function clean () {
        script.parentNode.removeChild(script);
        window[jsId] = function(){};
    }
}

加入了累加和清理之後，還有一個重要的地方需要處理，就是錯誤回調。正常來說，我們通常請求jsonp時，會設定一個超時時間，如果超過這個時間以後，就拋出超時異常。
實現如下：

var jsonpCounter = 0;
function jsonp (url, successCallback, errorCallback, completeCallback, timeout) {
    // 略去上面寫過的代碼
    var 
        timeout = timeout || 10000
        , timer
    ;
    if (timeout) {
        timer = setTimeout(function () {
            if (errorCallback) {
                errorCallback(new Error('timeout'));
            }
            clean();
        }, timeout)
    }
    
    function clean () {
        script.parentNode.removeChild(script);
        window[jsId] = function(){};
        if (timer) clearTimeout(timer);
    }
}

這樣，基本上就完成了jsonp的全部功能，剩下的可能需要做一些相容的修改，才算是一個完整的jsonp方法。

REFER

1. 《高性能JavaScript》
   
2. npm上的一個jsonp實現，JSONP