目錄

主要從事網(wǎng)頁設(shè)計、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、wap網(wǎng)站建設(shè)（手機版網(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)驗，集策劃、開發(fā)、設(shè)計、營銷、管理等多方位專業(yè)化運作于一體，具備承接不同規(guī)模與類型的建設(shè)項目的能力。

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??同源

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

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

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

1.2??同源策略

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

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

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

1.3??跨域

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

實現(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的實現(xiàn)原理就是通過script的src屬性請求跨域的數(shù)據(jù)接口，并通過函數(shù)調(diào)用的形式接收跨域接口響應(yīng)回來的數(shù)據(jù)

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

我簡單總結(jié)一下

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

先看前端

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

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

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

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

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

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

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

2.2??jQuery中的JSONP

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

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

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

再看前端

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

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

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

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

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

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

可以成功請求

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

2.2.3??淘寶搜索建議請求

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

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

這樣你就能得到10個搜索建議

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

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

分享標(biāo)題：8.跨域請求-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://weahome.cn/article/dposdg.html