ajax与commet

Posted 2021-11-23 fqh123

在XHR出现之前，Ajax的通信必须借助一些hack手段来实现，大多是使用隐藏的框架或内嵌框架。XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面也能取得新数据。虽然名字中包含XML成分，但Ajax通信与数据格式无关；这种技术就是无需刷新页面即可从服务器取得数据，但不一定是XML数据。人们也通常将这种技术成为远程脚本。

XMLHttpRequest对象

IE5是第一款引入XHR对象的浏览器。在IE5中，XHR对象是通过MSXML库中的一个ActiveX对象实现的。因此在IE中可能会遇到三种不同版本的XHR对象，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0和MSXMLHttp.6.0。要使用MSXML库中的XHR对象，需要像第18章讨论创建XML文档时一样，编写一个函数，例如：

    // 适用于IE7之前版本
      //此方法会返回一个XHR对象
      function createXHR(){
            if(typeof arguments.callee.activeXString!="string"){//检测函数体的自定义属性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]);//创建一个ActiveX类型的一个实例（需要版本号），若不支持这个版本会报错
                              arguments.callee.activeXString=versions[i];//为函数体自定义activeXString属性，并将版本号赋值给它
                              break;
                        }catch(ex){
                              //跳过
                        }
                  }  
            }
            return new ActiveXObject(arguments.callee.activeXString);
      }

IE7+、firefox、opera、chrome、safari都支持XHR对象，在这些浏览器中创建XHR对象要像下面这样使用：

    var xhr=new XMLHttpRequest();

然后我们就可以将IE7之前的和IE7之后的封装成一个跨浏览器创建XHR对象的方法，适合任何浏览器任何版本！！

    function createXHR(){
            if(typeof XMLHttpRequest!="undefined"){//检测是否支持XMLHttpRequest原生对象
                  return new XMLHttpRequest();
            }else if(typeof ActiveXObject!="undefined"){
                  if(typeof arguments.callee.activeXString!="string"){//检测函数体的自定义属性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]);//创建一个ActiveX类型的一个实例（需要版本号），若不支持这个版本会报错
                                    arguments.callee.activeXString=versions[i];//为函数体自定义activeXString属性，并将版本号赋值给它
                                    break;
                              }catch(ex){
                                    //跳过
                              }
                        }  
                  }
                  return new ActiveXObject(arguments.callee.activeXString);
            }else{
                  throw new Error("No XHR object available.");
            }
      }

使用：

    var xhr=createXHR();

XHR对象的用法

在使用XHR对象时，要调用的第一个方法是open（），它接收3个参数：要发送的请求的类型（get、post等等）、请求的URL和表示是否异步发送请求的布尔值。：

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

这行代码会启动一个针对example.php的GET请求。有关这行代码，需要说明两点：一是URL相对于执行代码的当前页面（当然也可以用绝对路径）；二是调用open（）方法并不会真正发送请求，而只是启动一个请求以备发送。

注意：只能向同一个域中使用相同端口和协议的URL发送请求。如果URL与启动请求的页面有任何差别，都会引发安全错误。

要发送特定的请求，必须像下面这样调用send（）方法：

    xhr.send(null);

这里的send（）方法接收一个参数，即要作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入null，因为这个参数对有些浏览器来说是必要的。调用send（）之后，请求就会被分派到服务器。

由于这次请求是同步的，javascript代码会等到服务器响应之后再继续执行。在收到响应之后，响应的数据就会自动填充XHR对象的属性，相关属性简介如下：

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

responseXML：如果响应的内容类型是“text/xml”或"application/xml"，这个属性中将保存包含着响应数据的XML DOM文档。

status：响应的HTTP状态。

statusText：HTTP状态说明。

在接收到响应之后，第一步是检测status属性，以确定响应已经成功返回。一般来说，可以将HTTP状态码为200作为成功的标志。此时，reponseText属性的内容已经就绪，而且在内容类型正确的情况下，responseXML也应该能够访问了。此外，状态码为304表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本；当然，也意味着响应是有效的。为确保接收到适应的响应，应该像下面这样检查上述两种状态代码：

    if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
            console.log(xhr.responseText);
      }else{
            console.log("Request was unsuccessful:"+xhr.status);
      }

无论内容类型是什么，响应主体的内容都会保存到responseText属性中；而对于非XML数据而言，responseXML属性的值将为null。

像前面这样发送同步请求当然没有问题，但多数情况下，我们还是要发送异步请求，才能让javascript代码继续执行，而不必等待响应。此时可以检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下：

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

1：启动。已经调用open（）方法，但尚未调用send（）方法。

2：发送。已经调用send（）方法，但尚未接收到响应。

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

4：完成，已经接收到全部响应数据，而且已经可以在客户端使用了。

只要readyState属性值有一个值变成另一个值，都会触发一下readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。通常我们只对readyState的值为4的阶段感兴趣，因为这时所有数据都已经就绪。不过，必须在地哦啊用open（）之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性，例如：

    var xhr=createXHR();
      xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                  if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
                        console.log(xhr.responseText);
                  }else{
                        console.log("Request was unsuccessful:"+xhr.status);
                  }
            }
      }
      xhr.open("get","example.php",false);
      xhr.send(null);

另外，在接收到响应之前还可以调用abort（）方法来取消异步请求：

    xhr.abort();

调用这个方法之后，XHR对象会停止触发事件，而且也不允许访问任何与响应有关的对象属性。在终止请求之后，还应该对XHR对象进行解引用操作。由于内存原因，不建议重用XHR对象。