Ajax入门 基础概念与方法

 

 

XMLHttpRequest对象

 

除IE以外所有的浏览器都支持直接使用XMLHttpRequest对象。而IE是通过创建ActiveXObject来创建类似的对象。这里给出一种包装方法使得IE5以上的IE版本也能具有XMLHttpRequest对象，这样我们在使用XMLHttpRequest对象的时候可以使用同一的创建方法：

 

（来自《精通JavaScript》）

if  ( typeof  XMLHttpRequest  ==   ' undefined ' ) {
    XMLHttpRequest  =   function () {
         return   new  ActiveXObject(
            navigator.userAgent.indexOf( " MSIE 5 " )  >=   0   ?   " Microsoft.XMLHTTP "  :  " Msxml2.XMLHTTP "
        );
    }
}

 

发送请求

 

GET请求

 

只支持发送串行化数据（下文会有具体例子）

 

以下是GET请求发送的简单例子

 

     //  创建对象
     var  xml  =   new  XMLHttpRequest();
     //  初始化
    xml.open( " GET " ,  " test.html " ,  true );
     //  发送
    xml.send();

 

POST请求

 

POST请求发送方式与GET请求发送方式类似，下文具体。

 

请求状态

 

我们可以通过XMLHttpRequest对象中的readyState监视请求的状态。readyState是一个整型值，各自代表的状态是：

 

0 = 未初始化

1 = 已初始化 （有些书将此状态注为下载，实际测试发现初始化后、未发送请求之前，状态已经修改为1）

2 = 下载已完成

3 = 交互的（响应被部分接收）

4 = 完成

 

在我们的Ajax应用中，一般只需要使用4-完成状态。

 

当请求状态变化时，会触发onreadystatechange事件，我们处理ajax响应就是为这个事件绑定处理函数。

 

客户端完整示例

 

以下结合上述内容，写一个完整的客户端ajax示例

 

     var  xml  =   new  XMLHttpRequest();
    
     //  未初始化 xml.readyState 为 0
    xml.open( " POST " ,  " test.html " ,  true );
     //  已初始化 xml.readyState 为 1
    
    xml.setRequestHeader( " Content-Type " ,  " application/x-www-form-urlencoded " );
     if  (xml.overrideMimeType)
        xml.setRequestHeader( " Connection " ,  " close " );
    
     //  绑定状态变化事件处理函数
    xml.onreadystatechange  =   function () {
        alert(xml.readyState);
    }
    
    xml.send( " abc " );

 

数据对象的格式

 

根据数据对象的特点，我们可以选择合适的发送方式。

 

串行化

 

利用HTTP GET标准请求，即类似: http://www.zhengchuyu.cn/?name=zcy&nick=donald 的传输方式。

 

我们需要有一个串行化函数，并且是针对表单元素和键值对对象设计的。（不能串行化多选按钮）

 

function  serialize(a) {
     var  s  =  [];
     if  (a.constructor  ==  Array) {
         //  表单元素数组
         for  ( var  i  =   0 ; i  <  a.length; i ++ ) {
            s.push( a[i].name  +   " = "   +  encodeURIComponent(a[i].value));
        }
    }
     else  {
         //  键值对对象
         for  ( var  j  in  a)
            s.push(j  +   " = "   +  encodeURIComponent(a[j]));
    }
     return  s.join( " & " );
}

 

GET请求发送串行化数据

 

     var  xml  =   new  XMLHttpRequest();
    xml.open( " GET " ,  " test.html? "   +  serialize(data),  true );
    xml.send();

 

POST请求发送串行化数据

 

     var  xml  =   new  XMLHttpRequest();
    xml.open( " POST " ,  " test.html " ,  true );
     //  设置content-type头部信息，告诉服务器如何解析我们发送的数据
    xml.setRequestHeader( " Content-Type " ,  " application/x-www-form-urlencoded " );
     //  保证浏览器发送的串行化数据长度正确
     if  (xml.overrideMimeType)
        xml.setRequestHeader( " Connection " ,  " close " );
     //  串行化数据发送
    xml.send(serialize(data));

 

xml

 

后文详述。 

 

json

 

后文详述

 

HTTP响应

 

上文已经提到可以通过判断readyState的值得知请求状态，我们可以知道客户端是否已经获得了服务器响应。但是服务器并不是每一次都能正常响应，这时我们需要通过服务器响应代码（保存在返回结果对象的status变量中）判断响应情况。

 

状态码

 

成功响应 200～300

未修改响应 304

本地文件 无状态码

 

另外有一个特殊情况（来自《精通JavaScript》，没有验证），Safari浏览器中，如果文档自上次请求未曾修改过，会返回状态码“undefined”，比较怪异。

 

以下给出一判断XMLHttpRequest对象是否处于成功响应状态的兼容函数

 

function  httpSuccess(r) {
     try  {
         return   ! r.status  &&  location.protocol  ==   " file: "  
             ||  (r.status  >=   200   &&  r.status  <   300 ) 
             ||  r.status  ==   304
             ||  navigator.userAgent.indexOf( " Safari " )  >=   0   &&   typeof  r.status  ==   " undefined " ;
    }
     catch (e) {
         return   false ;
    }
}

 

超时检查

 

超时检查比较简单，就是用一个变量记录是否超时，在send发送之前用一个setTimeout设定在某个时间段后把该变量标记为超时，并在状态改变响应函数中检测这一变量就行了。 

 

服务器返回数据

 

服务器可以返回任何格式的数据。一般比较常用的是XML、HTML、JavaScript/JSON。

 

获取数据

 

获取数据通过XMLHttpRequest的两个重要属性：responseXML和responseText。

 

responseXML 可以获取XML，即服务器明确指出“Content-Type:text/xml”时才可以由这个属性获取。

responseText 可以获取HTML和JavaScript类型的数据。

 

指定类型解析数据

 

以下是一个按指定类型解析数据的函数

 

（来自《精通JavaScript》，为了便于理解，稍有改动） 

 

//  type可选值：xml, script, text, html 默认值：空
function  httpData(r, type) {
     var  ct  =  r.getResponseHeader( " content-type " );
     var  data  =   ! type  &&  ct  &&  ct.indexOf( " xml " )  >=   0 ;
    data  =  (type  ==   " xml "   ||  data)  ?  r.responseXML : r.responseText;
     if  (type  ==   " script " )
        eval.call(window, data);
     return  data;
}