摘要：不管你好不好，反正我是番茄醬。例如我們要請(qǐng)求的地址是獲取用戶信息后臺(tái)應(yīng)該返回給我們的數(shù)據(jù)是番茄醬也就是說(shuō)我們最終需要的是服務(wù)器把格式的數(shù)據(jù)給我們。于是后臺(tái)返回給我們番茄醬于是代碼就相當(dāng)于是番茄醬最終結(jié)果與相同。

不管你好不好，反正我是番茄醬。為啥要寫(xiě)這篇文章呢，因?yàn)槲蚁雽?xiě)。

看這個(gè)文章的你肯定是想學(xué)會(huì)jsonp吧（廢話），那遇到這個(gè)文章是你的福氣。我敢保證這是全網(wǎng)最容易看懂的文章。當(dāng)然，你如果不會(huì)寫(xiě)js，不懂什么叫跨域，那就算了。別勉強(qiáng)了，勉強(qiáng)是沒(méi)有幸福的（而且你也沒(méi)有學(xué)習(xí)jsonp實(shí)現(xiàn)方法的必要）。

首先聲明，這篇文章不涉及后臺(tái)代碼的具體實(shí)現(xiàn)，關(guān)于后臺(tái)的部分只說(shuō)思路。

好啦，那我們開(kāi)課啦！

我這篇教程的結(jié)構(gòu)是總-分-總（瞎扯的，實(shí)際上是總-隨意-隨意-...-隨意）。我們先來(lái)說(shuō)說(shuō)總的實(shí)現(xiàn)思路。

我們都知道由于“同源策略”（不懂啥是同源策略沒(méi)關(guān)系，反正你知道有跨域現(xiàn)象就行了），而導(dǎo)致我們跨域的ajax請(qǐng)求發(fā)送失敗，瀏覽器報(bào)錯(cuò)。

但是呢script標(biāo)簽的src是沒(méi)有跨域一說(shuō)的，也就是說(shuō)你可以隨便引用別的網(wǎng)站的js。這就是總的實(shí)現(xiàn)思路。如果不理解這一點(diǎn)，也不用往下看了，因?yàn)槟阋阅愕闹R(shí)儲(chǔ)備和理解能力不合適看這文章。

說(shuō)完總的實(shí)現(xiàn)思路，我們來(lái)看具體怎么做吧。

先忘了我們的目標(biāo)，看一下我們需要完成jsonp而需要掌握的知識(shí)。先理解了這些，才能理解jsonp的實(shí)現(xiàn)。

我們?cè)陧?yè)面寫(xiě)個(gè)這樣的代碼：

運(yùn)行結(jié)果：

對(duì)于代碼和結(jié)果沒(méi)有異議吧。為啥我要寫(xiě)這樣的函數(shù)。我要說(shuō)明的是這樣一點(diǎn)：后一個(gè)script標(biāo)簽里的代碼可以引用前一個(gè)script代碼里的函數(shù)(全局)。老規(guī)矩，理解了這點(diǎn)就繼續(xù)往下看。

我們?cè)趆tml里寫(xiě)這樣的代碼:

然后我們?cè)谕窂较滦陆ㄒ粋€(gè)a.txt。并且a.txt里的文本如下：

a();

然后我們?cè)趆tml里引用a.txt。完整的代碼如下：

刷新頁(yè)面，控制臺(tái)如下：

也就是說(shuō)txt里的代碼被執(zhí)行了。所以a函數(shù)才會(huì)被執(zhí)行。我要說(shuō)明的是：scritpt標(biāo)簽引用的外部文件中的文本內(nèi)容會(huì)被當(dāng)成js來(lái)解析。

也就是說(shuō)相當(dāng)于是這樣的代碼：

如果我們的后臺(tái)給我們返回的不是數(shù)據(jù)，而是跟a.txt一樣的文本如下文本：

a();

如我們請(qǐng)求地址為：https://www.a.com/a。則我們此時(shí)的完整代碼為：

那可以預(yù)見(jiàn)，最終的結(jié)果會(huì)與1.2一致。因?yàn)橐驳扔谑侨缦碌拇a：

以上的東西只是需要完成jsonp要懂的知識(shí)。你理解了可以繼續(xù)往下看。先不要深究“這樣怎么能實(shí)現(xiàn)”的問(wèn)題。不要急，我后面會(huì)說(shuō)的。如果不理解上面的知識(shí)可以多看幾遍。能夠自己動(dòng)手實(shí)驗(yàn)最好。

我們一般的ajax請(qǐng)求，是后臺(tái)給我們一個(gè)請(qǐng)求地址，我們發(fā)送請(qǐng)求，然后后臺(tái)返回給我們json格式的信息。例如我們要請(qǐng)求的地址是：

https://www.a.com/userInfo (獲取用戶信息)

