|
由于瀏覽器的同源策略，網(wǎng)絡(luò)連接的跨域訪問是不被允許的，XHR對(duì)象不能直接與非同源的網(wǎng)站處理數(shù)據(jù)交互。而同源指的是什么呢？同源的范疇包括：規(guī)則(協(xié)議)，主機(jī)號(hào)(域名、ip等)，端口號(hào)。 但是隨著開放，共享平臺(tái)的流行，跨域訪問的需求愈加強(qiáng)烈。目前最常用的跨域方案是動(dòng)態(tài)加入script標(biāo)簽，這多少有點(diǎn)hack的意味，跨域訪問似乎一直沒有什么安全且光明正大的辦法。
終于，HTML5提供的XMLHttpRequest Level2實(shí)現(xiàn)了跨域訪問以及其他的一些新功能。下面我們會(huì)詳細(xì)討論一下：
XMLHttpRequest Level2 XHR2是HTML5新特性中的一個(gè)(事實(shí)上沒有什么XHR1，XHR2這樣的概念，XHR2只是HTML5提供的一套新的規(guī)范)，在原有XHR對(duì)象上新增了一些功能：跨域訪問，全新的事件，還有請(qǐng)求進(jìn)度以及響應(yīng)進(jìn)度。 目前瀏覽器對(duì)于XHR2的兼容列表：
原理： 正常情況下，我們書寫一個(gè)XHR示例： var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://baidu.com', true); //訪問baidu.com
xhr.send(null);
我們本地使用Chrome運(yùn)行這段代碼，打開控制臺(tái)查看錯(cuò)誤信息：
圖1
在這里可以看到，本次請(qǐng)求已經(jīng)被Kill掉。這是因?yàn)?，我們的頁面在本地，域是http://127.0.0.1，與請(qǐng)求的http://baidu.com非同源。 那么本次請(qǐng)求是何時(shí)被Kill的呢，是在發(fā)出前被瀏覽器確認(rèn)為跨域請(qǐng)求而被立即終止了嗎？事實(shí)上，瀏覽器不僅發(fā)出了請(qǐng)求，還接收到了響應(yīng)。然后根據(jù)響應(yīng)頭的規(guī)則來確定這個(gè)域是否同源可以接收，如果不可以，瀏覽器就會(huì)報(bào)錯(cuò)，接收到的數(shù)據(jù)也不會(huì)提供給腳本。
我們回到XHR2，上面提到，XHR對(duì)象新增了一些功能，這里就包括跨域訪問。實(shí)現(xiàn)如下： //在服務(wù)器端返回內(nèi)容的頁面，設(shè)置Header Access-Control-Allow-Origin如下 Response.AddHeader("Access-Control-Allow-Origin","*") ;
這里，我們先不討論設(shè)置的含義，先讓代碼跑起來，查看結(jié)果如何。 頁面http://inno./FirePot/meetingdate?date=20120723已經(jīng)完成如上配置，修改JS代碼如下：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://inno./FirePot/meetingdate?date=20120723', true); //訪問baidu.com
xhr.send();
刷新頁面，查看控制臺(tái)，沒有報(bào)錯(cuò)。打開控制臺(tái)的“Network”選型卡：
圖2
可以看到紅線標(biāo)識(shí)的部分：Access-Control-Allow-Origin:*，即為我們?cè)诜?wù)器端所做的設(shè)置。切換到“Response”選項(xiàng)卡：
圖3
可以看到服務(wù)器返回的內(nèi)容，如此，我們完成了跨域訪問。
這是怎么做到的呢？ 瀏覽器在接收到服務(wù)器返回信息時(shí)，會(huì)檢查響應(yīng)頭的Access-Control-Allow-Origin，它的值標(biāo)識(shí)請(qǐng)求內(nèi)容所允許的域。 我們之前要求服務(wù)器設(shè)置Access-Control-Allow-Origin為*，表明該返回信息允許所有源訪問。如果設(shè)置為具體的域，如http://，就表明除了同源外，只允許域來自的訪問。
注： 在使用AJAX類庫(kù)時(shí)，可能經(jīng)過如上的設(shè)置，依然無法通過瀏覽器的安全限制。那么，可以檢查一下AJAX類庫(kù)的代碼，看是否存在影響跨域設(shè)置的代碼：
圖4
如上是tangram-ajax-1.5.2.js中，影響跨域的代碼，注釋調(diào)即可，其他類庫(kù)請(qǐng)自調(diào)。
|
|
|
