js高级程序设计笔记--Ajax与comet

XMLHttpRequest对象

在IE5中，XHR对象是通过MSXML库中的一个ActiveX对象实现的。因此IE中有三种不同版本的XHR对象：MSXML2.XMLHttp,MSXML2.XMLHttp.3.0,MSXML2.XMLHttp.6.0.

IE7+,Firefox,Opera,Chrome,Safari都支持原生的XHR对象。可以使用XMLHttpRequest构造函数。

function createXHR(){
if(typeof XMLHttpRequest != "undefined"){
return new XMLHttpRequest();
}else if(typeof ActiveXObject != "udefined"){
if(typeof arguments.callee.activeXString != "string"){
var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],
i,len;
for(i=0,len = version.length;i<len;i++){
try{
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
}catch(ex){
//跳过
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}else{
throw new Error("no XHR object available");
}
}

XHR用法

1.调用open()方法，接收3个参数：要发送的请求的类型，请求的URL，表示是否异步发送请求的布尔值。

xhr.open("get","example.php",false);

2.调用send()方法，接收1个参数，作为请求主体发送的数据。如果没有也要传入null.

响应的数据会自动填充XHR对象的属性：

responseText:作为响应主体被返回的文本。

responseXML:当响应的内容类型 是“text/xml”或”application/xml”时，被返回。

status:响应的HTTP状态码

statusText；http状态的说明。（200表示成功，304表示请求的资源没被修改，可用浏览器缓存的版本）

发送异步请求时可检测XHR对象的readyState属性。取值如下：

0：未初始化，尚未调用open方法。

1：启动，已经调用open()方法。

2：已经调用send()方法。

3：接收，已经接收到部分响应数据。

4. 完成。已经接收到全部响应数据。

只要readyState属性改变。就会触发readystatechange事件。

var xhr = createXHR();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if((xhr.status >=200 && xhr.status <300) || xhr.status = 304){
alert(xhr.responseText);
}else{
alert("request was unsuccessful");
}
}
}

另外在接收到响应数据之前可以调用abort()方法取消异步请求。

xhr.abort();

setRequestHeader(headerName,headerValue):设置头部信息。

getRequestHeader(headName):取得相应的响应头部信息。

getAllRequestHeaders():取得一个包含所有头部信息的长字符串。

XHR模仿表单提交：

xhr.open("post","post.php",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var form = document.getElementById("user-info");
xhr.send(serialize(form));

XMLHttpRequest2级

FormData

XMLHttpRequest2级为表单数据的序列化定义了FormData类型。

var data = new FormData();
data.append("name","bibi");

也可以穿入表单元素

var data = new FormData(document.forms[0]);

创建之后可以直接传给XHR的send()方法。

xhr.send(new FormData(form));

使用此类型的方便之处在于不必明确的在XHR对象上设置请求头部。支持FormData的浏览器有FireFox4+,Safari5+,Chrome.

超时设定

IE8为XHR对象添加了一个timeout属性。表示请求在等待响应都少毫秒之后就终止。进而触发ontimeout事件处理程序。这项功能后来被收入了XMLHttpRequest2级规范中。

xhr.timeout = 1000;//仅适用于IE8+
xhr.ontimeout = function(){
.....
}

overrideMimeType()方法

强制xhr对象将响应当做某种数据类型的格式来处理。

xhr.overrideMimeType("text/xml");
xhr.send(null);

进度事件

6个进度事件：

loadstart:在接收到响应数据的第一个字节时触发。

progress:在接收响应期间持续不断的触发。

error:在请求发生错误时触发。

abort()：调用abort()方法终止连接时触发。

load:在接收到完整的相应数据时触发。

loadend:在通信完成或者触发error,abort,load事件后触发。（暂时没有浏览器支持）

IE8+只支持load事件。

load事件

Firefox引入load事件，用以替代readystatechange事件。响应接收完毕后将触发load事件。onload事件接收一个event对象，其target属性指向XHR对象实例。但是并非所有浏览器都实现了这个事件对象。因此还是得像原来那样使用XHR对象变量。

progress事件

Mozilla对XHR的另一个革新是添加了progress事件。onprogress事件处理程序接收一个event对象，该对象包含着三个额外的属性：

lengthComputable:进度信息是否可用的布尔值

position:已经接收的自己数

totalSize:根据Content-Length响应头部确定的预期字节数。

xhr.onprogress = function(event){
var divStatus = document.getElementById("status");
if(event.lengthComputable){
divStatus.innerHTML = "received" + event.position +"of "+event.totalSize+"bytes";
}
}

跨源资源共享

CORS(Cross-Origin Resource Sharing):定义了在必须访问跨资源时，浏览器与服务器应该如何沟通。使用自定义的Http头部让浏览器与服务器进行沟通，，从而决定请求或响应成功或失败。比如在发送该请求时附加一个额外的Origin头部。

Origin:http://www.nczongline.net

如果服务器认为这个请求可以接受，就在Access-Control-Allow-Origin头部中回发相同的原信息（如果是公共资源可以回发“*”).

