在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");  }

 }