AJAX 快取問題解決四大招

AJAX 快取問題解決四大招

瀏覽器對 GET 請求預設啟用快取，導致相同參數請求返回舊資料。本文提供四種解決方案，涵蓋前端與後端。

方案一：URL 附加隨機參數（最常用）

// jQuery
$.ajax({
    url: '/api/data',
    data: { t: Date.now() }, // 或 Math.random()
    // ...
});

// 原生 fetch
fetch('/api/data?t=' + Date.now())
    .then(res => res.json());

方案二：設定請求標頭 If-Modified-Since: 0

// jQuery
$.ajax({
    url: '/api/data',
    headers: { 'If-Modified-Since': '0' },
    // ...
});

// XMLHttpRequest
xhr.setRequestHeader('If-Modified-Since', '0');

方案三：後端回應標頭禁用快取

<?php
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Sat, 26 Jul 1997 05:00:00 GMT'); // 過去時間
header('Pragma: no-cache');
// 輸出 JSON...
?>

方案四：jQuery cache: false 選項

$.ajax({
    url: '/api/data',
    cache: false, // 內部自動加 _=timestamp 參數
    success: function(data) { ... }
});

比較與建議

POST 請求快取

HTTP 標準規定 POST 不快取，但部分舊版 IE 仍會快取 POST。建議統一加上 Cache-Control: no-cache 回應標頭。