我的聊天室

基于XMLHTTP的无刷新技术 关键词： XMLHTTP Javascript Ajax 无刷新 基于XMLHTTP的无刷新技术也就是现在网上比较火热和AJAX.最近将公司OA中原有的即时通讯功能利用些技术进行了优化. 公司OA中的即时通讯原来采用的窗口的定时刷新自动获取消息等信息,但采用这种技术的缺点很明显,不仅性能低下,而且由于需要频繁刷新页面,用户体验也差. 现将OA中的关于在线用户显示的模块为例来详细说明一下些种技术的实现: 实现此功能的所有文件包括:login.asp,online.asp,getonlineuser.asp login.asp程序执行一般的登陆操作,并将自身添加进在线用户表(onlineuser)中,这里不在详述. 用online.asp页来显示用户在线情况,主要显示在线人数,在线人员列表,离线人数,离线人员列表: 主要代码如下: -------------------------------------------------------------------------------- Dim rv ’以下代码是在页面加载时,生成所有用户列表的xml片段,之所以这样做我会在下面说明 rv=rv & "" strSql="Select * From Userinf Order By username" Set rs=conn.execute(strSql) While Not rs.Eof rv=rv & "" rs.movenext Wend rv=rv & "" rs.close:Set rs=Nothing var xmlDom var xmlDom = new ActiveXObject("Microsoft.XMLDOM"); //函数initList(),加载刚才生成的所有用户列表 function initList() { xmlDom.async=false; xmlDom.loadXML(""); } //函数updateList(),刷新在线情况显示 function updateList() { var root = xmlDom.documentElement; var obj=root.selectNodes("UserName[@On=’true’]"); onlinecount.innerHTML=obj.length; var nRow=online.rows.length; //清除当前所有列表 for(j=0;j { online.deleteRow(); } //刷新在线列表 for(var i=0;i { var b=online.insertRow(); var c=b.insertCell(); c.innerHTML=""+obj[i].getAttribute("Value")+""; } //刷新离线列表 obj=root.selectNodes("UserName[@On=’false’]"); offlinecount.innerHTML=obj.length; var nRow=offline.rows.length; for(j=0;j { offline.deleteRow(); } for(i=0;i { var b=offline.insertRow(); var c=b.insertCell(); c.innerHTML=""+obj[i].getAttribute("Value")+""; } } initList(); <!--下面是关键,也就是Ajax技术的核心--> var xml; xml="" //函数:getOnlineUser(),获取在线用户情况表 function getOnlineUser() { // 创建XMLHTTP对象 var oXmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); oXmlHttp.Open("POST", "http://yourdomain/getonlineuser.asp", false); oXmlHttp.setRequestHeader("Content-Type","text/xml"); oXmlHttp.Send(); if(oXmlHttp.status!="200") { alert("请求用户列表错误！"); } else { //oXmlHttp.responseText 以文本方式返回在线用户列表XML字符片段 //xmlhttp对象的返回方式有多种:如responseXML等 //同时,与原在线人员列表xml字符片段比较,如不同,则重新刷新在线人员显示 if(oXmlHttp.responseText!=xml) { xml=oXmlHttp.responseText; var xmldoc = new ActiveXObject("Microsoft.XMLDOM"); xmldoc.async=false; xmldoc.loadXML(xml); var rootElement = xmldoc.documentElement; var obj=rootElement.selectSingleNode("OnlineUser").childNodes; //更新在线人员列表 for(var i=0;i { var root=xmlDom.documentElement; var tempObj=root.selectNodes("UserName[@Value=’"+obj[i].text+"’]"); tempObj[0].setAttribute("On")="true"; } //刷新列表 updateList(); } //采用javascript的setTimeOut函数定时检测,这是无刷新的关键 window.setTimeout("getOnlineUser()",5000); } } getOnlineUser(); -------------------------------------------------------------------------------- 最后来看getonlineuser.asp文件: -------------------------------------------------------------------------------- Dim rv Dim rs,strSql ’更新当前用户的在线状态 strSql="Update onlineuser Set lastdate=’" & now & "’ Where userid=’" & username & "’" conn.execute(strSql) ’删除无活动用户 strSql="delete from OnlineUser where datediff(’n’,lastdate,now())>2" conn.execute(strSql) ’获取在线用户 strSql="Select * From OnlineUser Order By userid" Set rs=conn.execute(strSql) rv="" & vbCrlf rv=rv & "" & vbCrlf rv=rv & "" & vbCrlf While Not rs.Eof rv=rv & "" & trim(rs(1)) & "" & vbCrlf rs.movenext Wend rv=rv & "" & vbCrlf rs.close:Set rs=Nothing rv=rv & "" & vbCrlf ’返回xml文件至客户端给online.asp文件中的getOnlineUser()函数 Response.ContentType = "text/xml" Response.CharSet = "GB2312" response.write rv ’这里说明一下刚才在online.asp中为什么要获取所有用户的列表,一般情况下如需要获取离线用户表应在这个文件中使用sql语句从用户表中判断不在在线列表数据表中(这里为onlineuser)的用户即为离线,但这就又需要进行一次数据操作.根据观察这对性能影响非常大,因此,这里只返回在线用户,然后在客户端利用javascript来从所有用户xml文件中判断离线,大大分担了服务器的压力.