AJAX中同時發送多個請求(并發)對象處理方法

在javascript:;" rel="nofollow" onClick="javascript:tagshow(event, 'ajax');" target="_self">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>?

本面試題為前端常考面試題，后續有機會繼續完善。我是歌謠，一個沉迷于故事的講述者。

歡迎一起私信交流。

“睡服“面試官系列之各系列目錄匯總（建議學習收藏）?

總結

以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题之第八十七篇之ajax发送多个请求优化（建议收藏）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。