JSONP原理及實(shí)現(xiàn)

基本原理

基本原理： 主要就是利用了 script 標(biāo)簽的src沒有跨域限制來完成的艇挨。

執(zhí)行過程

執(zhí)行過程：

  • 前端定義一個(gè)解析函數(shù)(如: jsonpCallback = function (res) {})
  • 通過params的形式包裝script標(biāo)簽的請(qǐng)求參數(shù)，并且聲明執(zhí)行函數(shù)(如cb=jsonpCallback)
  • 后端獲取到前端聲明的執(zhí)行函數(shù)(jsonpCallback)骚腥，并以帶上參數(shù)且調(diào)用執(zhí)行函數(shù)的方式傳遞給前端
  • 前端在script標(biāo)簽返回資源的時(shí)候就會(huì)去執(zhí)行jsonpCallback并通過回調(diào)函數(shù)的方式拿到數(shù)據(jù)了夭谤。

優(yōu)缺點(diǎn)

缺點(diǎn)：

  • 只能進(jìn)行GET請(qǐng)求

優(yōu)點(diǎn)：

  • 兼容性好论熙，在一些古老的瀏覽器中都可以運(yùn)行

案例分析

先來看看我們要實(shí)現(xiàn)一個(gè)什么效果：

在一個(gè)叫index.html的文件中有以下代碼：

<script type='text/javascript'>
    window.jsonpCallback = function (res) {
        console.log(res)
    }
</script>
<script src='http://localhost:8080/api/jsonp?id=1&cb=jsonpCallback' type='text/javascript'></script>

然后我本地有一個(gè)文件server.js它會(huì)使用node提供一個(gè)服務(wù)富俄，來模擬服務(wù)器。

并且定義一個(gè)接口/api/jsonp來查詢id對(duì)應(yīng)的數(shù)據(jù)截歉。

當(dāng)我打開index.html的時(shí)候就會(huì)加載script標(biāo)簽胖腾，并執(zhí)行了此次跨域請(qǐng)求。

前期準(zhǔn)備

  • 我在本地新建一個(gè)文件夾node-cors
  • 并在此目錄下npm init瘪松，初始化package.json
  • 安裝koa(node的一個(gè)輕量級(jí)框架)
  • 新建文件夾jsonp咸作，并新建index.html和server.js，一個(gè)寫前端代碼宵睦，一個(gè)寫后端
mkdir node-cors && cd node-cors
npm init
cnpm i --save-dev koa
mkdir jsonp && cd jsonp
touch index.html
touch server.js

后端代碼

由于JSONP的實(shí)現(xiàn)需要前后端配合记罚，先來寫一下后端的實(shí)現(xiàn)：

（看不懂沒關(guān)系，下面的前端簡單實(shí)現(xiàn)會(huì)做解釋）

const Koa = require('koa');
const app = new Koa();
const items = [{ id: 1, title: 'title1' }, { id: 2, title: 'title2' }]

app.use(async (ctx, next) => {
  if (ctx.path === '/api/jsonp') {
    const { cb, id } = ctx.query;
    const title = items.find(item => item.id == id)['title']
    ctx.body = `${cb}(${JSON.stringify({title})})`;
    return;
  }
})
console.log('listen 8080...')
app.listen(8080);

寫完之后壳嚎，保存桐智。

并在jsonp這個(gè)文件夾下執(zhí)行：

node server.js

來啟動(dòng)服務(wù)，可以看到編輯器的控制臺(tái)中會(huì)打印出"listen 8080..."

前端簡單實(shí)現(xiàn)

OK??诬辈，后端已經(jīng)實(shí)現(xiàn)了，現(xiàn)在讓我們來看看前端最簡單的一種實(shí)現(xiàn)方式荐吉，也就是寫死一個(gè)script并發(fā)送請(qǐng)求：

index.html中：

<script type='text/javascript'>
    window.jsonpCallback = function (res) {
        console.log(res)
    }
