建一個(gè)XMLHttpRequest對(duì)象池
更新時(shí)間:2007年04月10日 00:00:00 作者:
作者:legend
出處:http://www.ugia.cn/?p=85
在ajax應(yīng)用中,通常一個(gè)頁(yè)面要同時(shí)發(fā)送多個(gè)請(qǐng)求,如果只有一個(gè)XMLHttpRequest對(duì)象,前面的請(qǐng)求還未完成,后面的就會(huì)把前面的覆蓋掉,如果每次都創(chuàng)建一個(gè)新的XMLHttpRequest對(duì)象,也會(huì)造成浪費(fèi)。解決的辦法就是創(chuàng)建一個(gè)XMLHttpRequset的對(duì)象池,如果池里有空閑的對(duì)象,則使用此對(duì)象,否則將創(chuàng)建一個(gè)新的對(duì)象。
下面是我最近寫(xiě)的一個(gè)簡(jiǎn)單的類:
/**
* 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某些版本沒(méi)有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;
},
// 發(fā)送請(qǐng)求(方法[post,get], 地址, 數(shù)據(jù), 回調(diào)函數(shù))
sendReq: function (method, url, data, callback)
{
var objXMLHttp = this._getInstance();
with(objXMLHttp)
{
try
{
// 加隨機(jī)數(shù)防止緩存
if (url.indexOf("?") > 0)
{
url += "&randnum=" + Math.random();
}
else
{
url += "?randnum=" + Math.random();
}
open(method, url, true);
// 設(shè)定請(qǐng)求編碼方式
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>
出處:http://www.ugia.cn/?p=85
在ajax應(yīng)用中,通常一個(gè)頁(yè)面要同時(shí)發(fā)送多個(gè)請(qǐng)求,如果只有一個(gè)XMLHttpRequest對(duì)象,前面的請(qǐng)求還未完成,后面的就會(huì)把前面的覆蓋掉,如果每次都創(chuàng)建一個(gè)新的XMLHttpRequest對(duì)象,也會(huì)造成浪費(fèi)。解決的辦法就是創(chuàng)建一個(gè)XMLHttpRequset的對(duì)象池,如果池里有空閑的對(duì)象,則使用此對(duì)象,否則將創(chuàng)建一個(gè)新的對(duì)象。
下面是我最近寫(xiě)的一個(gè)簡(jiǎn)單的類:
復(fù)制代碼 代碼如下:
/**
* 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某些版本沒(méi)有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;
},
// 發(fā)送請(qǐng)求(方法[post,get], 地址, 數(shù)據(jù), 回調(diào)函數(shù))
sendReq: function (method, url, data, callback)
{
var objXMLHttp = this._getInstance();
with(objXMLHttp)
{
try
{
// 加隨機(jī)數(shù)防止緩存
if (url.indexOf("?") > 0)
{
url += "&randnum=" + Math.random();
}
else
{
url += "?randnum=" + Math.random();
}
open(method, url, true);
// 設(shè)定請(qǐng)求編碼方式
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);
}
}
}
};
示例:
復(fù)制代碼 代碼如下:
<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>
您可能感興趣的文章:
- CocosCreator如何實(shí)現(xiàn)劃過(guò)的位置顯示紋理
- 整理CocosCreator常用知識(shí)點(diǎn)
- 全面講解CocosCreator熱更新
- CocosCreator經(jīng)典入門(mén)項(xiàng)目之flappybird
- CocosCreator通用框架設(shè)計(jì)之網(wǎng)絡(luò)
- 如何用CocosCreator實(shí)現(xiàn)射擊小游戲
- Java基于Semaphore構(gòu)建阻塞對(duì)象池
- 深度剖析C++對(duì)象池自動(dòng)回收技術(shù)實(shí)現(xiàn)
- java設(shè)計(jì)模式之實(shí)現(xiàn)對(duì)象池模式示例分享
- 如何使用CocosCreator對(duì)象池
相關(guān)文章
ajax與websocket的區(qū)別以及websocket常用使用方式 介紹
這篇文章主要介紹了ajax與websocket的區(qū)別以及websocket常用使用方式 介紹,需要的朋友可以參考下2018-06-06關(guān)于ajax異步訪問(wèn)數(shù)據(jù)的問(wèn)題
這篇文章主要介紹了ajax異步訪問(wèn)數(shù)據(jù)的問(wèn)題,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-08-08ajax原理總結(jié)附簡(jiǎn)單實(shí)例及其優(yōu)點(diǎn)
在工作中用了Ajax N多次了,也看過(guò)一些相關(guān)方面的書(shū)籍,也算是認(rèn)識(shí)了它,本文對(duì)ajax原理坐下總結(jié),需要的朋友可以參考下2014-04-04ajax請(qǐng)求后臺(tái)接口數(shù)據(jù)與返回值處理js的實(shí)例講解
今天小編就為大家分享一篇ajax請(qǐng)求后臺(tái)接口數(shù)據(jù)與返回值處理js的實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08Ajax bootstrap美化網(wǎng)頁(yè)并實(shí)現(xiàn)頁(yè)面的加載刪除與查看詳情
Bootstrap是Twitter推出的一個(gè)開(kāi)源的用于前端開(kāi)發(fā)的工具包,Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范,它即是由動(dòng)態(tài)CSS語(yǔ)言Less寫(xiě)成。下面通過(guò)本文給大家介紹Ajax bootstrap美化網(wǎng)頁(yè)并實(shí)現(xiàn)頁(yè)面的加載刪除與查看詳情,需要的朋友可以參考下2017-03-03Ajax請(qǐng)求中的異步與同步,需要注意的地方說(shuō)明
默認(rèn)設(shè)置下,所有請(qǐng)求均為異步請(qǐng)求。如果需要發(fā)送同步請(qǐng)求,請(qǐng)將此選項(xiàng)設(shè)置為 false。注意,同步請(qǐng)求將鎖住瀏覽器,用戶其它操作必須等待請(qǐng)求完成才可以執(zhí)行2012-04-04