通过AJAX

Question

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

以下是正在发生的事情，我的网站在屏幕右侧显示了一个购物车，每当用户点击每个项目旁边的购买按钮时，该购物车就会更新。

假设我的购物车是空的，用户点击购买物品并且酒吧更新自己以反映新添加的项目...请记住，我通过使用Ajax调用（jQuery）实现这一点到目前为止一切都很完美。

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

1. 这只发生在Chrome和Firefox
中
2. 如果我刷新页面，则购物车不会被清空
3. 在Chrome中，如果我在打开开发人员工具标签（禁用缓存）的同时尝试上述步骤，则错误不会发生
4. 在Chrome中，如果没有开发者工具，如果我点击后退按钮并等待至少60秒并返回页面，问题就不会显示
5. 以类似的方式，如果我在将商品添加到购物车后等待至少60秒，则前后返回，不会出现任何问题

关于我可以尝试避免这种情况的任何想法？最好是javascript或标签，因为我无法控制设置标题的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);

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