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是另外两种跨浏览器通信技术。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。