HTML5历史记录API：当返回到另一页然后再次“前进”时显示JSON

Question

我有一个页面，其中有几个搜索/筛选按钮，当点击这些按钮时，通过 AJAX 刷新下面列表的内容。

在这个过程中，我会修改历史记录（通过 pushstate），以便新的筛选页面可以被书签，并且返回按钮正常工作。同时，我也监听 popstate 事件来响应“返回”操作。

我的代码大致如下：

window.addEventListener("popstate", function(ev) {
  if (!window.history_ready) { return; } // Avoid the one time it runs on load 
  refreshFilter(window.location.href, true);
});

refreshFilter: function(newURL, backButtonPressed){
  $.ajax({ url: newURL}).done( blah );

  if (!backButtonPressed) {
    window.history_ready = true;
    history.pushState(null, null, newURL);
  }
}

这个方法很棒，除了一个怪异的情况...

• 用户处于页面“A”
• 他们点击链接前往历史记录中播放此页面（称其为“B”）
• 他们运行了一些筛选器，然后按了几次“回退”按钮，回到了“B”的初始状态
• 他们再次点击“后退”按钮，回到“A”
• 此时，如果他们按下“向前”按钮，浏览器不会再次向服务器请求页面“B”，而是将一堆JSON代码显示为页面内容（这个JSON是我通过AJAX请求过滤内容的响应）

至少在最新版的Chrome中出现了这种情况

为什么会发生这种情况，我该如何避免？

- Daniel Magliola

Answer 1

Chrome会缓存您访问的页面，当您向前或向后导航时，它会使用缓存快速显示该页面。如果您使用的URL用于通过AJAX从服务器检索JSON是Chrome将要请求的相同页面，则可能Chrome正在从缓存中获取该页面，而不是美观的HTML页面，而只是一个JSON转储。

- pupeno

---

我尝试了隐含的解决方法——稍微改变通过 AJAX 获取的URL（在查询字符串中添加一个完全被忽略的“&ajax=1”），而且它奏效了！ :) - Asherah

值得注意的是，在尝试此解决方案时，您可能需要清除Chrome缓存。这可能会让人觉得在尝试此操作后Chrome仍然无法正常工作，因为它已经缓存了旧结果。 - jonnybot

@jonnybot 谢谢，我以为修复对其他人有效，只有我不行，但是清除缓存后它开始工作了，错误已经消失。 - sandre89

Answer 2

$.ajax提供了缓存选项：

$.ajax({ cache: false, url: newURL})

请查看http://api.jquery.com/jquery.ajax/。

- v0id

Answer 3

@pupeno是正确的，但为了给出更多解决方案导向的答案，您需要在服务器的路由中区分JSON和HTML。

我知道两种方法：
1）如果您调用/users，则会获取HTML，如果您调用/users.json，则会获取JSON。
2）如果您调用/users，则会获取HTML，如果您调用/api/users，则会获取JSON。

我非常喜欢第一种方法，但这取决于Web框架是否默认使用哪种方法或者您自己配置。
Ruby on Rails使用1，其他框架也使用2。

- Guido Tarsia