在ajax應用中，通常一個頁面要同時發送多個請求，如果只有一個XMLHttpRequest對象，前面的請求還未完成，后面的就會把前面的覆蓋掉，如果每次都創建一個新的XMLHttpRequest對象，也會造成浪費。解決的辦法就是創建一個XMLHttpRequset的對象池，如果池里有空閑的對象，則使用此對象，否則將創建一個新的對象。
下面是我最近寫的一個簡單的類：
/**
?*?XMLHttpRequest?Object?Pool
?*
?*?@author????legend?<legendsky@hotmail.com>
?*?@link??????http://www.ugia.cn/?p=85
?*?@Copyright?www.ugia.cn
?*/?
var?
XMLHttp?
=?{
????
_objPool
:?[],
????
_getInstance
:?function?()
????{
????????for?(var?
i?
=?
0
;?
i?
<?
this
.
_objPool
.
length
;?
i?
++)
????????{
????????????if?(
this
.
_objPool
[
i
].
readyState?
==?
0?
||?
this
.
_objPool
[
i
].
readyState?
==?
4
)
????????????{
????????????????return?
this
.
_objPool
[
i
];
????????????}
????????}
????????
//?IE5中不支持push方法
????????
this
.
_objPool
[
this
.
_objPool
.
length
]?=?
this
.
_createObj
();
????????return?
this
.
_objPool
[
this
.
_objPool
.
length?
-?
1
];
????},
????
_createObj
:?function?()
????{
????????if?(
window
.
XMLHttpRequest
)
????????{
????????????var?
objXMLHttp?
=?new?
XMLHttpRequest
();
????????}
????????else
????????{
????????????var?
MSXML?
=?[
'MSXML2.XMLHTTP.5.0'
,?
'MSXML2.XMLHTTP.4.0'
,?
'MSXML2.XMLHTTP.3.0'
,?
'MSXML2.XMLHTTP'
,?
'Microsoft.XMLHTTP'
];
????????????for(var?
n?
=?
0
;?
n?
<?
MSXML
.
length
;?
n?
++)
????????????{
????????????????
try
????????????????
{
????????????????????var?
objXMLHttp?
=?new?
ActiveXObject
(
MSXML
[
n
]);
????????????????????break;
????????????????}
????????????????
catch
(
e
)
????????????????{
????????????????}
????????????}
?????????}??????????
????????
//?mozilla某些版本沒有readyState屬性
????????
if?(
objXMLHttp
.
readyState?
==?
null
)
????????{
????????????
objXMLHttp
.
readyState?
=?
0
;
????????????
objXMLHttp
.
addEventListener
(
"load"
,?function?()
????????????????{
????????????????????
objXMLHttp
.
readyState?
=?
4
;
????????????????????if?(
typeof?objXMLHttp
.
onreadystatechange?
==?
"function"
)
????????????????????{
????????????????????????
objXMLHttp
.
onreadystatechange
();
????????????????????}
????????????????},??
false
);
????????}
????????return?
objXMLHttp
;
????},
????
//?發送請求(方法[post,get],?地址,?數據,?回調函數)
????
sendReq
:?function?(
method
,?
url
,?
data
,?
callback
)
????{
????????var?
objXMLHttp?
=?
this
.
_getInstance
();
????????
with
(
objXMLHttp
)
????????{
????????????
try
????????????
{
????????????????
//?加隨機數防止緩存
????????????????
if?(
url
.
indexOf
(
"?"
)?>?
0
)
????????????????{
????????????????????
url?
+=?
"&randnum="?
+?
Math
.
random
();
????????????????}
????????????????else
????????????????{
????????????????????
url?
+=?
"?randnum="?
+?
Math
.
random
();
????????????????}
????????????????
open
(
method
,?
url
,?
true
);
????????????????
//?設定請求編碼方式
????????????????
setRequestHeader
(
'Content-Type'
,?
'application/x-www-form-urlencoded;?charset=UTF-8'
);
????????????????
send
(
data
);
????????????????
onreadystatechange?
=?function?()
????????????????{
????????????????????if?(
objXMLHttp
.
readyState?
==?
4?
&&?(
objXMLHttp
.
status?
==?
200?
||?
objXMLHttp
.
status?
==?
304
))
????????????????????{
????????????????????????
callback
(
objXMLHttp
);
????????????????????}
????????????????}
????????????}
????????????
catch
(
e
)
????????????{
????????????????
alert
(
e
);
????????????}
????????}
????}
};?
示例：
<
script?type
=
"text/javascript"?
src
=
"xmlhttp.js"
>
</script>
<script?type="text/javascript">
function?test(obj)
{
????alert(obj.statusText);
}
XMLHttp.sendReq('GET',?'http://www.ugia.cn/wp-data/test.htm',?'',?test);
XMLHttp.sendReq('GET',?'http://www.ugia.cn/wp-data/test.htm',?'',?test);
XMLHttp.sendReq('GET',?'http://www.ugia.cn/wp-data/test.htm',?'',?test);
XMLHttp.sendReq('GET',?'http://www.ugia.cn/wp-data/test.htm',?'',?test);
alert('Pool?length:'?+?XMLHttp._objPool.length);
</script>?
源代碼里有中文的注釋，是ansi的，如果你的網站或ie下選擇編碼為UTF-8,可能會導致錯誤，你把你ie的編碼改成gb2312看看，或者去掉文件里的中文注釋
posted on 2006-11-18 13:38
kelven 閱讀(422)
評論(1) 編輯 收藏 所屬分類:
Ajax