AJAX中同时发送多个请求XMLHttpRequest对象处理方法

在ajax应用中，通常一个页面要同时发送多个请求，如果只有一个XMLHttpRequest对象，前面的请求还未完成，后面的就会把前面的覆盖
掉，如果每次都创建一个新的XMLHttpRequest对象，也会造成浪费。解决的办法就是创建一个XMLHttpRequset的对象池，如果池里有
空闲的对象，则使用此对象，否则将创建一个新的对象。

* XMLHttpRequest Object Pool  

*  

* @author legend <legendsky@hotmail.com>  

* @link http://www.ugia.cn/?p=85
  

* @Copyright www.ugia.cn  

*/   

var
 XMLHttp = {  

_objPool: [],  

_getInstance: function
 ()  

{  

for
 (
var
 i = 0; i < 
this
._objPool.length; i ++)  

{  

if
 (
this
._objPool[i].readyState == 0 || 
this
._objPool[i].readyState == 4)  

{  

return
 
this
._objPool[i];  

}  

}  

// IE5中不支持push方法
  

this
._objPool[
this
._objPool.length] = 
this
._createObj();  

return
 
this
._objPool[
this
._objPool.length - 1];  

},  

_createObj: function
 ()  

{  

if
 (window.XMLHttpRequest)  

{  

var
 objXMLHttp = 
new
 XMLHttpRequest();  

}  

else
  

{  

var
 MSXML = [
'MSXML2.XMLHTTP.5.0'
, 
'MSXML2.XMLHTTP.4.0'
, 
'MSXML2.XMLHTTP.3.0'
, 
'MSXML2.XMLHTTP'
, 
'Microsoft.XMLHTTP'
];  

for
(
var
 n = 0; n < MSXML.length; n ++)  

{  

try
  

{  

var
 objXMLHttp = 
new
 ActiveXObject(MSXML
);  

break
;  

}  

catch
(e)  

{  

}  

}  

}   

// mozilla某些版本没有readyState属性
  

if
 (objXMLHttp.readyState == 
null
)  

{  

objXMLHttp.readyState = 0;  

objXMLHttp.addEventListener("load"
, 
function
 ()  

{  

objXMLHttp.readyState = 4;  

if
 (
typeof
 objXMLHttp.onreadystatechange == 
"function"
)  

{  

objXMLHttp.onreadystatechange();  

}  

}, false
);  

}  

return
 objXMLHttp;  

},  

// 发送请求(方法[post,get], 地址, 数据, 回调函数)
  

sendReq: function
 (method, url, data, callback)  

{  

var
 objXMLHttp = 
this
._getInstance();  

with
(objXMLHttp)  

{  

try
  

{  

// 加随机数防止缓存
  

if
 (url.indexOf(
"?"
) > 0)  

{  

url += "&randnum="
 + Math.random();  

}  

else
  

{  

url += "?randnum="
 + Math.random();  

}  

open(method, url, true
);  

// 设定请求编码方式
  

setRequestHeader('Content-Type'
, 
'application/x-www-form-urlencoded; charset=UTF-8'
);  

send(data);  

onreadystatechange = function
 ()  

{  

if
 (objXMLHttp.readyState == 4 && (objXMLHttp.status == 200 || objXMLHttp.status == 304))  

{  

callback(objXMLHttp);  

}  

}  

}  

catch
(e)  

{  

alert(e);  

}  

}  

}  

};   

  

  

示例：   

  

<mce:script type="text/javascript"
 src=
"xmlhttp.js"
 mce_src=
"xmlhttp.js"
></mce:script>  

<mce:script type="text/javascript"
><!--  

function
 test(obj)  

{  

alert(obj.statusText);  

}  

XMLHttp.sendReq('GET'
, 
'http://www.ugia.cn/wp-data/test.htm'
, 
''
, test);  

XMLHttp.sendReq('GET'
, 
'http://www.ugia.cn/wp-data/test.htm'
, 
''
, test);  

XMLHttp.sendReq('GET'
, 
'http://www.ugia.cn/wp-data/test.htm'
, 
''
, test);  

XMLHttp.sendReq('GET'
, 
'http://www.ugia.cn/wp-data/test.htm'
, 
''
, test);  

alert('Pool length:'
 + XMLHttp._objPool.length);  

// --></mce:script>