ajax comet cgi,Ajax、Comet和WebSocket

Ajax、Comet和WebSocket

发布于 2015-06-23 17:10:58 | 197 次阅读 | 评论: 0 | 来源: 网友投递

AjaxAJAX即“Asynchronous Javascript + XML”(异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。

写这篇文章主要是为了总结学过的知识，所以几乎不包含讲解。

一、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‘)

}

相关阅读:

Ajax、Comet和WebSocket

ajax中get和post的说明及使用与区别

js原生Ajax的封装和原理详解

浅谈js的ajax的异步和同步请求的问题

Ajax和Comet技术总结

php结合ajax实现赞、顶、踩功能实例

ajax返回值中有回车换行、空格的解决方法

基于asp+ajax和数据库驱动的二级联动菜单

php+ajax简单实例代码

Ajax+PHP简单应用示例

PHP+Ajax实现表单验证的示例详解

AJAX的跨域访问-两种有效的解决方法