前端百題斬【026】——瀏覽器出讓安全性造就JSONP

寫該系列文章的初衷是「讓每位前端工程師掌握高頻知識點，爲工做助力」。這是前端百題斬的第26斬，但願朋友們關注公衆號「執鳶者」，用知識武裝本身的頭腦。

26.1 JSONP基礎

衆所周知，JSONP是一種跨域解決方案，下面來一步步剖析一下爲何JSONP可以解決跨域問題。

1. 基本思想

JSONP基本思想是在網頁中添加一個< script >元素，向服務器請求數據，服務器收到請求後，將數據放在一個指定名字的回調函數中傳回來。這應該是常常看到的一種解釋JSONP請求的思路，可是同源策略不是不容許向非同源發送請求的，那怎麼又怎麼能夠經過JSONP解決跨域呢？看起來是一個很矛盾的點。

2. 爲何JSONP可以實現跨域

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

26.2 手撕JSONP

上述聊了什麼是JSONP、其基本思想以及爲何JSONP可以實現跨域，下面一塊兒來實現JSONP。

1. 全局掛載一個接收數據的函數；
2. 建立一個script標籤，並在其標籤的onload和onerror事件上掛載對應處理函數；
3. 將script標籤掛載到頁面中，向服務端發起請求；
4. 服務端接收傳遞過來的參數，而後將回調函數和數據以調用的形式輸出；
5. 當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);
}
複製代碼

1.若是以爲這篇文章還不錯，來個分享、點贊吧，讓更多的人也看到

2.關注公衆號執鳶者，與號主一塊兒斬殺前端百題