目錄

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

1??一些概念

1.1??同源

1.2??同源策略

1.3??跨域

2??JSONP

2.1??原理

2.2??jQuery中的JSONP

2.2.1??默認情況

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

2.2.3??淘寶搜索建議請求

---

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

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

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

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

1.2??同源策略

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

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

script標簽不受瀏覽器同源策略的影響

1.3??跨域

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

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

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

CORS屬于W3C標準中解決跨域Ajax的請求方案，支持GET與POST請求

2??JSONP

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

2.1??原理

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

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

我簡單總結一下

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

先看前端

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

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

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

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

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

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

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

2.2??jQuery中的JSONP

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

2.2.1??默認情況

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

再看前端

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

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

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

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

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

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

可以成功請求

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

2.2.3??淘寶搜索建議請求

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

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

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

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

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

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

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

廣告

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