8.跨域請求-創(chuàng)新互聯(lián)

主要從事網(wǎng)頁設(shè)計(jì)、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、響應(yīng)式網(wǎng)站建設(shè)、程序開發(fā)、微網(wǎng)站、重慶小程序開發(fā)等，憑借多年來在互聯(lián)網(wǎng)的打拼，我們在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了豐富的做網(wǎng)站、成都做網(wǎng)站、網(wǎng)絡(luò)營銷經(jīng)驗(yàn)，集策劃、開發(fā)、設(shè)計(jì)、營銷、管理等多方位專業(yè)化運(yùn)作于一體，具備承接不同規(guī)模與類型的建設(shè)項(xiàng)目的能力。

1??一些概念

1.1??同源

1.2??同源策略

1.3??跨域

2??JSONP

2.1??原理

2.2??jQuery中的JSONP

2.2.1??默認(rèn)情況

2.2.2??自定義鍵與函數(shù)名稱

2.2.3??淘寶搜索建議請求

1??一些概念 1.1??同源

兩個(gè)頁面的協(xié)議，域名與端口都相同，則兩個(gè)頁面具有相同的源。

如果域名后面沒有端口號，那么代表使用的是默認(rèn)端口號80

在視頻中舉了幾個(gè)例子來分析url是否同源

1.2??同源策略

同源策略是瀏覽器提供的安全功能，用于隔離潛在的惡意文件，也就是說無法用A源頭的文件對B源頭的文件造成影響，比如

無法讀取非同源網(wǎng)頁的Cookie,LocalStorage和IndexedDB
無法接觸非同源網(wǎng)頁的DOM
無法想非同源地址發(fā)送Ajax請求

script標(biāo)簽不受瀏覽器同源策略的影響

1.3??跨域

同源值兩個(gè)URL的協(xié)議，域名，端口一致，如果這三個(gè)有一個(gè)不同的就是跨域。由于同源策略的存在，瀏覽器會對跨域請求進(jìn)行攔截

實(shí)現(xiàn)跨域請求主要有兩種解決方案，分別是JSONP與CORS

JSONP的兼容性比CORS好(兼容低版本IE)，但是只支持GET請求，不支持POST請求

CORS屬于W3C標(biāo)準(zhǔn)中解決跨域Ajax的請求方案，支持GET與POST請求

2??JSONP

JSONP一定要后端配合才可以完成

2.1??原理

JSONP(JSON with Padding)是JSON的一種使用模式。由于script標(biāo)簽不受瀏覽器同源策略的影響，我們可以通過src屬性請求非同源的JS腳本。JSONP的實(shí)現(xiàn)原理就是通過script的src屬性請求跨域的數(shù)據(jù)接口，并通過函數(shù)調(diào)用的形式接收跨域接口響應(yīng)回來的數(shù)據(jù)

視頻中的P58-P59講了JSONP的實(shí)現(xiàn)原理?02.JSONP-JSONP的概念_嗶哩嗶哩_bilibili

我簡單總結(jié)一下

利用script標(biāo)簽中的src屬性實(shí)現(xiàn)跨域
講前端方法作為參數(shù)傳遞到服務(wù)端，然后服務(wù)端注入?yún)?shù)后返回實(shí)現(xiàn)通信
由于要使用到script的src屬性，因此只支持get
JSONP不屬于Ajax請求，因?yàn)樵贔12中network的XHR沒有顯示任何東西

先看前端

首先定義一個(gè)函數(shù)，我這里的名稱是success，這個(gè)函數(shù)中寫你拿到結(jié)果后要怎樣處理

之后通過script標(biāo)簽發(fā)get請求，問號前是地址，問號后是查詢字符串，查詢字符串需要包含你剛剛定義的函數(shù)名，以及服務(wù)需要的參數(shù)

再看后端，后端我取消了之前用于跨域的裝飾器

后端接收發(fā)送的三個(gè)信息(前端與后端的鍵一定要提前定好)

最后返回值用 return callback + '(' + str(data) + ')' 在上面那個(gè)例子中就相當(dāng)于 success(data)，這樣就能成功執(zhí)行你在JS中定義的函數(shù)

我們打開網(wǎng)頁看一下

發(fā)現(xiàn)可以成功請求

2.2??jQuery中的JSONP

jQuery中的JSONP原理也是通過script標(biāo)簽的src搞的，只不過他是動(dòng)態(tài)的，他創(chuàng)建完了就給你刪了，你一遍看不到script標(biāo)簽，在network中把網(wǎng)絡(luò)速度調(diào)慢就能看見了

2.2.1??默認(rèn)情況

使用jQuery同樣要在后端定義callback這個(gè)鍵，后端的寫法與之前一樣

再看前端

使用的是.ajax()方法，在該方法中使用jsonp必須將dataType定義為jsonp，在查詢字符串中不需要寫callback，$.ajax()方法會給你自動(dòng)搞一個(gè)，但是你的后端一定要有callback這個(gè)鍵

我們打開網(wǎng)頁看一下情況

我們看一下后端的響應(yīng)狀況，data1=30,data2=50這些是正常的，我自己沒有手動(dòng)的寫callback，在.ajax()會自動(dòng)給你搞一個(gè)函數(shù)名，然后他自己再調(diào)用，最后還有一個(gè)參數(shù)是下劃線，那個(gè)你可以理解為jQuery自己用的參數(shù)

2.2.2??自定義鍵與函數(shù)名稱

我現(xiàn)在不想用callback這個(gè)鍵了而且我也想自己定義一個(gè)函數(shù)名稱，首先你先跟后端交流好，后端把鍵改了

然后你使用.ajax()加上兩個(gè)參數(shù)jsonp(鍵的名稱),jsonCallback(函數(shù)名稱)

可以成功請求

鍵和函數(shù)也都是你要求的名字

2.2.3??淘寶搜索建議請求

有的網(wǎng)站的部分功能會使用JSONP進(jìn)行跨域請求，比如淘寶的搜索建議

url是https://suggest.taobao.com/sug?q=?在等于號后寫輸入的內(nèi)容，我做個(gè)例子

這樣你就能得到10個(gè)搜索建議

這個(gè)是用上面的JSONP做的例子，有興趣可以看一下?附錄5-淘寶搜索案例_Suyuoa的博客-博客

你是否還在尋找穩(wěn)定的海外服務(wù)器提供商？創(chuàng)新互聯(lián)www.cdcxhl.cn海外機(jī)房具備T級流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確流量調(diào)度確保服務(wù)器高可用性，企業(yè)級服務(wù)器適合批量采購，新人活動(dòng)首月15元起，快前往官網(wǎng)查看詳情吧

當(dāng)前名稱：8.跨域請求-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://muchs.cn/article16/dposdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、小程序開發(fā)、微信小程序、軟件開發(fā)、面包屑導(dǎo)航、網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容