利用XMLHTTP無刷新自動實時更新數據.
前些時間寫了幾篇關於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
推薦閱讀：
