好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

AJAX中同时发送多个请求XMLHttpRequest对象处理方法

在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> 

demo 下载xmlhttp.js

查看更多关于AJAX中同时发送多个请求XMLHttpRequest对象处理方法的详细内容...

  阅读:67次