XMLHTTP 無刷新自動即時更新數據：完整前後端代碼實現

應用場景

時效性極強的頁面（股票報價、監控儀表板、即時日誌）無法靠用戶手動刷新，需客戶端定時自動向伺服器拉取最新數據並無感知更新 DOM。

前端實現

<script language="JavaScript">
var timer;
var tb; // 表格引用

function GetResult() {
    var oBao = new ActiveXObject("Microsoft.XMLHTTP"); // IE 專用範例
    oBao.open("POST", "Server.asp", false); // 同步為演示簡化，生產建議非同步
    oBao.send();
    var strResult = unescape(oBao.responseText); // 伺服端 escape 編碼
    var arrResult = strResult.split("###"); // 記錄分隔符
    RemoveRow(); // 清除舊數據（保留表頭）
    for (var i = 0; i < arrResult.length; i++) {
        var arrTmp = arrResult[i].split("@@@"); // 欄位分隔符
        var num1 = arrTmp[0];
        var num2 = arrTmp[1];
        var row = tb.insertRow();
        row.insertCell().innerText = num1;
        row.insertCell().innerText = num2;
    }
}

function RemoveRow() {
    var iRows = tb.rows.length;
    for (var i = 0; i < iRows - 1; i++) tb.deleteRow(1);
}

function MyShow() {
    timer = window.setInterval("GetResult()", 2000); // 2 秒輪詢
}

window.onload = function() {
    tb = document.getElementById("tb");
    MyShow();
};
</script>

<body>
<table id="tb" border="0" cellpadding="1" cellspacing="0">
  <tr><td>num1</td><td>num2</td></tr>
</table>
</body>

後端實現

<%@ Language="JavaScript" %>
<%
function 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 oConn = OpenDB("data.mdb");
var sql = "SELECT num1, num2 FROM nums ORDER BY id";
var rs = oConn.Execute(sql);
var sResult = [];

while (!rs.EOF) {
    // 記錄用 ### 分隔，欄位用 @@@ 分隔
    sResult.push(rs("num1").Value + "@@@" + rs("num2").Value);
    rs.MoveNext();
}

// escape 解決中文傳輸問題
Response.Write(escape(sResult.join("###")));
%>

資料庫結構

測試數據

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

關鍵技術點總結

• 同步 vs 非同步：範例用同步簡化邏輯，生產環境必須改非同步避免阻塞 UI。
• 分隔符設計：雙層分隔符（記錄/欄位）簡化解析，實際專案建議改用 JSON。
• 編碼處理：伺服端 escape()、客戶端 unescape() 處理中文；現代應用全鏈路 UTF-8 更佳。
• 記憶體洩漏防範：定期清理 DOM 節點，避免長時間運行瀏覽器記憶體飆升。
• 錯誤處理：網路異常、伺服器錯誤、解析失敗均需捕獲並靜默重試或提示。

現代化改造建議

1. 替換 ActiveXObject 為標準 XMLHttpRequest + 跨瀏覽器封裝
2. 採用 fetch API 或 axios 簡化非同步流程
3. 伺服端輸出標準 JSON，客戶端 JSON.parse() 解析
4. 引入 WebSocket 或 Server-Sent Events 實現真正推送，降低輪詢開銷
5. 前端框架接管 DOM 更新，實現聲明式資料綁定