在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">
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>
demo 下载xmlhttp.js
查看更多关于AJAX中同时发送多个请求XMLHttpRequest对象处理方法的详细内容...
上一篇: Ajax实现无刷新三联动下拉框