我有一个多站点设置,每个站点通过ajax加载它的数据。一切都在完美,期待一个细节。如果按下后退按钮,ajax数据将从浏览器缓存加载,而不是从服务器加载。这是有问题的,因为用户可能导航到第二页,更改状态并导航回到他希望在概览中看到更改的上一页(例如,接受的任务图现在有一个更接受的任务,因为他接受了它)。
我发现最常见的解决方案是为ajax添加时间戳
请求(在jQuery中通过cache: false
属性)。不过这个
缺点是它禁用了http缓存(statuscode
304)我不想做。另外,我需要304状态代码
在其他情况下更新我的视图。
第二个选项是绑定 window.onbeforeunload
并显示
用户离开页面时的警告消息。这使浏览器缓存无效,因此即使后退按钮是,也会完成请求(不添加时间戳)
按下。缺点是,用户获得确认对话框
每次他从页面导航(这是非常烦人的)。对于
安全性原因我无法通过JavaScript确认,如果我不这样做
显示消息,缓存不会失效。
是否有更多技巧可以使更高的缓存无效/确保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>
答案 0 :(得分:0)
您可以在jquery中添加时间戳到ajax请求,如此
data: { 'time': new Date().getTime() }
答案 1 :(得分:0)
您可以将cache:false添加到ajax调用以防止缓存
$.ajax({
type: "GET",
url: "test", //doesn't matter if it is invalid
cache: false,
success: function (data) {
}
});
这可以通过在请求结尾添加&amp; _ = timestamp来实现。虽然它强制将新请求发送到服务器,这就是您所追求的。它还具有将请求添加到浏览器缓存的副作用。因此,如果您正在进行大量这些请求,它可能会通过大量的小ajax请求来污染缓存。