Ajax、CORS、Comet和WebSocket

 

寫這篇文章主要是爲了總結學過的知識，因此幾乎不包含講解。

 

1、Ajax

 

1. Ajax應用的主要特色是使用腳本操縱HTTP和Web服務器進行數據交換，不會致使頁面重載

2. 經過設置img標籤的src屬性能夠向HTTP服務器發起GET請求。服務器實際上必須以某個圖片做爲返回結果，但它必定要不可見。好比一個1x1的透明圖片。這種技術稱爲Beacons，這是一種很是安全高效的向服務器發送信息的方式，服務器端的錯誤不會影響客戶端代碼執行。缺點是沒法接收返回信息。並且受同源策略限制

3. iframe一樣能夠發起GET請求，更爲強大的一點是，服務器能夠返回一個HTML文檔在iframe中進行顯示。但它一樣受限於同源策略

4. script元素能夠跨域發送GET請求，當服務器返回一段JSON格式的數據時，Javascript解析器能自動「解碼」。這種請求方式稱爲JSONP。由於服務器返回的結果會當作腳本內容執行，在使用JSONP時須要考慮安全性

5. 經過XMLHttpRequest是實現Ajax最多見的方式，它能夠應用於HTTP或HTTPS請求。支持任何基於文本的格式。可使用POST、PUT、DELETE、HEAD等請求方式。

 

　　一個標準的Ajax請求以下（兼容IE7）:　

 1 var url = '/user'    
 2     var param = {
 3         username: 'sunken',
 4         password: '123456'
 5     }
 6 
 7     var req = new XMLHttpRequest()
 8 
 9     req.open('POST', 'http://sunken.me/content')
10     req.onreadystatechange = function() {
11 
12         if (req.status == 200 && req.readyState == 4) {
13 
14             var data = req.responseText
15 
16             console.log(data)
17         }
18     }
19 
20     req.setRequestHeader('Content-Type', 'application/json')
21     req.send(param)

 

　　在IE 5/ IE 6下可使用如下代碼：

 1 if (window.XMLHttpRequest === undefined) {
 2     window.XMLHttpRequest = function() {
 3 
 4         try {
 5             // 若是可用，則使用ActiveX對象的最新版本
 6             return new ActiveXObject('Msxml2.XMLHTTP.6.0')
 7         
 8         } catch (e1) {
 9 
10             try {
11 
12                 // 不然回到老版本
13                 return new ActiveXObject('Msxml2.XMLHTTP.3.0')
14 
15             } catch (e2) {
16 
17                 // error
18                 throw new Error('XMLHttpRequest is not supported')
19             }
20         }
21     }
22 }

 

6. CORS（Cross-Origin Resource Sharing 跨域資源共享）是XMLHttpRequest 2.0 新增特性，在IE 8上面要使用其特有的XDomainRequest

7. 依靠CORS能夠輕鬆進行跨域Ajax請求，進行跨域不須要進行任何設置。（只要服務器端開啓了支持）

8. 經過檢查withCredential屬性是否存在能夠判斷瀏覽器是否支持CORS

1 var req = new XMLHttpRequest()
2 var support = req.withCredentials !== undefined

 

 

2、Comet

 

1. Comet是被動的Ajax，它由服務器端發起通訊推送至客戶端，客戶端再向服務器請求數據

2. 經過使用EventSource() 構造函數，能夠很是容易的建立一個Comet架構的應用

1 var ticker = new EventSource('/message')
2 
3 ticker.onmessage = function(e) {
4     var type = e.type
5     var data = e.data
6 }

 

3. IE尚未支持EventSource，但可使用XMLHttpRequest進行模擬

 

 

3、 WebSocket

 

1. WebSocket是底層網絡接口名，它定義了一個全雙工通訊通道，僅須要一個WebSocket就可進行通訊

2. WebSocket比Comet更具優點，節省了創建HTTP鏈接和傳輸頭信息的開銷

3. 可使用window.WebSocket來進行瀏覽器檢測

4. WebSocket對象有三個事件：oepn、close和message。當鏈接創建時觸發open事件，收到消息時觸發message事件，鏈接關閉時觸發close事件

 1 var url = '/message'
 2 var w = new WebSocket(url)
 3 
 4 w.onopen = function() {
 5     w.send('創建鏈接了，多謝')
 6 }
 7 
 8 w.onmessage = function() {
 9     console.log(e.data.toString())
10 }
11 
12 w.onclose = function() {
13     w.send('再見')
14 }
15 
16 w.onerror = function() {
17     console.log('error')
18 }