[[432964]]

1 JSONP基礎

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

基本思想

JSONP基本思想是在網頁中添加一個< script >元素，向服務器請求數據，服務器收到請求后，將數據放在一個指定名字的回調函數中傳回來。這應該是經?？吹降囊环N解釋JSONP請求的思路，但是同源策略不是不允許向非同源發送請求的，那怎么又怎么可以通過JSONP解決跨域呢?看起來是一個很矛盾的點。

為什么JSONP能夠實現跨域

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

2 手撕JSONP

上述聊了什么是JSONP、其基本思想以及為什么JSONP能夠實現跨域，下面一起來實現JSONP。

• 全局掛載一個接收數據的函數;
• 創建一個script標簽，并在其標簽的onload和onerror事件上掛載對應處理函數;
• 將script標簽掛載到頁面中，向服務端發起請求;
• 服務端接收傳遞過來的參數，然后將回調函數和數據以調用的形式輸出;
• 當script元素接收到影響中的腳本代碼后，就會自動執行它們。

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); 
 
    // 監聽加載成功的事件，獲取數據，這個位置用了兩個事件onload和onreadystatechange是為了兼容IE，因為IE9之前不支持onload事件，只支持onreadystatechange事件 
    script.onload = script.onreadystatechange = function() { 
        //若不存在readyState事件則證明不是IE瀏覽器，可以直接執行，若是的話，必須等到狀態變為loaded或complete才可以執行 
        if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') { 
            script.onload = script.onreadystatechange = null; 
            // 移除該script的DOM對象 
            if (script.parentNode) { 
                script.parentNode.removeChild(script); 
            } 
 
            // 刪除函數或變量 
            window['jsonp' + hash] = null; 
        } 
    }; 
 
    script.onerror = function() { 
        if (onerror && typeof(onerror) === 'function') { 
            onerror(); 
        } 
    } 
 
    // 添加標簽，發送請求 
    document.getElementsByTagName('head')[0].appendChild(script); 
} 

本文轉載自微信公眾號「前端點線面」，可以通過以下二維碼關注。轉載本文請聯系前端點線面公眾號。