Access-Control-Allow-Origin:http://www.nczongline.net

<
c3dd
/pre>

如果没有这个头部或者原信息不匹配，浏览器会驳回请求。注意，请求和响应都包含cookie信息。

IE对CORS的实现

微软在IE8中引入了XDR类型。能够实现安全可靠的跨域通信。XDR与XHR的一些不同之处。

cookie不会随请求发送，也不会随响应返回。

只能设置请求头部信息中的Content-Type字段。

不能访问响应头部信息

只支持get和post请求。

XDR对象的使用方法与XHR对象类似。不同的是open()方法只接受两个参数：请求类型和URl.所有XDR请求都是异步执行的。请求返回后会触发load事件。响应的数据也会保存在responseText属性中。

var xdr = new XDomainRequest();
xdr.onload = function(){
alert(xdr.responseText);
}
xdr.open("get","http://www.haha.com");
xdr.send(null);


xdr.abort():终止请求。与XHR一样，XDR一样，XDR对象也支持timeout属性以及ontimeout事件处理程序。

为支持post请求，XDR对象提供了contentType属性

xdr.open("post","http://www.hihi.com");
xdr.contentType = "application/x-wwww-form-urlencoded";
xdr.send("name=value1&name2=value2");


其它浏览器对CORS的实现
通过XMLHttpRequest对象实现了CORS的原生支持。要请求另一个域中的资源，使用标准的XHR对象并在open()方法中传入绝对URL即可。

但是跨域XHR对象也有一些限制。

1， 不能使用setRequestHeader()设置自定义头部。

2. 不能发送和接收cookie.

跨浏览器的CORS
function createCORSRequest(method,url){
var xhr = new XMLHttpRequest();
if("withCredentials" in xhr){
xhr.open(method,url,true);
}else if(typeof XDomainRequest != "undefined"){
Vxhr = new XDomainRequest();
xhr.open(method,url);
}else{
xhr = null;
}
return xhr;
}


Comet
一种服务器向页面推送数据的技术。实现Comet的两种方式：长轮询（利用setTimeout)和流（浏览器向服务器发送一个请求，服务器保持连接断开，然后周期性的向浏览器发送数据）。

使用XHR对象实现HTTP流：

function createStreamingClient(url,progress,finished){
var xhr = new XMLHttpRequest(),
received = 0;
xhr.open("get",url,true);
xhr.onreadystatechange = funtion(){

var result;
if(xhr.readyState == 3){
result = xhr.responseText.subString(received);
received += result.length;
//调用progress回调函数
}else if(xhr.readyState == 4){
finished(xhr.responseText);
}

}
xhr.send(null);
return xhr;
}


服务器发送事件
SSE(Server-Send Events,服务器发送事件)是围绕只读Comet交互推出的API。SSE API用于创建到服务器的单向连接，服务器通过这个连接可以发送任意数量的数据。服务器响应的MIME类型必须是text/event-stream。支持SSE的浏览器：firefox6+,safari5+,opera11+,chrome

1. SSE API

首先创建一个新的EventSource对象。

// 传入的url必须是同源的
var source = new EventSource("myevents.php");


EventSource的实例有个readyState属性，值为0表示正连接服务，1表示打开了连接，2表示关闭了连接。

还有以下3个事件：

open:在建立连接时触发。

message:在从服务器接收到新事件时触发。

error:在无法建立连接时触发

source.onmessage = function(event){
var data = event.data;
//处理数据
//如果连接断开会自动重新连接，如果想强制断开连接。可close()方法
source.close();
}