21. javacript高级程序设计-Ajax与Comet

1. Ajax与Comet

1.1 XMLHttpRequest对象

IE5是第一款引入XHR对象的浏览器，IE5中是通过MSXML库中的一个ActiveX对象实现的。因此在IE中可能存在MSXML2.XMLHttp, MSXML2.XMLHttp.3.0, MSXML2.XMLHttp.6.0，要支持旧浏览器，可以使用如下函数：

function createXHR(){

if(typeof XMLHttpRequest != 'undefined'){

return new XMLHttpRequest();

}else if(typeof ActiveXObject != 'undefined'){

if(typeof arguments.callee.activeXString !="string"){

var versions = ['MSXML2.XMLHttp.6.0','MSXML2.XMLHttp.3.0','MSXML2.XMLHttp'],i,len;

for(i =0 ,len=versions.length;i<len;i++){

try{

new ActiveXObject(versions[i]);

arguments.callee.activeXString = versions[i];

break;

}cath(ex){

}

}

}

return new ActiveXObject(arguments.callee.activeXString);

}else{

throw new Error('NO XHR object.');

}

}

1.2 XHR用法

使用XHR对象，第一个方法是open(),第一个参数表示方法，第二个参数表示请求地址，第三个参数表示是否异步传递数据。

第二步调用send()方法，

第三部根据 返回状态判断执行对应方法

(1). 等到服务器响应后，响应数据会自动填充XHR对象的属性。

l responseText：作为响应主体返回的数据

l responseXML：响应内容是XML DOM文档数据，内容类型是“text/xml”或者“application/xml”

l status:响应的状态

l statusText:响应的状态说明

(2). 针对异步请求，可以检测XHR对象的readyState属性，

l 0：未初始化

l 1：启动

l 2：发送

l 3：接收

l 4：完成

var xhr = createXHR();

xhr.onreadystatechange = function(){ //必须在open方法前指定

if(xhr.readystate == 4){

if((xhr.status >=200 && xhr.status < 300)|| xhr.status == 304){

alert(xhr.responseText);

}else{

alert(‘error’);

}

}

}

xhr.open(‘get’,’ex.php’,true);

xhr.send(null);

1.3 GET请求

var xhr = createXHR();

xhr.onreadystatechange = function(){ //必须在open方法前指定

if(xhr.readystate == 4){

if((xhr.status >=200 && xhr.status < 300)|| xhr.status == 304){

alert(xhr.responseText);

}else{

alert(‘error’);

}

}

}

xhr.open(‘get’,’ex.php?uid=xx’,true); //URL地之后传递参数

xhr.send(null);

1.4 POST请求

var xhr = createXHR();

xhr.onreadystatechange = function() { //必须在open方法前指定

if (xhr.readystate == 4) {

if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {

alert(xhr.responseText);

} else {

alert(‘error’);

}

}

}

xhr.open(‘post’, ’ex.php’, true);

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //发送前指定传输类型

xhr.send(form.data);//参数在send是传输

1.5 跨资源请求

IE8通过XDomainRequest对象支持CORS，其他浏览器通过XHR对象原生支持CORS，图像Ping和JSONP是另外两种跨浏览器通信技术。