JSP Checkbox控制定時刷新：AJAX無閃爍實現方案

需求分析

Checkbox選中 → 每10秒自動刷新當前查詢結果；取消選中 → 停止刷新。要求無閃爍（AJAX局部更新）。

完整實現代碼

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

<input type="checkbox" onclick="toggleAutoRefresh(this)" /> 定時刷新

<script>
var refreshTimer;
var REFRESH_INTERVAL = 10000; // 10秒

function toggleAutoRefresh(cb) {
    if (cb.checked) {
        // 啟動定時器
        refreshTimer = setInterval(function() {
            // AJAX無閃爍刷新
            $('#contentArea').load('queryResults.jsp?timestamp=' + Date.now());
        }, REFRESH_INTERVAL);
        // 立即執行一次
        $('#contentArea').load('queryResults.jsp');
    } else {
        // 停止定時器
        clearInterval(refreshTimer);
    }
}
</script>

<div id="contentArea">初始加載內容...</div>

後端 queryResults.jsp 關鍵點

<%@ page contentType="text/html;charset=UTF-8" %>
<%
    // 僅返回片段HTML，不要包含等標簽
    String condition = request.getParameter("condition");
    List list = service.query(condition);
%>
<table>
    <c:forEach items="${list}" var="item">
        <tr><td>${item.name}</td><td>${item.value}</td></tr>
    </c:forEach>
</table>

進階優化

1. 防重複請求：設置loading標誌，請求未返回時忽略新觸發
2. 錯誤重試：.load()失敗時指數退避重試
3. 參數傳遞：將查詢條件序列化$('#form').serialize()隨請求發送
4. WebSocket替代：高實時性場景考慮服務端推送

避坑指南

• .load(url)的url必須返回純HTML片段，不能包含完整頁面結構
• 用Date.now()或隨機數防緩存
• 定時器變量必須全局/閉包保存，否則無法clearInterval
• 頁面卸載時window.onbeforeunload = () => clearInterval(refreshTimer)

核心模式：Checkbox狀態 → 啟動/停止定時器 → AJAX局部更新，jQuery.load()是最簡潔實現。