[转]建一个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
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