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

}