javascript - 通过 AJAX 加载内容时的浏览器缓存问题

Question

我在呈现网站时遇到一些问题，只能将其归因于浏览器缓存旧版本的页面。

事情是这样的，我的网站在屏幕右侧显示一个购物车，每次用户点击每个商品旁边的购买按钮时，该购物车都会更新。

假设我的购物车是空的，用户点击购买某个商品，并且栏会自行更新以反射(reflect)新添加的商品...请记住，我是通过使用 Ajax 调用 (jQuery) 来实现这一点的，到目前为止一切正常。

但是，如果我点击浏览器的后退按钮并快速按前进返回页面，Chrome 将呈现 AJAX 调用之前加载的版本。以下是我在调试问题时注意到的一些事情。

1. 这只发生在 Chrome 和 Firefox 中
2. 刷新页面购物车未清空
3. 在 Chrome 中，如果我在打开开发者工具选项卡(禁用缓存)的情况下尝试上述步骤，则不会出现错误
4. 在没有开发者工具的 Chrome 中，如果我点击后退按钮并等待至少 60 秒并返回页面，则不会出现问题
5. 以类似的方式，如果我将商品添加到购物车后等待至少 60 秒，然后来回走动，就看不到任何问题

关于我可以尝试避免这种情况的任何想法吗？最好是 javascript 或标签，因为我无法控制设置 header 的 HTTP 代码。

我知道以下代码是为了强制或“建议”缓存刷新。但是，它仅适用于 HTML5

// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {

  window.applicationCache.addEventListener('updateready', function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
      // Browser downloaded a new app cache.
      // Swap it in and reload the page to get the new hotness.
      window.applicationCache.swapCache();
      if (confirm('A new version of this site is available. Load it?')) {
        window.location.reload();
      }
    } else {
      // Manifest didn't changed. Nothing new to server.
    }
  }, false);

}, false);

Answer 1

尝试将随机查询字符串附加到您使用 AJAX 访问的网址。

var url = 'http://some.url.com/thing?' + new Date().getTime();
$.get(url);

只要同一毫秒内没有发生多个请求，这种方法就有效。