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

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

3. * XMLHttpRequest Object Pool  
4. *  
5. * @author legend <[e-mail]>  
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>