posts - 22,comments - 35,trackbacks - 0

在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 
0 this . _objPool . length ++)
        {
            if (
this . _objPool [ i ]. readyState  ==  ||  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 
0 MSXML . length ++)
            {
                
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  ==  && ( 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 阅读(406) 评论(1)  编辑  收藏 所属分类: Ajax

FeedBack:
# re: XMLHttpRequest对象池
2008-03-07 15:16 | wq
不错




Java架构俱乐部,QQ群2826942 ,交流Java架构,领域模型,设计模式,AOP,IOC,轻量级,DDD,项目管理,设计思想等问题,聚集经验丰富的高级程序员,架构师,项目经理等交流以上层面较高的问题。欢迎各位有识之士加入,共同探讨、发表高见、广结精英。为了使各位成员免受无聊信息和低端问题的打扰,请尽量避免讨论代码实现等入门级问题,维护本群的氛围和讨论质量。新手勿加  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: