[转]建一个XmlHttpRequest对象池

引用自:http://www.ugia.cn/?p=85
作者:Legend

在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
  9var 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
110示例: 
111
112<script type="text/javascript" src="xmlhttp.js"></script>
113<script type="text/javascript">
114function test(obj)
115{
116    alert(obj.statusText);
117}

118
119XMLHttp.sendReq('GET', 'http://www.ugia.cn/wp-data/test.htm', '', test);
120XMLHttp.sendReq('GET', 'http://www.ugia.cn/wp-data/test.htm', '', test);
121XMLHttp.sendReq('GET', 'http://www.ugia.cn/wp-data/test.htm', '', test);
122XMLHttp.sendReq('GET', 'http://www.ugia.cn/wp-data/test.htm', '', test);
123
124alert('Pool length:' + XMLHttp._objPool.length);
125</script>  
126
posted @ 2007-09-02 17:40  Stanley.Luo  阅读(296)  评论(0编辑  收藏  举报