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

目錄

主要從事網(wǎng)頁(yè)設(shè)計(jì)、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、響應(yīng)式網(wǎng)站建設(shè)、程序開(kāi)發(fā)、微網(wǎng)站、重慶小程序開(kāi)發(fā)等，憑借多年來(lái)在互聯(lián)網(wǎng)的打拼，我們?cè)诨ヂ?lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了豐富的做網(wǎng)站、成都做網(wǎng)站、網(wǎng)絡(luò)營(yíng)銷經(jīng)驗(yàn)，集策劃、開(kāi)發(fā)、設(shè)計(jì)、營(yíng)銷、管理等多方位專業(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??淘寶搜索建議請(qǐng)求

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

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

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

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

1.2??同源策略

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

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

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

1.3??跨域

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

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

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

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

2??JSONP

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

2.1??原理

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

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

我簡(jiǎn)單總結(jié)一下

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

先看前端

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

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

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

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

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

我們打開(kāi)網(wǎng)頁(yè)看一下

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

2.2??jQuery中的JSONP

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

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

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

再看前端

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

我們打開(kāi)網(wǎng)頁(yè)看一下情況

我們看一下后端的響應(yīng)狀況，data1=30,data2=50這些是正常的，我自己沒(méi)有手動(dòng)的寫(xiě)callback，在.ajax()會(huì)自動(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ù)名稱)

可以成功請(qǐng)求

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

2.2.3??淘寶搜索建議請(qǐng)求

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

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

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

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

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

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

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

廣告

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

成都網(wǎng)頁(yè)設(shè)計(jì)公司