資訊專欄INFORMATION COLUMN
摘要：不管你好不好，反正我是番茄醬。例如我們要請求的地址是獲取用戶信息后臺應該返回給我們的數(shù)據(jù)是番茄醬也就是說我們最終需要的是服務器把格式的數(shù)據(jù)給我們。于是后臺返回給我們番茄醬于是代碼就相當于是番茄醬最終結(jié)果與相同。
不管你好不好，反正我是番茄醬。為啥要寫這篇文章呢，因為我想寫。
看這個文章的你肯定是想學會jsonp吧（廢話），那遇到這個文章是你的福氣。我敢保證這是全網(wǎng)最容易看懂的文章。當然，你如果不會寫js，不懂什么叫跨域，那就算了。別勉強了，勉強是沒有幸福的（而且你也沒有學習jsonp實現(xiàn)方法的必要）。
首先聲明，這篇文章不涉及后臺代碼的具體實現(xiàn)，關(guān)于后臺的部分只說思路。
好啦，那我們開課啦！
總的實現(xiàn)思路我這篇教程的結(jié)構(gòu)是總-分-總（瞎扯的，實際上是總-隨意-隨意-...-隨意）。我們先來說說總的實現(xiàn)思路。
我們都知道由于“同源策略”（不懂啥是同源策略沒關(guān)系，反正你知道有跨域現(xiàn)象就行了），而導致我們跨域的ajax請求發(fā)送失敗，瀏覽器報錯。
但是呢script標簽的src是沒有跨域一說的，也就是說你可以隨便引用別的網(wǎng)站的js。這就是總的實現(xiàn)思路。如果不理解這一點，也不用往下看了，因為你以你的知識儲備和理解能力不合適看這文章。
說完總的實現(xiàn)思路，我們來看具體怎么做吧。
1：先忘記我們要實現(xiàn)jsonp先忘了我們的目標，看一下我們需要完成jsonp而需要掌握的知識。先理解了這些，才能理解jsonp的實現(xiàn)。
1.1：基礎的js代碼我們在頁面寫個這樣的代碼：
運行結(jié)果：
對于代碼和結(jié)果沒有異議吧。為啥我要寫這樣的函數(shù)。我要說明的是這樣一點：后一個script標簽里的代碼可以引用前一個script代碼里的函數(shù)(全局)。老規(guī)矩，理解了這點就繼續(xù)往下看。
1.2：script標簽引用文本我們在html里寫這樣的代碼:
然后我們在同路徑下新建一個a.txt。并且a.txt里的文本如下：
a();
然后我們在html里引用a.txt。完整的代碼如下：
刷新頁面，控制臺如下：
也就是說txt里的代碼被執(zhí)行了。所以a函數(shù)才會被執(zhí)行。我要說明的是：scritpt標簽引用的外部文件中的文本內(nèi)容會被當成js來解析。
也就是說相當于是這樣的代碼：
1.3：后臺返回文本
如果我們的后臺給我們返回的不是數(shù)據(jù)，而是跟a.txt一樣的文本如下文本：
a();
如我們請求地址為：https://www.a.com/a。則我們此時的完整代碼為：
那可以預見，最終的結(jié)果會與1.2一致。因為也等于是如下的代碼：
小結(jié)
以上的東西只是需要完成jsonp要懂的知識。你理解了可以繼續(xù)往下看。先不要深究“這樣怎么能實現(xiàn)”的問題。不要急，我后面會說的。如果不理解上面的知識可以多看幾遍。能夠自己動手實驗最好。
2：再看看一般的ajax請求我們一般的ajax請求，是后臺給我們一個請求地址，我們發(fā)送請求，然后后臺返回給我們json格式的信息。例如我們要請求的地址是：
https://www.a.com/userInfo (獲取用戶信息)
后臺應該返回給我們的數(shù)據(jù)是:
{
"name": "番茄醬",
"wechat": "fan_qie_jiang666",
"qq": "1164431166",
"email": "1164431166@qq.com"
}
也就是說我們最終需要的是服務器把json格式的數(shù)據(jù)給我們。但是我們用1里說的方法，雖然服務器能調(diào)用我們本地的函數(shù)，但是我們怎么能獲取到數(shù)據(jù)呢？
那這樣，我們把1.3的html代碼改成這樣：
服務器返回的文本改成這樣：
a({
"name": "番茄醬",
"wechat": "fan_qie_jiang666",
"qq": "1164431166",
"email": "1164431166@qq.com"
});
也就是相當于這樣的代碼：
最終結(jié)果：
也就是說我們獲取到了我們需要的數(shù)據(jù)。但是萬一我們的function不叫a，或者原本叫a，但是因為種種原因需要改名，這樣后臺也要跟著改代碼。這增加了溝通成本，也增加了后臺的工作量。并且可能每個接口你們都需要去溝通這個函數(shù)的名字。這是問題呀！
3.解決函數(shù)名的問題用script標簽里的src相當于向服務器發(fā)送了get請求。
不管你理不理解上面這點，記住就行了。既然是相當于get請求，那就可以帶參。并且后臺也能獲得這個參數(shù)的值。
既然這樣那我們是不是跟后臺溝通好我們給所有用jsonp的請求弄個參數(shù)，這個參數(shù)的值是我們本地的函數(shù)名。后臺直接給我們返回函數(shù)名然后參數(shù)為數(shù)據(jù)值就ok辣？不理解的話看下面的過程。
比如我們和后臺溝通好參數(shù)名叫balabala，那代碼就像下面這樣：
后臺收到了這個請求，不再像之前那樣直接返回給我們a(...)。
因為我們已經(jīng)說好了，函數(shù)名不再是固定的a，而是balabala這個參數(shù)的值才是我們的函數(shù)名。
于是后臺去獲取balabala這個參數(shù)的值，獲取到的是xiaoMoXian。于是后臺返回給我們：
xiaoMoXian({
"name": "番茄醬",
"wechat": "fan_qie_jiang666",
"qq": "1164431166",
"email": "1164431166@qq.com"
});
于是代碼就相當于是：
最終結(jié)果與2相同。
小結(jié)以上就是jsonp的實現(xiàn)過程。我們已經(jīng)完成了不用ajax來請求，而利用script標簽src屬性的跨域特性，來實現(xiàn)我們獲取數(shù)據(jù)的目的。
我來小結(jié)下我們用到的知識點：
ajax請求受同源策略的影響不能跨域。（問題）
script標簽的src是可以跨域的，不受同源策略的影響。（總的方法）
后一個script標簽里的代碼可以引用前一個script代碼里的函數(shù)。
scritpt標簽引用的外部文件中的文本內(nèi)容會被當成js來解析。（結(jié)合3可以獲取數(shù)據(jù)）
用script標簽里的src相當于向服務器發(fā)送了get請求。（解決函數(shù)名的問題）
看到這并且看懂就說明你已經(jīng)差不多可以畢業(yè)了。因為你已經(jīng)完全懂了jsonp怎么實現(xiàn)的。可是我們一般用jsonp好像沒這么麻煩呀，也不用專門去寫個函數(shù)來給后臺調(diào)用，也不用去寫script標簽寫src到我們的請求地址，也不用溝通什么參數(shù)名。哪像你說的這么麻煩！？
哈哈，我要加班啦。預知后事如何，請多點贊。贊夠多我就更。
或者加我微信給我發(fā)1塊錢紅包，眾籌到10元我就更（誰還沒個身價了￣へ￣）。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/109111.html
摘要：上周末看這篇文章時，偶有靈光，所以，分享出來給大家一起看看前端面試四月二十家前端面試題分享請各位讀者添加一下作者的微信公眾號，以后有新的文章，將在微信公眾號直接推送給各位，非常感謝。 前端切圖神器 avocode 有了這個神器，切圖再也腰不酸，腿不疼了。 這一次，徹底弄懂 JavaScript 執(zhí)行機制 本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機制，如果讀完本文還不懂，...
摘要：作者兩年經(jīng)驗第一家任職的是個小公司第二家算是二線互聯(lián)網(wǎng)公司各待了一年吧能有機會去阿里面試很驚喜先來和大家分享一下面試經(jīng)歷電話面試初探因為還在職的緣故電話面試從晚上點鐘開始持續(xù)了半個小時左右一開始的時候特比緊張甚至聲音略有些顫抖簡單自我介紹做 作者兩年經(jīng)驗, 第一家任職的是個小公司, 第二家算是二線互聯(lián)網(wǎng)公司, 各待了一年吧... 能有機會去阿里面試很驚喜! 先來和大家分享一下面試經(jīng)歷....
摘要：希望幫助更多的前端愛好者學習。前端開發(fā)者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實踐譯者張捷滬江前端開發(fā)工程師當你問起有關(guān)與時，老司機們首先就會告訴你其實是個沒有網(wǎng)絡請求功能的庫。 前端基礎面試題(JS部分) 前端基礎面試題(JS部分) 學習 React.js 比你想象的要簡單 原文地址：Learning React.js is easier than you think 原文作...
閱讀 1629·2021-10-25 09:44
閱讀 3011·2021-09-04 16:48
閱讀 1699·2019-08-30 15:44
閱讀 2573·2019-08-30 15:44
閱讀 1789·2019-08-30 15:44
閱讀 2894·2019-08-30 14:14
閱讀 3025·2019-08-30 13:00
閱讀 2224·2019-08-30 11:09
