[[410028]]

26.1 JSONP基礎(chǔ)

眾所周知，JSONP是一種跨域解決方案，下面來一步步剖析一下為什么JSONP能夠解決跨域問題。

基本思想

JSONP基本思想是在網(wǎng)頁中添加一個< script >元素，向服務(wù)器請求數(shù)據(jù)，服務(wù)器收到請求后，將數(shù)據(jù)放在一個指定名字的回調(diào)函數(shù)中傳回來。這應(yīng)該是經(jīng)常看到的一種解釋JSONP請求的思路，但是同源策略不是不允許向非同源發(fā)送請求的，那怎么又怎么可以通過JSONP解決跨域呢?看起來是一個很矛盾的點。

為什么JSONP能夠?qū)崿F(xiàn)跨域

從同源策略的角度考慮，確實嵌入的< script >發(fā)起的請求(非同源)違背了同源策略，但其實這是由于瀏覽器為了便利性讓出了部分安全性，允許js文件、css文件、圖片等資源來自于非同源服務(wù)器，這也就解釋了為什么script請求的資源分明跨域了但是仍有內(nèi)容返回的原因，也正是由于瀏覽器出讓了部分安全性(允許頁面中可以嵌入第三方資源)，采用了JSONP的誕生。

26.2 手撕JSONP

上述聊了什么是JSONP、其基本思想以及為什么JSONP能夠?qū)崿F(xiàn)跨域，下面一起來實現(xiàn)JSONP。

1. 全局掛載一個接收數(shù)據(jù)的函數(shù);
2. 創(chuàng)建一個script標(biāo)簽，并在其標(biāo)簽的onload和onerror事件上掛載對應(yīng)處理函數(shù);
3. 將script標(biāo)簽掛載到頁面中，向服務(wù)端發(fā)起請求;
4. 服務(wù)端接收傳遞過來的參數(shù)，然后將回調(diào)函數(shù)和數(shù)據(jù)以調(diào)用的形式輸出;
5. 當(dāng)script元素接收到影響中的腳本代碼后，就會自動執(zhí)行它們。

function createScript(url, charset) { 
    const script = document.createElement('script'); 
    script.setAttribute('type', 'text/javascript'); 
    charset && script.setAttribute('charset', charset); 
    script.setAttribute('src', url); 
    script.async = true; 
    return script; 
} 
 
function jsonp(url, onsuccess, onerror, charset) { 
    const hash = Math.random().toString().slice(2); 
    window['jsonp' + hash] = function (data) { 
        if (onsuccess && typeof(onsuccess) === 'function') { 
            onsuccess(data); 
        } 
    } 
 
    const script = createScript(url + '?callback=jsonp' + hash, charset); 
 
    // 監(jiān)聽加載成功的事件，獲取數(shù)據(jù)，這個位置用了兩個事件onload和onreadystatechange是為了兼容IE，因為IE9之前不支持onload事件，只支持onreadystatechange事件 
    script.onload = script.onreadystatechange = function() { 
        //若不存在readyState事件則證明不是IE瀏覽器，可以直接執(zhí)行，若是的話，必須等到狀態(tài)變?yōu)閘oaded或complete才可以執(zhí)行 
        if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') { 
            script.onload = script.onreadystatechange = null; 
            // 移除該script的DOM對象 
            if (script.parentNode) { 
                script.parentNode.removeChild(script); 
            } 
 
            // 刪除函數(shù)或變量 
            window['jsonp' + hash] = null; 
        } 
    }; 
 
    script.onerror = function() { 
        if (onerror && typeof(onerror) === 'function') { 
            onerror(); 
        } 
    } 
 
    // 添加標(biāo)簽，發(fā)送請求 
    document.getElementsByTagName('head')[0].appendChild(script); 
} 

本文轉(zhuǎn)載自微信公眾號「執(zhí)鳶者」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系執(zhí)鳶者公眾號。