按下后退按钮时,Chrome会显示ajax响应

Question

我遇到了一个问题,如果我使用jQuery的Get方法获取一些内容,如果我点击回来,而不是实际返回历史记录中的一个页面,它会显示Ajax查询返回的内容.

有任何想法吗？

http://www.dameallans.co.uk/preview/allanian-society/news/56/Allanian-test

在上面的页面中,如果您使用在更改页面后单击后面注释的注释列表下方的分页,它会显示用于生成注释列表的HTML内容.

我注意到它并不总是这样做,但如果你点击不同的页面几次并单击后退按钮,它只是在窗口而不是网站中显示json文本.

出于某种原因,这只会影响Chrome,因为IE和Firefox工作正常.

Answer 1

确保您的AJAX请求使用完整HTML文档中的其他URL.Chrome会缓存最新的请求,即使它只是部分请求.

https://code.google.com/p/chromium/issues/detail?id=108425

Answer 2

如果您正在使用带有History API的jQuery(或者像history.js这样的库),您应该将$ .getJSON更改为$ .ajax,并将缓存设置为false:

$.ajax({
    dataType: "json",
    url: url,
    cache: false,
    success: function (json) {...}
});

Answer 3

实际上这是缓存系统的预期行为,根据规格,而不是铬问题.缓存仅根据URL和请求方法(get,post,...)来区分请求,而不是任何请求标头.

但是有一个Vary标头告诉浏览器在检查缓存时考虑一些标头.例如,通过向服务器响应添加Vary:X-Requested-With,如果请求X-Requested-With标头被更改,则浏览器知道此响应会发生变化.或者通过向服务器响应添加Vary:Content-Type,如果请求Content-Type标头发生更改,浏览器会知道此响应会发生变化.

您可以将此行添加到您的路由器以获取PHP:

header('Vary:X-Requested-With');

并在node.js中使用中间件:

app.use(function(req, res) {
    res.header('Vary', 'X-Requested-With');
});

Answer 4

您还可以将随机值添加到ajax网址的末尾.这将忽略先前的chrome缓存并将请求新版本

url = '/?'+Math.random()

Answer 5

只需将以下标头添加到响应标头：

Vary: Accept