不管你好不好，反正我是番茄醬。為啥要寫這篇文章呢，因?yàn)槲蚁雽憽?/p>
看這個(gè)文章的你肯定是想學(xué)會(huì)jsonp吧（廢話），那遇到這個(gè)文章是你的福氣。我敢保證這是全網(wǎng)最容易看懂的文章。當(dāng)然，你如果不會(huì)寫js，不懂什么叫跨域，那就算了。別勉強(qiáng)了，勉強(qiáng)是沒有幸福的（而且你也沒有學(xué)習(xí)jsonp實(shí)現(xiàn)方法的必要）。
首先聲明，這篇文章不涉及后臺(tái)代碼的具體實(shí)現(xiàn)，關(guān)于后臺(tái)的部分只說思路。
好啦，那我們開課啦！
總的實(shí)現(xiàn)思路
我這篇教程的結(jié)構(gòu)是總-分-總（瞎扯的，實(shí)際上是總-隨意-隨意-...-隨意）。我們先來說說總的實(shí)現(xiàn)思路。
我們都知道由于“同源策略”（不懂啥是同源策略沒關(guān)系，反正你知道有跨域現(xiàn)象就行了），而導(dǎo)致我們跨域的ajax請(qǐng)求發(fā)送失敗，瀏覽器報(bào)錯(cuò)。
但是呢script標(biāo)簽的src是沒有跨域一說的，也就是說你可以隨便引用別的網(wǎng)站的js。這就是總的實(shí)現(xiàn)思路。如果不理解這一點(diǎn)，也不用往下看了，因?yàn)槟阋阅愕闹R(shí)儲(chǔ)備和理解能力不合適看這文章。
說完總的實(shí)現(xiàn)思路，我們來看具體怎么做吧。
1：先忘記我們要實(shí)現(xiàn)jsonp
先忘了我們的目標(biāo)，看一下我們需要完成jsonp而需要掌握的知識(shí)。先理解了這些，才能理解jsonp的實(shí)現(xiàn)。
1.1：基礎(chǔ)的js代碼
我們?cè)陧撁鎸憘€(gè)這樣的代碼：
<script>
function a() {
console.log('hello cat!');
}
</script>
<script>
a();
</script>
運(yùn)行結(jié)果：
對(duì)于代碼和結(jié)果沒有異議吧。為啥我要寫這樣的函數(shù)。我要說明的是這樣一點(diǎn)：后一個(gè)script標(biāo)簽里的代碼可以引用前一個(gè)script代碼里的函數(shù)(全局)。老規(guī)矩，理解了這點(diǎn)就繼續(xù)往下看。
1.2：script標(biāo)簽引用文本
我們?cè)趆tml里寫這樣的代碼:
<script>
function a() {
console.log('hello cat2!');
}
</script>
然后我們?cè)谕窂较滦陆ㄒ粋€(gè)a.txt。并且a.txt里的文本如下：
a();
然后我們?cè)趆tml里引用a.txt。完整的代碼如下：
<script>
function a() {
console.log('hello cat2!');
}
</script>
<script src="a.txt"></script>
刷新頁面，控制臺(tái)如下：
也就是說txt里的代碼被執(zhí)行了。所以a函數(shù)才會(huì)被執(zhí)行。我要說明的是：scritpt標(biāo)簽引用的外部文件中的文本內(nèi)容會(huì)被當(dāng)成js來解析。
也就是說相當(dāng)于是這樣的代碼：
<script>
function a() {
console.log('hello cat2!');
}
</script>
<script>
a();
</script>
1.3：后臺(tái)返回文本
如果我們的后臺(tái)給我們返回的不是數(shù)據(jù)，而是跟a.txt一樣的文本如下文本：
a();
如我們請(qǐng)求地址為：https://www.a.com/a。則我們此時(shí)的完整代碼為：
<script>
function a() {
console.log('hello cat2!');
}
</script>
<script src="https://www.a.com/a"></script>
那可以預(yù)見，最終的結(jié)果會(huì)與1.2一致。因?yàn)橐驳扔谑侨缦碌拇a：
<script>
function a() {
console.log('hello cat2!');
}
</script>
<script>
a();
</script>
小結(jié)
以上的東西只是需要完成jsonp要懂的知識(shí)。你理解了可以繼續(xù)往下看。先不要深究“這樣怎么能實(shí)現(xiàn)”的問題。不要急，我后面會(huì)說的。如果不理解上面的知識(shí)可以多看幾遍。能夠自己動(dòng)手實(shí)驗(yàn)最好。
2：再看看一般的ajax請(qǐng)求
我們一般的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": "1164431166@qq.com"
}
也就是說我們最終需要的是服務(wù)器把json格式的數(shù)據(jù)給我們。但是我們用1里說的方法，雖然服務(wù)器能調(diào)用我們本地的函數(shù)，但是我們?cè)趺茨塬@取到數(shù)據(jù)呢？
那這樣，我們把1.3的html代碼改成這樣：
<script>
function a(res) {
console.log(res);
}
</script>
<script src="https://www.a.com/userInfo"></script>
服務(wù)器返回的文本改成這樣：
a({
"name": "番茄醬",
"wechat": "fan_qie_jiang666",
"qq": "1164431166",
"email": "1164431166@qq.com"
});
也就是相當(dāng)于這樣的代碼：
<script>
function a(res) {
console.log(res);
}
</script>
<script>
a({
"name": "番茄醬",
"wechat": "fan_qie_jiang666",
"qq": "1164431166",
"email": "1164431166@qq.com"
});
</script>
最終結(jié)果：
也就是說我們獲取到了我們需要的數(shù)據(jù)。但是萬一我們的function不叫a，或者原本叫a，但是因?yàn)榉N種原因需要改名，這樣后臺(tái)也要跟著改代碼。這增加了溝通成本，也增加了后臺(tái)的工作量。并且可能每個(gè)接口你們都需要去溝通這個(gè)函數(shù)的名字。這是問題呀！
3.解決函數(shù)名的問題
用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辣？不理解的話看下面的過程。
比如我們和后臺(tái)溝通好參數(shù)名叫balabala，那代碼就像下面這樣：
<script>
function xiaoMoXian(res) {
console.log(res);
}
</script>
<script src="https://www.a.com/userInfo?balabala=xiaoMoXian"></script>
后臺(tái)收到了這個(gè)請(qǐng)求，不再像之前那樣直接返回給我們a(...)。
因?yàn)槲覀円呀?jīng)說好了，函數(shù)名不再是固定的a，而是balabala這個(gè)參數(shù)的值才是我們的函數(shù)名。
于是后臺(tái)去獲取balabala這個(gè)參數(shù)的值，獲取到的是xiaoMoXian。于是后臺(tái)返回給我們：
xiaoMoXian({
"name": "番茄醬",
"wechat": "fan_qie_jiang666",
"qq": "1164431166",
"email": "1164431166@qq.com"
});
于是代碼就相當(dāng)于是：
<script>
function xiaoMoXian(res) {
console.log(res);
}
</script>
<script>
xiaoMoXian({
"name": "番茄醬",
"wechat": "fan_qie_jiang666",
"qq": "1164431166",
"email": "1164431166@qq.com"
});
</script>
最終結(jié)果與2相同。
小結(jié)
以上就是jsonp的實(shí)現(xiàn)過程。我們已經(jīng)完成了不用ajax來請(qǐng)求，而利用script標(biāo)簽src屬性的跨域特性，來實(shí)現(xiàn)我們獲取數(shù)據(jù)的目的。
我來小結(jié)下我們用到的知識(shí)點(diǎn)：
- ajax請(qǐng)求受同源策略的影響不能跨域。（問題）
- script標(biāo)簽的src是可以跨域的，不受同源策略的影響。（總的方法）
- 后一個(gè)script標(biāo)簽里的代碼可以引用前一個(gè)script代碼里的函數(shù)。
- scritpt標(biāo)簽引用的外部文件中的文本內(nèi)容會(huì)被當(dāng)成js來解析。（結(jié)合3可以獲取數(shù)據(jù)）
- 用script標(biāo)簽里的src相當(dāng)于向服務(wù)器發(fā)送了get請(qǐng)求。（解決函數(shù)名的問題）
看到這并且看懂就說明你已經(jīng)差不多可以畢業(yè)了。因?yàn)槟阋呀?jīng)完全懂了jsonp怎么實(shí)現(xiàn)的?？墒俏覀円话阌胘sonp好像沒這么麻煩呀，也不用專門去寫個(gè)函數(shù)來給后臺(tái)調(diào)用，也不用去寫script標(biāo)簽寫src到我們的請(qǐng)求地址，也不用溝通什么參數(shù)名。哪像你說的這么麻煩??？
哈哈，我要加班啦。預(yù)知后事如何，請(qǐng)多點(diǎn)贊。贊夠多我就更。
據(jù)量子力學(xué)得到，點(diǎn)贊這篇文章的人都會(huì)成為歐皇，從此過著開心幸福的生活??。