</script>
<script src='http://localhost:8080/api/jsonp?id=1&cb=jsonpCallback' type='text/javascript'></script>

這兩個(gè)script的意思是：

  • 第一個(gè)焙糟，創(chuàng)建一個(gè)jsonpCallback函數(shù)。但是它還沒有被調(diào)用
  • 第二個(gè)样屠，加載src中的資源穿撮，并等待請(qǐng)求的內(nèi)容返回

整個(gè)過程就是：

  1. 當(dāng)執(zhí)行到第二個(gè)script的時(shí)候缺脉，由于請(qǐng)求了我們的8080端口，并且把id和cb這兩個(gè)參數(shù)放到URL里悦穿。那么后臺(tái)就可以拿到URL里的這兩個(gè)參數(shù)攻礼。

  2. 也就是在后端代碼中的const { id, cb } = ctx.query這里獲取到了。

  3. 那么后端在拿到這兩個(gè)參數(shù)之后栗柒，可能就會(huì)根據(jù)id來進(jìn)行一些查詢礁扮，當(dāng)然，我這里只是模擬的查詢瞬沦，用了一個(gè)簡單的find來進(jìn)行一個(gè)查找太伊。查找到id為1的那項(xiàng)并且取title。

  4. 第二個(gè)參數(shù)cb逛钻，拿到的就是"jsonpCallback"了僚焦，這里也就是告訴后端，前端那里是會(huì)有一個(gè)叫做jsonpCallback的函數(shù)來接收后端想要返回的數(shù)據(jù)曙痘，而后端你只需要在返回體中寫入jsonpCallback()就可以了芳悲。

  5. 前端在得到了后端返回的內(nèi)容jsonpCallback({"title":"title1"})，發(fā)現(xiàn)里面是一段執(zhí)行函數(shù)的語句边坤，因此就會(huì)去執(zhí)行第一個(gè)script中的jsonpCallback方法了名扛，并且又是帶了參數(shù)的，所以此時(shí)瀏覽器控制臺(tái)會(huì)打印出{ title: 'title1' }

以此來達(dá)到一個(gè)簡單的跨域的效果惩嘉。

其實(shí)你想想罢洲，如果我們把第二個(gè)script標(biāo)簽換成以下代碼，是不是也能達(dá)到同樣的效果呢文黎？

<!-- <script src='http://localhost:8080/api/jsonp?id=1&cb=jsonpCallback' type='text/javascript'></script> -->
<script type="text/javascript">
    jsonpCallback({ title: 'title1' })
</script>

jQuery中ajax實(shí)現(xiàn)

上面??我們介紹了用script標(biāo)簽來實(shí)現(xiàn)惹苗，在jQuery的$.ajax()方法其實(shí)也提供了jsonp。

讓我們一起來看看：

<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
<script>
    $.ajax({
        url: "http://localhost:8080/api/jsonp",
        dataType: "jsonp",
        type: "get",
        data: {
            id: 1
        },
        jsonp: "cb",
        success: function (data) {
            console.log(data);
        }
    });
</script>

在success回調(diào)中同樣可以拿到數(shù)據(jù)耸峭。

封裝一個(gè)JSONP方法

（此章會(huì)一步一步教你如何封裝一個(gè)比較完美的JSONP方法）

簡易版

先看下我們要實(shí)現(xiàn)的功能

定義一個(gè)JSONP方法桩蓉，它接收四個(gè)參數(shù)：

  • url
  • params
  • callbackKey：與后臺(tái)約定的回調(diào)函數(shù)是用哪個(gè)字段(如cb)
  • callback：拿到數(shù)據(jù)之后執(zhí)行的回調(diào)函數(shù)
