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 }