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