<script>
    function JSONP({
        url,
        params = {},
        callbackKey = 'cb',
        callback
    }) {
        // 定義本地的一個(gè)callback的名稱
        const callbackName = 'jsonpCallback';
        // 把這個(gè)名稱加入到參數(shù)中: 'cb=jsonpCallback'
        params[callbackKey] = callbackName;
        //  把這個(gè)callback加入到window對(duì)象中，這樣就能執(zhí)行這個(gè)回調(diào)了
        window[callbackName] = callback;

        // 得到'id=1&cb=jsonpCallback'
        const paramString = Object.keys(params).map(key => {
            return `${key}=${params[key]}`
        }).join('&')
        // 創(chuàng)建 script 標(biāo)簽
        const script = document.createElement('script');
        script.setAttribute('src', `${url}?${paramString}`);
        document.body.appendChild(script);
    }
    JSONP({
        url: 'http://localhost:8080/api/jsonp',
        params: { id: 1 },
        callbackKey: 'cb',
        callback (res) {
            console.log(res)
        }
    })
</script>

這樣寫打開頁面也可是可以看到效果的劳闹。

同時(shí)多個(gè)請(qǐng)求

上面我們雖然實(shí)現(xiàn)了JSONP院究，但有一個(gè)問題，那就是如果我同時(shí)多次調(diào)用JSONP：

JSONP({
    url: 'http://localhost:8080/api/jsonp',
    params: { id: 1 },
    callbackKey: 'cb',
    callback (res) {
        console.log(res) // No.1
    }
})
JSONP({
    url: 'http://localhost:8080/api/jsonp',
    params: { id: 2 },
    callbackKey: 'cb',
    callback (res) {
        console.log(res) // No.2
    }
})

可以看到這里我調(diào)用了兩次JSONP本涕，只是傳遞的參數(shù)不同业汰。但是并不會(huì)按我們預(yù)期的在No.1和No.2中分別打印，而是都會(huì)在No.2中打印出結(jié)果菩颖。這是因?yàn)楹竺嬉粋€(gè)callback把JSONP里封裝的第一個(gè)callback給覆蓋了样漆，它們都是共用的同一個(gè)callbackName，也就是jsonpCallback晦闰。如下所示：

jsonp2.png

兩次結(jié)果都是從76行打印出來的放祟。

所以我們得改造一下上面的JSONP方法：

  • 讓callbackName是一個(gè)唯一的鳍怨，可以使用遞增
  • 不要把回調(diào)定義在window中這樣會(huì)污染全局變量，可以把它扔到JSON.xxx中

OK??跪妥，來看看改造之后的代碼：

<script>
    function JSONP({
        url,
        params = {},
        callbackKey = 'cb',
        callback
    }) {
        // 定義本地的唯一callbackId鞋喇，若是沒有的話則初始化為1
        JSONP.callbackId = JSONP.callbackId || 1;
        let callbackId = JSONP.callbackId;
        // 把要執(zhí)行的回調(diào)加入到JSON對(duì)象中，避免污染window
        JSONP.callbacks = JSONP.callbacks || [];
        JSONP.callbacks[callbackId] = callback;
        // 把這個(gè)名稱加入到參數(shù)中: 'cb=JSONP.callbacks[1]'
        params[callbackKey] = `JSONP.callbacks[${callbackId}]`;

        // 得到'id=1&cb=JSONP.callbacks[1]'
        const paramString = Object.keys(params).map(key => {
            return `${key}=${params[key]}`
        }).join('&')
        // 創(chuàng)建 script 標(biāo)簽
        const script = document.createElement('script');
        script.setAttribute('src', `${url}?${paramString}`);
        document.body.appendChild(script);
        // id自增眉撵，保證唯一
        JSONP.callbackId++;
    }
    JSONP({
        url: 'http://localhost:8080/api/jsonp',
        params: { id: 1 },
        callbackKey: 'cb',
        callback (res) {
            console.log(res)
        }
    })
    JSONP({
        url: 'http://localhost:8080/api/jsonp',
        params: { id: 2 },
        callbackKey: 'cb',
        callback (res) {
            console.log(res)
        }
    })
