XMLhttpRequest 封装

    部分资料来源于网上

    

    1、xmlhttp.js

       

/**

*用于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,asyn) {

var xhr = createXhr();

var listener = l;

var _asyn = asyn ;

if (!listener) {

listener = new RequestListener();

}

this.setListener = function (l) {

listener = l;

};

this.doGet = function (url) {

doProcess("GET", url, null, _asyn);

};

this.doPost = function (url, reqBody) {

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

}

}

}

/**

*用户接口

*/

function Ajax(__params){

var params = __params ;

var req    = null ;

this.set = function(_params){

params = _params ;

return this ;

} ;

this.send   = function(){

var method = getMethod() ;

if(method=='post'||method=='POST')

this.getRequest().doPost(params['url'],getReqBody()) ;

else if(method=='get'||method=='GET')

this.getRequest().doGet(getReqBody()) ;

};

this.getRequest = function(){

if(req!=null) return req ;

var l = new RequestAdapter();

if(params['handleText']) l.handleText = params['handleText'] ;

if(params['handleXML']) l.handleXML = params['handleXML'] ;

req =  new Request(l,params['asyn']);

return req ;

} ;

function getMethod(){

var method = params['method'] ;

if( !method )method = 'post' ;

return method ;

}

function getReqBody(){

var reqBody = params['reqBody'] ;

var queryString = "" ;

var method = getMethod() ;

if(method=='get'||method=='GET'){ 

queryString = params['url'] ;

if(queryString.indexOf("?")!=-1||queryString.indexOf("&")!=-1){

if(reqBody)queryString += "&" ;

}else{

if(reqBody)queryString += "?" ;

}

};

if(!reqBody) return queryString ;

var bool = false ;

for(var o in reqBody){

var key = o ;

var val = reqBody[key] ;

if(!bool)queryString += o+"="+val ;

else queryString += "&"+o+"="+val ; 

}

return queryString ;

};

}

       2、应用JSP

       <script language="javascript">

var ajax = new Ajax() ;

function autoComplete(obj){

document.getElementById("testAc_auto_complete").style.display = 'block' ;

ajax.set(

{

handleText:handler,

url:"component/aservlet.do",

asyn:true,

method:'get',

reqBody:{

proxyClass:'test.component.autocomplete.PersonService'

}

//"proxyClass=test.component.autocomplete.PersonService"

}

).send() ;

}

function handler(text){

alert(text) ;

var obj = eval(text) ;

alert(obj.length) ;

}

   </script>