[转]建一个XMLHttpRequest对象池

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

下面是我最近写的一个简单的类：

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

示例：

 1 <script type="text/javascript" src="xmlhttp.js"></script>
 2 <script type="text/javascript">
 3 function test(obj)
 4 {
 5     alert(obj.statusText);
 6 }
 7 
 8 XMLHttp.sendReq('GET', 'http://www.ugia.cn/wp-data/test.htm', '', test);
 9 XMLHttp.sendReq('GET', 'http://www.ugia.cn/wp-data/test.htm', '', test);
10 XMLHttp.sendReq('GET', 'http://www.ugia.cn/wp-data/test.htm', '', test);
11 XMLHttp.sendReq('GET', 'http://www.ugia.cn/wp-data/test.htm', '', test);
12 
13 alert('Pool length:' + XMLHttp._objPool.length);
14 </script>  
15