</script>

可以看到現(xiàn)在調(diào)用了兩次回調(diào)侦香，但是會(huì)分別執(zhí)行JSONP.callbacks[1]和JSONP.callbacks[2]：

jsonp3.png

最終版JSONP方法

其實(shí)上面已經(jīng)算比較完美了，但是還會(huì)有一個(gè)小問題执桌，比如下面這種情況：

我改一下后端的代碼

const Koa = require('koa');
const app = new Koa();
const items = [{ id: 1, title: 'title1' }, { id: 2, title: 'title2' }]

app.use(async (ctx, next) => {
  if (ctx.path === '/api/jsonp') {
    const { cb, id } = ctx.query;
    const title = items.find(item => item.id == id)['title']
    ctx.body = `${cb}(${JSON.stringify({title})})`;
    return;
  }
  if (ctx.path === '/api/jsonps') {
    const { cb, a, b } = ctx.query;
    ctx.body = `${cb}(${JSON.stringify({ a, b })})`;
    return;
  }
})
console.log('listen 8080...')
app.listen(8080);

增加了一個(gè)/api/jsonps的接口鄙皇。

然后前端代碼增加了一個(gè)這樣的請(qǐng)求：

JSONP({
    url: 'http://localhost:8080/api/jsonps',
    params: {
        a: '2&b=3',
        b: '4'
    },
    callbackKey: 'cb',
    callback (res) {
        console.log(res)
    }
})

可以看到，參數(shù)的a中也會(huì)有b這個(gè)字符串仰挣，這樣就導(dǎo)致我們獲取到的數(shù)據(jù)不對(duì)了：

jsonp1.png

后臺(tái)并不知道a的參數(shù)是一個(gè)字符串伴逸，它只會(huì)按照&來截取參數(shù)。

所以為了解決這個(gè)問題膘壶，可以使用URI編碼错蝴。

也就是使用：

encodeURIComponent('2&b=3')

// 結(jié)果為
"2%26b%3D3"

只需要改一下JSONP方法中參數(shù)的生成：

// 得到'id=1&cb=JSONP.callbacks[1]'
const paramString = Object.keys(params).map(key => {
    return `${key}=${encodeURIComponent(params[key])}`
}).join('&')

來看一下完整版的JSONP方法：

<script>
    function JSONP({
        url,
        params = {},
        callbackKey = 'cb',
        callback
    }) {
        // 定義本地的唯一callbackId，若是沒有的話則初始化為1
        JSONP.callbackId = JSONP.callbackId || 1;
        let callbackId = JSONP.callbackId;
        // 把要執(zhí)行的回調(diào)加入到JSON對(duì)象中颓芭，避免污染window
        JSONP.callbacks = JSONP.callbacks || [];
        JSONP.callbacks[callbackId] = callback;
        // 把這個(gè)名稱加入到參數(shù)中: 'cb=JSONP.callbacks[1]'
        params[callbackKey] = `JSONP.callbacks[${callbackId}]`;
        // 得到'id=1&cb=JSONP.callbacks[1]'
        const paramString = Object.keys(params).map(key => {
            return `${key}=${encodeURIComponent(params[key])}`
        }).join('&')
        // 創(chuàng)建 script 標(biāo)簽
        const script = document.createElement('script');
        script.setAttribute('src', `${url}?${paramString}`);
        document.body.appendChild(script);
        // id自增顷锰，保證唯一
        JSONP.callbackId++;

    }
    JSONP({
        url: 'http://localhost:8080/api/jsonps',
        params: {
            a: '2&b=3',
            b: '4'
        },
        callbackKey: 'cb',
        callback (res) {
            console.log(res)
        }
    })
    JSONP({
        url: 'http://localhost:8080/api/jsonp',
        params: {
            id: 1
        },
        callbackKey: 'cb',
        callback (res) {
            console.log(res)
        }
    })
