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

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

3. * XMLHttpRequest Object Pool  
4. *  
5. * @author legend <legendsky@hotmail.com>  
6. * @link http://www.ugia.cn/?p=85   
7. * @Copyright www.ugia.cn  
8. */   
9. var  XMLHttp = {  
10. _objPool: [],  
11. _getInstance: function  ()  
12. {  
13. for  ( var  i = 0; i <  this ._objPool.length; i ++)  
14. {  
15. if  ( this ._objPool[i].readyState == 0 ||  this ._objPool[i].readyState == 4)  
16. {  
17. return   this ._objPool[i];  
18. }  
19. }  
20. // IE5中不支持push方法   
21. this ._objPool[ this ._objPool.length] =  this ._createObj();  
22. return   this ._objPool[ this ._objPool.length - 1];  
23. },  
24. _createObj: function  ()  
25. {  
26. if  (window.XMLHttpRequest)  
27. {  
28. var  objXMLHttp =  new  XMLHttpRequest();  
29. }  
30. else   
31. {  
32. var  MSXML = [ 'MSXML2.XMLHTTP.5.0' ,  'MSXML2.XMLHTTP.4.0' ,  'MSXML2.XMLHTTP.3.0' ,  'MSXML2.XMLHTTP' ,  'Microsoft.XMLHTTP' ];  
33. for ( var  n = 0; n < MSXML.length; n ++)  
34. {  
35. try   
36. {  
37. var  objXMLHttp =  new  ActiveXObject(MSXML[n]);  
38. break ;  
39. }  
40. catch (e)  
41. {  
42. }  
43. }  
44. }   
45. // mozilla某些版本没有readyState属性   
46. if  (objXMLHttp.readyState ==  null )  
47. {  
48. objXMLHttp.readyState = 0;  
49. objXMLHttp.addEventListener("load" ,  function  ()  
50. {  
51. objXMLHttp.readyState = 4;  
52. if  ( typeof  objXMLHttp.onreadystatechange ==  "function" )  
53. {  
54. objXMLHttp.onreadystatechange();  
55. }  
56. }, false );  
57. }  
58. return  objXMLHttp;  
59. },  
60. // 发送请求(方法[post,get], 地址, 数据, 回调函数)   
61. sendReq: function  (method, url, data, callback)  
62. {  
63. var  objXMLHttp =  this ._getInstance();  
64. with (objXMLHttp)  
65. {  
66. try   
67. {  
68. // 加随机数防止缓存   
69. if  (url.indexOf( "?" ) > 0)  
70. {  
71. url += "&randnum="  + Math.random();  
72. }  
73. else   
74. {  
75. url += "?randnum="  + Math.random();  
76. }  
77. open(method, url, true );  
78. // 设定请求编码方式   
79. setRequestHeader('Content-Type' ,  'application/x-www-form-urlencoded; charset=UTF-8' );  
80. send(data);  
81. onreadystatechange = function  ()  
82. {  
83. if  (objXMLHttp.readyState == 4 && (objXMLHttp.status == 200 || objXMLHttp.status == 304))  
84. {  
85. callback(objXMLHttp);  
86. }  
87. }  
88. }  
89. catch (e)  
90. {  
91. alert(e);  
92. }  
93. }  
94. }  
95. };   
96.   
97.   
98. 示例：   
99.   
100. <mce:script type="text/javascript"  src= "xmlhttp.js"  mce_src= "xmlhttp.js" ></mce:script>  
101. <mce:script type="text/javascript" ><!--  
102. function  test(obj)  
103. {  
104. alert(obj.statusText);  
105. }  
106. XMLHttp.sendReq('GET' ,  'http://www.ugia.cn/wp-data/test.htm' ,  '' , test);  
107. XMLHttp.sendReq('GET' ,  'http://www.ugia.cn/wp-data/test.htm' ,  '' , test);  
108. XMLHttp.sendReq('GET' ,  'http://www.ugia.cn/wp-data/test.htm' ,  '' , test);  
109. XMLHttp.sendReq('GET' ,  'http://www.ugia.cn/wp-data/test.htm' ,  '' , test);  
110. alert('Pool length:'  + XMLHttp._objPool.length);  
111. // --></mce:script>