对AJAX中XMLHttpRequest的封装

在AJAX编程中离不开对XMLHttpRequest对象的使用。XMLHttpRequest对象代表了浏览器和服务器之间的通讯，并可采用异步模式。浏览器通过XMLHttpRequest在后台发起请求，然后通过其属性onreadystatechange注册的回调函数来异步处理应答。编程步骤如下：

1. 创建XMLHttpRequest对象xhr；

2. 调用xhr的open方法打开资源；

3. 通过xhr的属性onreadystatechange注册回调函数;

4. 通过xhr的方法setRequestHeader设置相应请求头；

5. 调用xhr的send方法发起请求。

从上我们可以看到，编程步骤固定，在某些步骤中有些许的变化。由此我们可以联想到模板(template)和回调（callback）编程模式。在此处的回调依赖于xhr的状态变化，我们可以在模板与回调的基础之上采用观察者模式来封装，从而达到代码的从用和简化编程。

在这里，事件源实际上就是XMLHttpRequest的对象，我将它封装到Request类型；事件是XMLHttpRequest对象的状态readyState；而回调函数是事件处理器，我用RequestListener和RequestAdapter进行封装。一下是程序的代码:

/**

*用于XMLHttpRequest(xhr)回调, 根据xhr的readyState

*调用不同的函数

*/

function RequestListener(){    

 /*    

*当xhr.readyState = 0时调用    

*/

 this.uninitialized = function(){}

 /*    

*当xhr.readyState = 1时调用    

*/

 this.loading = function(){}

 /*    

 *当xhr.readyState = 2时调用    

*/  

this.loaded = function(){}

 /*    

*当xhr.readyState = 3时调用    

*/

 this.interactive = function(){}  

/*    

*当xhr.readyState = 4时调用    

*/  

this.complete = function(status, statusText,      responseText, responseXML){} }

/**

*RequestListener的子类型,用于扩展complet方法,

*当HTTP(xhr.status)应答状态为200时, 调用handleText和handleXML

*处理应答体;当状态为其它时,调用handleError.

 */

function RequestAdapter(){  

this.complete = function(status, statusText,       responseText, responseXML){   

 if(status == 200){    

    this.handleText(responseText);   

    this.handleXML(responseXML);   

 }else{   

    this.handleError(status, statusText);  

 }

 }  

  this.handleText = function(text){}  

this.handleXML = function(xml){}

 this.handleError = function(status, statusText){   alert("Http status: " + status + " , " + statusText);  }

}

RequestAdapter.prototype = new RequestListener();

 RequestAdapter.prototype.constructor = RequestAdapter;

/**

*封装XMLHttpRequest,回调RequestListener的不同方法处理

*不同的应答状态.对外提供doGet, doPost方法处理不同方式的请求.

*使用例子如下:

* var l = new RequestAdapter();

* l.handleText = function(text){alert(text);}

* var req = new Request(l);

* req.doGet("hello.jsp");

*/

function Request(l){  

  var xhr = createXhr();  

   var listener = l;  

   if(!listener){   listener = new RequestListener();  }    

   this.setListener = function(l){listener = l;}  

   this.doGet = function(url, asyn){   doProcess("GET", url, null, asyn);  }

   this.doPost = function(url, reqBody, asyn){   doProcess("POST", url, reqBody, asyn);  }  

   function doProcess(method, url, reqBody, asyn){   

       if(asyn == undefined){     asyn = true   }  

      xhr.open(method, url, asyn);   

     if(asyn){    xhr.onreadystatechange = callback;   }  

     xhr.setRequestHeader("Content-Type",     "application/x-www-form-urlencoded");  

      xhr.send(reqBody);   

    if(!asyn){     listener.complete(xhr.status, xhr.statusText, xhr.responseText, xhr.responseXML);   }

   }  

   function callback(){   

     switch(xhr.readyState){   

           case 0: listener.uninitialized(); break;    

          case 1: listener.loading(); break;    

          case 2: listener.loaded(); break;    

          case 3: listener.interactive(); break;    

         case 4: listener.complete(xhr.status, xhr.statusText, xhr.responseText, xhr.responseXML);   

     }

   }

}

 

function createXhr(){  

   if(window.ActiveXObject){   

        return new ActiveXObject("Microsoft.XMLHTTP");  

        }else if(window.XMLHttpRequest){   

          return new XMLHttpRequest();  

         }else{   throw new Error("Does not ajax programming");  }

 }