构建一个pool来管理无刷新页面的xmlhttp对象

    技术2022-05-11  93

    构建一个pool来管理无刷新页面的xmlhttp对象

        在页面上使用ActiveXObject的代价是很大的,如果我们的无刷新页面使用xmlhttp技术,我们或许需要频繁的建立xmlhttp对象,当然我们也可以使用全局变量来cache一个xmlhttp对象实例。但是这样的方法适合于同步方式xmlhttp通信,而对于异步方式xmlhttp通信将会出现问题。由于没有了进程的堵塞,用户可能再次调用同一个xmlhttp实例,如果这时前一个通信未完成,那么就失败了。     建立一个pool来管理页面上的xmlhttp对象实例,最明显的好处就是不会再创建冗余对象,同时也不会出现多个操作在同一个工作的xmlhttp实例上被调用的情况。     具体实现,我们使用一个Array作为pool来存储已创建的xmlhttp对象实例,然后每次调用从pool中去取一个实例。xmlhttp实例通讯完毕后我们不用做任何处置,因为它自身的readyState属性可以标识出它是否可用,如果当时没有空闲的xmlhttp实例,且pool中的实例数小于m_MaxPoolLength,那么就创建一个新的实例并放入pool中。pool的实现代码如下:

    #region __XmlHttpPool__源码 var __XmlHttpPool__ = {     m_MaxPoolLength : 10,     m_XmlHttpPool : [],          __requestObject : function()     {         var xmlhttp = null;         var pool = this.m_XmlHttpPool;         for ( var i=0 ; i < pool.length ; ++i )         {             if ( pool[i].readyState == 4 || pool[i].readyState == 0 )             {                 xmlhttp = pool[i];                 break;             }         }         if ( xmlhttp == null )         {             return this.__extendPool();         }         return xmlhttp;     },          __extendPool : function()     {         if ( this.m_XmlHttpPool.length < this.m_MaxPoolLength )         {             var xmlhttp = null;             try             {                 xmlhttp = new ActiveXObject('MSXML2.XMLHTTP');             }             catch(e)             {                 try                 {                     xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');                 }                 catch(e2) {}             }             if ( xmlhttp )             {                 this.m_XmlHttpPool.push(xmlhttp);             }             return xmlhttp;         }     },          GetRemoteData : function(url, callback)     {         this.__receiveRemoteData(url, callback, 'GET', null);     },          PostRemoteData : function(url, callback, data)     {         this.__receiveRemoteData(url, callback, 'POST', data);     },          __receiveRemoteData : function(url, callback, httpmethod, data)     {         var xmlhttp = this.__requestObject();         if ( !xmlhttp )         {             return null;         }         xmlhttp.open(httpmethod, url, true);         xmlhttp.onreadystatechange = function()         {             if ( xmlhttp.readyState == 4 || xmlhttp.readyState == 'complete' )             {                 callback(xmlhttp.responseText);             }         };         xmlhttp.send(data);     } };  #endregion

        __XmlHttpPool__提供了两个方法来和服务器通信,一个使用'GET'方法,一个使用'POST'方法,使用它们非常简单,__XmlHttpPool__.GetRemoteData(url, callback)或__XmlHttpPool__.PostRemoteData(url, callback, data)。其中url是服务器地址,callback是处理返回数据(responseText)的回调函数。比如:

    < scrip language ="javascript" > __XmlHttpPool__.PostRemoteData(url, Render, 'abc'); function  Render(string) {      if  ( string )     {         txbContent.value  +=  string  +  '/r/n';     } } </scirpt> <textarea rows="40" style="width:100%" id="txbContent"></textarea>  

    最新回复(0)