利用XMLHTTP无刷新自动实时更新数据.

周珏 2009-08-07

展开全文

前些时间写了几篇关于XMLHTTP运用的实例.
　　(可以到http://dev.csdn.net/user/wanghr100看之前的几编关于XMLHTTP的介绍.)
　　近来看论坛上经常有人提问关于如何无刷新,自动更新数据.
　　传统上,我们浏览网页,如果加入最新的数据.只能是等我们重新向服务器端请求时才能显示出来.
　　但是,对于一些时效性很强的网站.传统的这种做法是不能满足的.
　　我们可以让程序自动刷新.定时向服务器请求数据.5秒取一次数据,10秒取一次数据.
　　利用XMLHTTP发出请求并取得数据.传到客户端,客户端重新组织并显示数据.
　　demo.htm 前台显示.
　　<script language="JavaScript">
　　function GetResult()
　　{
　　/*
　　*--------------- GetResult() -----------------
　　* GetResult()
　　* 功能:通过XMLHTTP发送请求,返回结果.
　　* 参数:str,字符串,发送条件.
　　* 实例:GetResult();
　　* author:wanghr100(灰豆宝宝.net)
　　* update:2004-5-27 19:02
　　*--------------- GetResult() -----------------
　　*/
　　 var oBao = new ActiveXObject("Microsoft.XMLHTTP");
　　 //特殊字符：+,%,&,=,?等的传输解决办法.字符串先用escape编码的.
　　 //Update:2004-6-1 12:22
　　 oBao.open("POST","Server.asp",false);
　　 oBao.send();
　　 //服务器端处理返回的是经过escape编码的字符串.
　　 var strResult = unescape(oBao.responseText);
　　 //将字符串分开.
　　 var arrResult = strResult.split("###");
　　 RemoveRow(); //删除以前的数据.
　　 //将取得的字符串分开,并写入表格中.
　　 for(var i=0;i<arrResult.length;i++)
　　 {
　　 arrTmp = arrResult[i].split("@@@");
　　 num1 = arrTmp[0]; //字段num1的值
　　 num2 = arrTmp[1]; //字段num2的值
　　 row1 = tb.insertRow();
　　 cell1 = row1.insertCell();
　　 cell1.innerText = num1;
　　 cell2 = row1.insertCell();
　　 cell2.innerText = num2;
　　 }
　　}
　　function RemoveRow()
　　{
　　 //保留第一行表头,其余数据均删除.
　　 var iRows = tb.rows.length;
　　 for(var i=0;i<iRows-1;i++)
　　 {
　　 tb.deleteRow(1);
　　 }
　　}
　　function MyShow()
　　{
　　 //2秒自动刷新一次,2秒取得一次数据.
　　 timer = window.setInterval("GetResult()",2000);
　　}
　　</script>
　　<body onload="MyShow()">
　　<p>
　　</p>
　　<table width="47%" height="23" border="0" cellpadding="1" cellspacing="0" id="tb">
　　 <tr>
　　 <td>num1</td>
　　 <td>num2</td>
　　 </tr>
　　</table>
　　Server.asp 后台读取数据
　　<% @Language="JavaScript" %>
　　<%
　　function OpenDB(sdbname)
　　{
　　/*
　　*--------------- OpenDB(sdbname) -----------------
　　* OpenDB(sdbname)
　　* 功能:打开数据库sdbname,返回conn对象.
　　* 参数:sdbname,字符串,数据库名称.
　　* 实例:var conn = OpenDB("database.mdb");
　　* author:wanghr100(灰豆宝宝.net)
　　* update:2004-5-12 8:18
　　*--------------- OpenDB(sdbname) -----------------
　　*/
　　 var connstr = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source="+Server.MapPath(sdbname);
　　 var conn = Server.CreateObject("ADODB.Connection");
　　 conn.Open(connstr);
　　 return conn;
　　}
　　var sResult = new Array();
　　var oConn = OpenDB("data.mdb");
　　//特殊字符：+,%,&,=,?等的传输解决办法.客户端字符是经过escape编码的
　　//所以服务器端先要经过unescape解码.
　　//Update:2004-6-1 12:22
　　var sql = "select num1,num2 from nums order by id";
　　var rs = oConn.Execute(sql);
　　while(!rs.EOF)
　　{
　　 //一条记录用"###"隔开.每列数据用"@@@"隔开. 这是以只有两个列数据的情况.
　　 sResult[sResult.length] = rs("num1").Value + "@@@" + rs("num2").Value
　　 rs.MoveNext();
　　}
　　//escape解决了XMLHTTP。中文处理的问题.
　　Response.Write(escape(sResult.join("###")));
　　%>
　　数据库data.mdb
　　表 nums
　　id,自动编号
　　num1,文本
　　num2,文本
　　测试数据
　　id num1 num2
　　1 20.70 20.810
　　2 10.5 20.5
　　3 12.3 300
　　4 132 323
　　5 563 56
　　6 20 10