瀏覽器跨域獲取數據的六種方式

只要 協議 、 域名 、 端口 有任何一個 不同, 都被當作是 不同的域。

1.CORS

CORS(Corss-Origin Resource Sharing,跨資源共享),基本思想是使用自定義的HTTP頭部讓瀏覽器與服務器進行溝通,從而決定請求或響應的成功或失敗。即給請求附加一個額外的Origin頭部,其中包含請求頁面的源信息(協議、域名和端口),以便服務器根據這個頭部決定是否給予響應。

2.document.domain

將頁面的document.domain設置爲相同的值,頁面間可以互相訪問對方的JavaScript對象。
注意:
不能將值設置爲URL中不包含的域;
鬆散的域名不能再設置爲緊繃的域名。

3.圖像Ping

var img=new Image();
img.onload=img.onerror=function(){
... ...
}
img.src="url?name=value";
請求數據通過查詢字符串的形式發送,響應可以是任意內容,通常是像素圖或204響應。
圖像Ping最常用於跟蹤用戶點擊頁面或動態廣告曝光次數。
缺點:
只能發送GET請求;
無法訪問服務器的響應文本,只能用於瀏覽器與服務器間的單向通信。

4.Jsonp

var script=document.createElement("script");
script.src="url?callback=handleResponse";
document.body.insertBefore(script,document.body.firstChild);
JSONP由兩部分組成:回調函數和數據
回調函數是接收到響應時應該在頁面中調用的函數,其名字一般在請求中指定。
數據是傳入回調函數中的JSON數據。
優點:
能夠直接訪問響應文本,可用於瀏覽器與服務器間的雙向通信。
缺點:
JSONP從其他域中加載代碼執行,其他域可能不安全;
難以確定JSONP請求是否失敗。

5.Comet

Comet可實現服務器向瀏覽器推送數據。
Comet是實現方式:長輪詢和流
短輪詢即瀏覽器定時向服務器發送請求,看有沒有數據更新。
長輪詢即瀏覽器向服務器發送一個請求,然後服務器一直保持連接打開,直到有數據可發送。發送完數據後,瀏覽器關閉連接,隨即又向服務器發起一個新請求。其優點是所有瀏覽器都支持,使用XHR對象和setTimeout()即可實現。
流即瀏覽器向服務器發送一個請求,而服務器保持連接打開,然後週期性地向瀏覽器發送數據,頁面的整個生命週期內只使用一個HTTP連接。

6.WebSocket

WebSocket可在一個單獨的持久連接上提供全雙工、雙向通信。
WebSocket使用自定義協議,未加密的連接時ws://;加密的鏈接是wss://。
var webSocket=new WebSocket("ws://");
webSocket.send(message);
webSocket.onmessage=function(event){
var data=event.data;
... ....
}

注意:
必須給WebSocket構造函數傳入絕對URL;
WebSocket可以打開任何站點的連接,是否會與某個域中的頁面通信,完全取決於服務器;
WebSocket只能發送純文本數據,對於複雜的數據結構,在發送之前必須進行序列化JSON.stringify(message))。
優點:
在客戶端和服務器之間發送非常少的數據,減少字節開銷。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章