資訊專欄INFORMATION COLUMN
摘要：由于第二種方法如今已經(jīng)采用的非常少，所以我們?cè)谶@兒不做講解一帶填充的是一種可以在中繞過(guò)同源策略，并發(fā)起跨域請(qǐng)求的使用模式，可以啟動(dòng)的跨域請(qǐng)求同源策略有一個(gè)顯著的例外，腳本元素是可以規(guī)避檢查的。
講跨域之前，我們先來(lái)講同源策略（SOP），同源策略是網(wǎng)景公司提出的一個(gè)著名安全策略。所謂同源就是域名、協(xié)議、端口相同。例如http://www.12306.cn中，http就是超文本傳輸協(xié)議，12306就是域名，cn就是端口。如果兩個(gè)資源需要通信，那么他必須滿足SOP。而在前端中我們使用ajax進(jìn)行數(shù)據(jù)請(qǐng)求。
如果資源不同域，那么我們?cè)谑褂胊jax請(qǐng)求數(shù)據(jù)的時(shí)候，就會(huì)報(bào)錯(cuò)，表示拒絕訪問(wèn)。那如何進(jìn)行跨域處理呢？事實(shí)上有三種方法1、JSONP，2、子域代理，3、CORS。由于第二種方法如今已經(jīng)采用的非常少，所以我們?cè)谶@兒不做講解
帶填充的JSON,是一種可以在JS中繞過(guò)同源策略，并發(fā)起跨域HTTP請(qǐng)求的使用模式，可以啟動(dòng)JS的跨域HTTP請(qǐng)求
同源策略有一個(gè)顯著的例外，HTML腳本元素是可以規(guī)避SOP檢查的。那就意味著我們可以采用動(dòng)態(tài)注入腳本的方式向其他源發(fā)出HTTP請(qǐng)求。JSONP正是利用了這個(gè)例外情況進(jìn)行跨域數(shù)據(jù)加載的。
我們先來(lái)看一個(gè)例子：使用ajax請(qǐng)求一個(gè)普通的JSON文件。假設(shè)你使用ajax請(qǐng)求"http://jsonpjs.com/info.json",它會(huì)返回一個(gè)JSON文檔，其中包含一些信息
{
"title": "jsonp explaintation",
"author": "Cornelius"
}
瀏覽器接受到這個(gè)json文件后，就會(huì)把他當(dāng)成字符串進(jìn)行處理，但是這個(gè)字符串我們需要把它轉(zhuǎn)換為對(duì)象，才能夠被javascript所使用，這里我們就可以使用json.parse函數(shù)來(lái)完成。當(dāng)然由于同源策略的限制，ajax只能夠在同一個(gè)域中才能夠使用。但是正如我們前面提到的，script是html腳本元素它可以規(guī)避SOP的檢查所以我們?yōu)榱苏?qǐng)求到j(luò)son文件，我們可以使用這種方式
通過(guò)script元素請(qǐng)求資源，當(dāng)文件加載完成時(shí)，瀏覽器會(huì)把json響應(yīng)當(dāng)作Javascript解析。但是這樣的情況下我們還是無(wú)法獲得json數(shù)據(jù)。
由于該對(duì)象沒(méi)有被存儲(chǔ)，也沒(méi)有賦值給一個(gè)變量，或者作為參數(shù)傳遞給一個(gè)函數(shù)，瀏覽器就會(huì)忽略它。
那么該如何獲取JSON輸出呢?
這兒有兩種方法，第一種直接由服務(wù)器把json數(shù)據(jù)進(jìn)行存儲(chǔ)。例如有一個(gè)外部URL，http://jsonjs.com//info.js(注意文件擴(kuò)展名是.js而不是.json),內(nèi)容如下
var jsonResponse = {
"title": "jsonp explaintation",
"author": "Cornelius"
}
當(dāng)文件加載完成后，我們就可以通過(guò)全局變量jsonResponse訪問(wèn)這個(gè)JSON對(duì)象了。當(dāng)該變量包含所請(qǐng)求數(shù)據(jù)時(shí)，我們可以使用script.onload來(lái)通知代碼。那么另外一種通過(guò)一個(gè)回調(diào)函數(shù)代替全局變量的方式來(lái)傳遞JSON對(duì)象
jsonHandler({
"title": "jsonp explaintation",
"author": "Cornelius"
})
使用這種方式的好處在于，我們不需要依靠script元素的onload事件來(lái)判斷json是否可用，當(dāng)info.js被解析時(shí)，回調(diào)便會(huì)自動(dòng)執(zhí)行。這需要加載
我的github如果對(duì)你有幫助請(qǐng)點(diǎn)一個(gè)star
第一次寫技術(shù)文章，不足的地方還請(qǐng)各位多多指教
參考文獻(xiàn)：跨域資源共享 CORS 詳解 ---阮一峰
[third-party javascript ---- Ben Vinegar Anton Kovalyov][2]
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/91752.html
摘要：類似這樣而在客戶端我們只需要定義一個(gè)預(yù)定好的回調(diào)函數(shù)即可。處理跨域請(qǐng)求得到的數(shù)據(jù)其中的是我們?cè)诳蛻舳硕x好的在數(shù)據(jù)請(qǐng)求成功后要執(zhí)行的回調(diào)函數(shù)。 跨域產(chǎn)生的原因 跨域是由瀏覽器的同源策略引起的，即不同源（協(xié)議,域名,端口中其中有一個(gè)不同）的js是不能讀取對(duì)方的資源的。當(dāng)要網(wǎng)站中的js要請(qǐng)求其他網(wǎng)站的數(shù)據(jù)時(shí)就會(huì)產(chǎn)生跨域問(wèn)題，就像下面這樣，瀏覽器會(huì)報(bào)錯(cuò)。 showImg(https://se...
摘要：例外當(dāng)涉及到同源策略時(shí)，有兩個(gè)主要的例外授信范圍兩個(gè)相互之間高度互信的域名，如公司域名，不遵守同源策略的限制。端口未將端口號(hào)加入到同源策略的組成部分之中，因此和屬于同源并且不受任何限制。 原文鏈接：http://www.devsai.com/2016/11/24/talk-CORS/ 同源策略（same origin policy） 1995年，同源政策由 Netscape 公司引入瀏...
閱讀 3216·2021-10-12 10:20
閱讀 2926·2021-09-27 13:56
閱讀 898·2021-09-27 13:36
閱讀 1502·2021-09-26 09:46
閱讀 2504·2019-08-30 14:02
閱讀 2753·2019-08-28 18:14
閱讀 1337·2019-08-26 10:32
閱讀 1780·2019-08-23 18:25
