前端百題斬之瀏覽器出讓安全性造就Jsonp
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。
- 全局掛載一個接收數(shù)據(jù)的函數(shù);
- 創(chuàng)建一個script標(biāo)簽,并在其標(biāo)簽的onload和onerror事件上掛載對應(yīng)處理函數(shù);
- 將script標(biāo)簽掛載到頁面中,向服務(wù)端發(fā)起請求;
- 服務(wù)端接收傳遞過來的參數(shù),然后將回調(diào)函數(shù)和數(shù)據(jù)以調(diào)用的形式輸出;
- 當(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í)鳶者公眾號。



















