Ajax 實現網頁無閃爍自動局部刷新：新郵件聲音提示實戰範例

痛點

傳統 `` 導致整頁重載閃爍，體驗極差。Ajax 非同步局部更新可完美解決。

實作架構

瀏覽器 (JS 定時器) → XMLHttpRequest → JSP 後端查詢 → 回傳 0/1 → JS 更新 DOM + 播放聲音

完整代碼

1. 頁面引入與初始化

<body onload="init('<%=session.getAttribute("username")%>')">
<span id="mailNotify"></span> <!-- 顯示區域 -->

2. 客戶端 JavaScript

<script type="text/javascript">
var xmlhttp, checkResult, userName;

function init(user) {
  userName = user;
  // 每 5 秒輪詢一次
  window.setInterval(checkMail, 5000);
}

function checkMail() {
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // IE 專用，現代瀏覽器用 new XMLHttpRequest()
  xmlhttp.open("POST", "check_mail.jsp?uName=" + encodeURIComponent(userName), false);
  xmlhttp.onreadystatechange = updateUI;
  xmlhttp.send();
}

function updateUI() {
  if (xmlhttp.readyState < 4) {
    document.getElementById("mailNotify").innerHTML = "loading...";
    return;
  }
  if (xmlhttp.readyState == 4) {
    var resp = xmlhttp.responseText.trim();
    var notify = document.getElementById("mailNotify");
    if (resp == "1") { // 無新郵件
      notify.innerHTML = " ";
      checkResult = 1;
    } else { // 有新郵件
      notify.innerHTML = "<img src='img/newmail.gif' alt='新郵件'>" +
        "<embed src='music/nudge.wma' hidden='true' autostart='true' loop='false'>";
      checkResult = 0;
    }
  }
}
</script>

3. 伺服器端 check_mail.jsp

<%@ page contentType="text/html; charset=UTF-8" import="java.sql.*" %>
<%
String user = request.getParameter("uName");
Connection conn = null;
try {
  conn = DBConnection.getConnection(); // 假設已封裝連線池
  PreparedStatement ps = conn.prepareStatement(
    "SELECT 1 FROM message WHERE r_name=? AND status=0");
  ps.setString(1, user);
  ResultSet rs = ps.executeQuery();
  if (rs.next()) {
    out.print("0"); // 有未讀
  } else {
    out.print("1"); // 無未讀
  }
} finally {
  if (conn != null) try { conn.close(); } catch (Exception ignore) {}
}
%>

關鍵優化點

• 使用 `PreparedStatement` 防 SQL 注入。
• 連線於 `finally` 區塊關閉，防洩漏。
• 輪詢間隔可配置，避免過度負載資料庫。
• 現代專案建議改用 `fetch API` + `setTimeout` 遞歸輪詢，或採用 WebSocket/Server-Sent Events 實現真正推播。