利用XMLHTTP無刷新自動實時更新數據.

周玨 2009-08-07

展開全文

前些時間寫了幾篇關于XMLHTTP運用的實例.
　　(可以到http://dev.csdn.net/user/wanghr100看之前的幾編關于XMLHTTP的介紹.)
　　近來看論壇上經常有人提問關于如何無刷新,自動更新數據.
　　傳統(tǒng)上,我們?yōu)g覽網頁,如果加入最新的數據.只能是等我們重新向服務器端請求時才能顯示出來.
　　但是,對于一些時效性很強的網站.傳統(tǒng)的這種做法是不能滿足的.
　　我們可以讓程序自動刷新.定時向服務器請求數據.5秒取一次數據,10秒取一次數據.
　　利用XMLHTTP發(fā)出請求并取得數據.傳到客戶端,客戶端重新組織并顯示數據.
　　demo.htm 前臺顯示.
　　<script language="JavaScript">
　　function GetResult()
　　{
　　/*
　　*--------------- GetResult() -----------------
　　* GetResult()
　　* 功能:通過XMLHTTP發(fā)送請求,返回結果.
　　* 參數:str,字符串,發(fā)送條件.
　　* 實例: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