后臺(tái)應(yīng)該返回給我們的數(shù)據(jù)是:

{
  "name": "番茄醬",
  "wechat": "fan_qie_jiang666",
  "qq": "1164431166",
  "email": "[email protected]"
}

也就是說(shuō)我們最終需要的是服務(wù)器把json格式的數(shù)據(jù)給我們。但是我們用1里說(shuō)的方法，雖然服務(wù)器能調(diào)用我們本地的函數(shù)，但是我們?cè)趺茨塬@取到數(shù)據(jù)呢？

那這樣，我們把1.3的html代碼改成這樣：

服務(wù)器返回的文本改成這樣：

a({
    "name": "番茄醬",
    "wechat": "fan_qie_jiang666",
    "qq": "1164431166",
    "email": "[email protected]"
});

也就是相當(dāng)于這樣的代碼：

最終結(jié)果：

也就是說(shuō)我們獲取到了我們需要的數(shù)據(jù)。但是萬(wàn)一我們的function不叫a，或者原本叫a，但是因?yàn)榉N種原因需要改名，這樣后臺(tái)也要跟著改代碼。這增加了溝通成本，也增加了后臺(tái)的工作量。并且可能每個(gè)接口你們都需要去溝通這個(gè)函數(shù)的名字。這是問(wèn)題呀！

用script標(biāo)簽里的src相當(dāng)于向服務(wù)器發(fā)送了get請(qǐng)求。

不管你理不理解上面這點(diǎn)，記住就行了。既然是相當(dāng)于get請(qǐng)求，那就可以帶參。并且后臺(tái)也能獲得這個(gè)參數(shù)的值。

既然這樣那我們是不是跟后臺(tái)溝通好我們給所有用jsonp的請(qǐng)求弄個(gè)參數(shù)，這個(gè)參數(shù)的值是我們本地的函數(shù)名。后臺(tái)直接給我們返回函數(shù)名然后參數(shù)為數(shù)據(jù)值就ok辣？不理解的話看下面的過(guò)程。

比如我們和后臺(tái)溝通好參數(shù)名叫balabala，那代碼就像下面這樣：

后臺(tái)收到了這個(gè)請(qǐng)求，不再像之前那樣直接返回給我們a(...)。

因?yàn)槲覀円呀?jīng)說(shuō)好了，函數(shù)名不再是固定的a，而是balabala這個(gè)參數(shù)的值才是我們的函數(shù)名。

于是后臺(tái)去獲取balabala這個(gè)參數(shù)的值，獲取到的是xiaoMoXian。于是后臺(tái)返回給我們：

xiaoMoXian({
    "name": "番茄醬",
    "wechat": "fan_qie_jiang666",
    "qq": "1164431166",
    "email": "[email protected]"
});

于是代碼就相當(dāng)于是：

最終結(jié)果與2相同。

以上就是jsonp的實(shí)現(xiàn)過(guò)程。我們已經(jīng)完成了不用ajax來(lái)請(qǐng)求，而利用script標(biāo)簽src屬性的跨域特性，來(lái)實(shí)現(xiàn)我們獲取數(shù)據(jù)的目的。

我來(lái)小結(jié)下我們用到的知識(shí)點(diǎn)：

ajax請(qǐng)求受同源策略的影響不能跨域。（問(wèn)題）

script標(biāo)簽的src是可以跨域的，不受同源策略的影響。（總的方法）

后一個(gè)script標(biāo)簽里的代碼可以引用前一個(gè)script代碼里的函數(shù)。

scritpt標(biāo)簽引用的外部文件中的文本內(nèi)容會(huì)被當(dāng)成js來(lái)解析。（結(jié)合3可以獲取數(shù)據(jù)）

用script標(biāo)簽里的src相當(dāng)于向服務(wù)器發(fā)送了get請(qǐng)求。（解決函數(shù)名的問(wèn)題）

看到這并且看懂就說(shuō)明你已經(jīng)差不多可以畢業(yè)了。因?yàn)槟阋呀?jīng)完全懂了jsonp怎么實(shí)現(xiàn)的。可是我們一般用jsonp好像沒(méi)這么麻煩呀，也不用專(zhuān)門(mén)去寫(xiě)個(gè)函數(shù)來(lái)給后臺(tái)調(diào)用，也不用去寫(xiě)script標(biāo)簽寫(xiě)src到我們的請(qǐng)求地址，也不用溝通什么參數(shù)名。哪像你說(shuō)的這么麻煩！？

哈哈，我要加班啦。預(yù)知后事如何，請(qǐng)多點(diǎn)贊。贊夠多我就更。

或者加我微信給我發(fā)1塊錢(qián)紅包，眾籌到10元我就更（誰(shuí)還沒(méi)個(gè)身價(jià)了￣へ￣）。