</script>

注意??：

encodeURI和encodeURIComponent的區(qū)別：

  • encodeURI()不會(huì)對(duì)本身屬于URI的特殊字符進(jìn)行編碼，例如冒號(hào)亡问、正斜杠官紫、問號(hào)和井字號(hào)；
  • 而encodeURIComponent()則會(huì)對(duì)它發(fā)現(xiàn)的任何非標(biāo)準(zhǔn)字符進(jìn)行編碼

例如：

var url = 'https://lindaidai.wang'

encodeURI(url) // "https://lindaidai.wang"

encodeURIComponent(url) // "https%3A%2F%2Flindaidai.wang"

另外州藕，可以使用decodeURIComponent來解碼束世。

decodeURIComponent("https%3A%2F%2Flindaidai.wang")
// 'https://lindaidai.wang'

參考文章

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市床玻，隨后出現(xiàn)的幾起案子毁涉，更是在濱河造成了極大的恐慌，老刑警劉巖锈死，帶你破解...
    沈念sama閱讀 216,372評(píng)論 6贊 498
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件贫堰，死亡現(xiàn)場離奇詭異，居然都是意外死亡待牵，警方通過查閱死者的電腦和手機(jī)其屏，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評(píng)論 3贊 392
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來缨该，“玉大人偎行，你說我怎么就攤上這事。” “怎么了睦优？”我有些...
    開封第一講書人閱讀 162,415評(píng)論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長壮不。 經(jīng)常有香客問我汗盘，道長，這世上最難降的妖魔是什么询一？ 我笑而不...
    開封第一講書人閱讀 58,157評(píng)論 1贊 292
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任隐孽，我火速辦了婚禮，結(jié)果婚禮上健蕊，老公的妹妹穿的比我還像新娘菱阵。我一直安慰自己，他們只是感情好缩功，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,171評(píng)論 6贊 388
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布晴及。 她就那樣靜靜地躺著，像睡著了一般嫡锌。 火紅的嫁衣襯著肌膚如雪虑稼。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 51,125評(píng)論 1贊 297
  • 城市分裂傳說
    那天势木，我揣著相機(jī)與錄音蛛倦，去河邊找鬼。 笑死啦桌，一個(gè)胖子當(dāng)著我的面吹牛溯壶，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播甫男，決...
    沈念sama閱讀 40,028評(píng)論 3贊 417
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼且改，長吁一口氣：“原來是場噩夢(mèng)啊……” “哼！你這毒婦竟也來了查剖？” 一聲冷哼從身側(cè)響起钾虐，我...
    開封第一講書人閱讀 38,887評(píng)論 0贊 274
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎笋庄，沒想到半個(gè)月后效扫，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 45,310評(píng)論 1贊 310
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡直砂，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,533評(píng)論 2贊 332
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年菌仁，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片静暂。...
    茶點(diǎn)故事閱讀 39,690評(píng)論 1贊 348
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡济丘，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情摹迷，我是刑警寧澤疟赊，帶...
    沈念sama閱讀 35,411評(píng)論 5贊 343
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站峡碉，受9級(jí)特大地震影響近哟，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜鲫寄，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,004評(píng)論 3贊 325
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一吉执、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧地来，春花似錦戳玫、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評(píng)論 0贊 22
  • 一樁弒父案咕宿，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至蜡秽，卻和暖如春荠列，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背载城。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評(píng)論 1贊 268
  • 情欲美人皮
    我被黑心中介騙來泰國打工肌似， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人诉瓦。 一個(gè)月前我還...
    沈念sama閱讀 47,693評(píng)論 2贊 368
  • 代替公主和親
    正文 我出身青樓川队，卻偏偏與公主長得像，于是被迫代替她去往敵國和親睬澡。 傳聞我的和親對(duì)象是個(gè)殘疾皇子固额，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,577評(píng)論 2贊 353