构建一个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的实现代码如下:
__XmlHttpPool__源码 #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)的回调函数。比如:
< script 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>