Ajax、CORS、Comet和WebSocket
2015-04-02 22:36
316 查看
写这篇文章主要是为了总结学过的知识,所以几乎不包含讲解。
一、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):
在IE 5/ IE 6下可以使用以下代码:
6. CORS(Cross-Origin Resource Sharing 跨域资源共享)是XMLHttpRequest 2.0 新增特性,在IE 8上面要使用其特有的XDomainRequest
7. 依靠CORS可以轻松进行跨域Ajax请求,进行跨域不需要进行任何设置。(只要服务器端开启了支持)
8. 通过检查withCredential属性是否存在可以判断浏览器是否支持CORS
二、Comet
1. Comet是被动的Ajax,它由服务器端发起通信推送至客户端,客户端再向服务器请求数据
2. 通过使用EventSource() 构造函数,可以非常容易的创建一个Comet架构的应用
3. IE还没有支持EventSource,但可以使用XMLHttpRequest进行模拟
三、 WebSocket
1. WebSocket是底层网络接口名,它定义了一个全双工通信通道,仅需要一个WebSocket就可进行通信
2. WebSocket比Comet更具优势,节省了建立HTTP连接和传输头信息的开销
3. 可以使用window.WebSocket来进行浏览器检测
4. WebSocket对象有三个事件:oepn、close和message。当连接建立时触发open事件,收到消息时触发message事件,连接关闭时触发close事件
一、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):
var url = '/user' var param = { username: 'sunken', password: '123456' } var req = new XMLHttpRequest() req.open('POST', 'http://sunken.me/content') req.onreadystatechange = function() { if (req.status == 200 && req.readyState == 4) { var data = req.responseText console.log(data) } } req.setRequestHeader('Content-Type', 'application/json') req.send(param)
在IE 5/ IE 6下可以使用以下代码:
if (window.XMLHttpRequest === undefined) { window.XMLHttpRequest = function() { try { // 如果可用,则使用ActiveX对象的最新版本 return new ActiveXObject('Msxml2.XMLHTTP.6.0') } catch (e1) { try { // 否则回到老版本 return new ActiveXObject('Msxml2.XMLHTTP.3.0') } catch (e2) { // error throw new Error('XMLHttpRequest is not supported') } } } }
6. CORS(Cross-Origin Resource Sharing 跨域资源共享)是XMLHttpRequest 2.0 新增特性,在IE 8上面要使用其特有的XDomainRequest
7. 依靠CORS可以轻松进行跨域Ajax请求,进行跨域不需要进行任何设置。(只要服务器端开启了支持)
8. 通过检查withCredential属性是否存在可以判断浏览器是否支持CORS
var req = new XMLHttpRequest() var support = req.withCredentials !== undefined
二、Comet
1. Comet是被动的Ajax,它由服务器端发起通信推送至客户端,客户端再向服务器请求数据
2. 通过使用EventSource() 构造函数,可以非常容易的创建一个Comet架构的应用
var ticker = new EventSource('/message') ticker.onmessage = function(e) { var type = e.type var data = e.data }
3. IE还没有支持EventSource,但可以使用XMLHttpRequest进行模拟
三、 WebSocket
1. WebSocket是底层网络接口名,它定义了一个全双工通信通道,仅需要一个WebSocket就可进行通信
2. WebSocket比Comet更具优势,节省了建立HTTP连接和传输头信息的开销
3. 可以使用window.WebSocket来进行浏览器检测
4. WebSocket对象有三个事件:oepn、close和message。当连接建立时触发open事件,收到消息时触发message事件,连接关闭时触发close事件
var url = '/message' var w = new WebSocket(url) w.onopen = function() { w.send('建立连接了,多谢') } w.onmessage = function() { console.log(e.data.toString()) } w.onclose = function() { w.send('再见') } w.onerror = function() { console.log('error') }
相关文章推荐
- Grails 中使用 grails-events-push 实现 ajax/comet/websocket 消息推送
- Ajax、Comet、Websocket、SSE
- Ajax、Comet与Websocket
- Ajax、Comet与Websocket
- [网页设计]Ajax、Comet与Websocket--转
- Web前后端数据交换技术和规范发展史:Form、Ajax、Comet、Websocket
- Ajax、Comet与Websocket
- Grails 中使用 grails-events-push 实现 ajax/comet/websocket 消息推送
- Ajax、Comet与Websocket
- [网页设计]Ajax、Comet与Websocket
- js系列教程11-json、ajax(XMLHttpRequest)、comet、SSE、WebSocket全解
- Web前后端数据交换技术和规范发展史:Form、Ajax、Comet、Websocket
- Ajax、Comet、HTML 5 Web Sockets技术比较分析
- 秒懂ajax轮询、long poll 、websocket
- AJAX POST&跨域 解决方案 - CORS
- 客户端与服务器持续同步解析(轮询,comet,WebSocket)
- js-Ajax与Comet
- Ajax 跨域 异步 CORS
- AJax和comet
- Javaweb网cors跨域ajax数据交互