2018-8-29 seo達(dá)人
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
一、什么是跨域訪問
舉個栗子:在A網(wǎng)站中,我們希望使用Ajax來獲得B網(wǎng)站中的特定內(nèi)容。如果A網(wǎng)站與B網(wǎng)站不在同一個域中,那么就出現(xiàn)了跨域訪問問題。你可以理解為兩個域名之間不能跨過域名來發(fā)送請求或者請求數(shù)據(jù),否則就是不安全的。跨域訪問違反了同源策略,同源策略的詳細(xì)信息可以點擊如下鏈接:Same-origin_policy;
總而言之,同源策略規(guī)定,瀏覽器的ajax只能訪問跟它的HTML頁面同源(相同域名或IP)的資源。
JSONP(JSON with Padding)是JSON的一種“使用模式”,可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題。
由于同源策略,一般來說位于 server1.example.com 的網(wǎng)頁無法與不是 server1.example.com的服務(wù)器溝通,而 HTML 的<script>
元素是一個例外。利用<script>
元素的這個開放策略,網(wǎng)頁可以得到從其他來源動態(tài)產(chǎn)生的 JSON 資料,而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料并不是 JSON,而是任意的JavaScript,用 JavaScript 直譯器執(zhí)行而不是用 JSON 解析器解析。更具體的原理需要更多篇幅的講解,小伙伴可以自行去百度。
JQuery Ajax對JSONP進(jìn)行了很好的封裝,我們使用起來很方便。前端示例:
需要注意的地方是:
后端要配合使用jsonp,那么首先得了解Jquery Ajax jsonp的一個特點:
Jquery在發(fā)送一個Ajax jsonp請求時,會在訪問鏈接的后面自動加上一個驗證參數(shù),這個參數(shù)是Jquery隨機生成的,例如鏈接
http://www.deardull.com:9090/getMySeat?callback=jQuery31106628680598769732_1512186387045&_=1512186387046
中,參數(shù)callback=jQuery31106628680598769732_1512186387045&_=1512186387046
就是jquery自動添加的。
添加這個參數(shù)的目的是唯一標(biāo)識這次請求。當(dāng)服務(wù)器端接收到該請求時,需要將該參數(shù)的值與實際要返回的json值進(jìn)行構(gòu)造(如何構(gòu)造下面講解),并且返回,而前端會驗證這個參數(shù),如果是它之前發(fā)出的參數(shù),那么就會接收并解析數(shù)據(jù),如果不是這個參數(shù),那么就拒絕接受。
需要特別注意的是這個驗證參數(shù)的名字(我在這個坑上浪費了2小時),這個名字來源于前端的jsonp參數(shù)的值。如果把前端jsonp參數(shù)的值改為“aaa”,那么相應(yīng)的參數(shù)就應(yīng)該是
aaa=jQuery31106628680598769732_1512186387045&_=1512186387046
知道了Jquery Ajax Jsonp的原理,也知道了需要接受的參數(shù),我們就可以來編寫服務(wù)器端程序了。
為了配合json,服務(wù)器端需要做的事情可以概括為兩步:
根據(jù)與前端Ajax約定的jsonp參數(shù)名來接收驗證參數(shù),示例如下(使用SpringMVC,其他語言及框架原理類似)
將接收的的驗證參數(shù)callback與實際要返回的json數(shù)據(jù)按“callback(json)”的方式構(gòu)造:
最終,前后端的相應(yīng)代碼應(yīng)該是這樣的:
前端
后端
需要注意的是:
完整的示例就是上面兩段代碼,這里就不提供Github連接了。上面的示例親測有效,如果有遇到問題的,歡迎留言提問。
藍(lán)藍(lán)設(shè)計( 91whvog3.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。藍(lán)藍(lán)設(shè)計的小編 http://91whvog3.cn