解決 IE 瀏覽器 AJAX 請求緩存導致返回舊數據的問題

在 Web 開發中，IE 瀏覽器對 AJAX GET 請求的積極緩存機制常導致開發者遇到「請求返回上一次結果」的困擾。本文分析根因並提供多種實戰解決方案。

問題根源

• IE 緩存機制：IE 對相同 URL 的 GET 請求僅發起一次網絡請求，後續直接讀取瀏覽器緩存；POST 請求因參數通常不同，較少受影響。
• Firefox 差異：Firefox 每次觸發事件均重新建立 AJAX 請求，不存在此問題。

解決方案

方法一：URL 附加隨機參數（通用）

在請求 URL 後添加時間戳或隨機數，強制瀏覽器視為新請求：

// 方案 A：Math.random()
url + "&t=" + Math.random();

// 方案 B：時間戳（推薦，可讀性更好）
url + "?timestamp=" + new Date().getTime();

方法二：jQuery 關閉緩存（推薦用於 jQuery 專案）

$.ajax({
    type: "POST",
    async: false,          // 同步模式（視業務需要）
    cache: false,          // 關鍵：自動附加 _={timestamp} 參數
    url: targetUrl,
    data: postData,
    success: function(data) {
        // 處理回調
    }
});

設置 cache: false 後，jQuery 會自動在 URL 末尾添加 _={timestamp} 參數，徹底繞過瀏覽器緩存。

最佳實踐建議

• 優先使用 cache: false，代碼侵入性最小且語義清晰。
• 若非 jQuery 環境，手動添加時間戳參數是標準做法。
• 服務端亦可通過設置 HTTP 頭 Cache-Control: no-cache, no-store, must-revalidate 從源頭禁止緩存。