我有一个多站点设置,每个站点都通过 ajax 加载它的数据。一切都很完美,期待一个细节。如果我按下后退按钮,ajax 数据是从浏览器缓存加载的,而不是从服务器加载的。这是有问题的,因为用户可能会导航到第二个页面,更改状态并导航回他希望在概览中看到更改的上一页(例如,接受的任务图表现在有一个接受的任务,因为他接受了它)。
我发现的最常见的解决方案是向 ajax 请求添加时间戳(在 jQuery 中通过
cache: false
属性)。但是,这样做的缺点是它禁用了我不想做的 http 缓存(状态码 304)。此外,我需要 304 状态码才能在其他情况下不更新我的视图。第二个选项是绑定
window.onbeforeunload
并在用户离开页面时显示警告消息。这会使浏览器缓存无效,因此即使按下后退按钮,请求也会完成(不添加时间戳)。缺点是,用户每次从页面导航时都会收到一个确认对话框(这很烦人)。出于安全原因,我无法通过 JavaScript 确认它,如果我不显示消息,缓存不会失效。
是否有更多技巧可以使broser缓存无效/确保ajax请求真正到达服务器?
如果有人不想尝试我们的,这里有一个示例代码onbeforeunload
。在您的网络跟踪工具(例如 Fiddler)中,您将设置当用户使用后退按钮导航到页面时将请求发送到服务器。如果你return 'Hello world';
来,你就不会。(请注意,在这两种情况下,您都会在浏览器调试器网络跟踪器中看到它,但这并不代表实际发送到服务器)。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>onbeforeunload</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<a href="http://google.com">Link away</a>
<script>
window.onbeforeunload = function () {
return 'Hello world';
}
$.ajax({
type: "GET",
url: "test", //doesn't matter if it is invalid
success: function (data) {
}
});
</script>
</body>
</html>