防止浏览器缓存 AJAX 调用结果

IT技术 javascript jquery ajax browser-cache
2021-01-14 23:28:41

看起来如果我使用 加载动态内容$.get(),结果会缓存在浏览器中。

在 QueryString 中添加一些随机字符串似乎解决了这个问题(我使用new Date().toString()),但这感觉就像一个黑客。

有没有其他方法可以实现这一目标?或者,如果唯一字符串是实现此目的的唯一方法,那么除了new Date()?

6个回答

无论您使用哪种 jQuery 方法($.get、$.ajax 等),以下内容都将阻止缓存所有未来的 AJAX 请求

$.ajaxSetup({ cache: false });
链接描述:为未来的 Ajax 请求设置默认值。不推荐使用它。
2021-03-10 23:28:41
经过调查(Fiddler),jQuery 似乎通过简单地附加时间戳在内部实现了这一点(如这些答案中的其他地方所述)。对我来说, .ajaxSetup 方法更干净(在我看来。)
2021-03-17 23:28:41
事实上,它不需要在文档就绪调用中。
2021-03-22 23:28:41
任何适用于您的应用程序。每当我绝对需要所有 AJAX 调用的新数据时,我都会在商业应用程序中继续使用这种方法。对于其他人,缓存数据很好。
2021-03-30 23:28:41
为什么要全局禁用ajax缓存?我认为它应该在每次通话的基础上完成,就像乔纳森的回答那样。
2021-04-09 23:28:41

JQuery 的 $.get() 将缓存结果。代替

$.get("myurl", myCallback)

您应该使用 $.ajax,这将允许您关闭缓存:

$.ajax({url: "myurl", success: myCallback, cache: false});
+1 这是正确答案。Peter J 的全局禁用缓存解决方案是一种不好的做法 IMO。
2021-03-17 23:28:41
+1:缓存应该特定于请求类型。一些服务器请求很可能需要缓存(服务器数据是静态的),因此根据请求选择缓存将其全部关闭要好
2021-03-17 23:28:41
另一个很好的答案。不得不说,对我来说,大部分时间全局禁用缓存是大有裨益的。不过,这一切都取决于您的应用程序的设计方式。没有灵丹妙药,但在这种情况下,我会推荐一个函数,它接受一个用于缓存的布尔值、一个用于回调的函数和一个用于module化的 URL。手动“hack”很好,但是如果您使用 jQuery,请尽可能坚持使用它们的功能。这不仅使现在的开发变得更容易,而且将来也会对库进行升级。
2021-03-22 23:28:41
重要的是要注意它只是页面/请求的“全局”。
2021-03-31 23:28:41
“JQuery 的 $.get() 将缓存结果”并非严格正确;可能决定使用缓存结果的是浏览器,而不是 jQuery。$.ajaxcache: falsejQuery 一起使用时会将时间戳附加到 URL,以确保来自服务器的新鲜响应。
2021-04-08 23:28:41

我使用new Date().getTime(),这将避免冲突,除非您在同一毫秒内发生多个请求:

$.get('/getdata?_=' + new Date().getTime(), function(data) {
    console.log(data); 
});

编辑:这个答案已经有好几年了。它仍然有效(因此我没有删除它),但现在有更好/更清洁的方法来实现这一点我更喜欢这种方法,但是如果您想在页面的生命周期内每个请求禁用缓存这个答案也很有用

url = url + (-1 === url.indexOf('?') ? '?' : '&') + "__=" + Number(new Date());
2021-03-19 23:28:41
这其中的哪一部分需要维护?与 jQuery 的功能相比?
2021-03-26 23:28:41
我只会投反对票,因为让 jQuery 这样做更干净,就像 Peter J 的回答一样。您的解决方案将起作用,但从长远来看更难维护。
2021-03-28 23:28:41
这可能是值得一提的是,new Date().getTime()代码是利用这样的... var nocache = new Date().getTime(); var path = 'http://hostname.domain.tld/api/somejsonapi/?cache=' + nocache;我自己花了几分钟才弄明白。当然?cache可以是 API 实际不需要的任何措辞。
2021-04-01 23:28:41
+1 甚至Peter J 的答案有更好的方法,这个答案没有错,也不是一个糟糕的答案。我相信制作 DV 是因为您的 DV 高于 Peter 的(已接受)。自 2013 年初以来,OP 就没有出现在 SO 上
2021-04-07 23:28:41

这里的所有答案都会在请求的 URL 上留下足迹,该 URL 将显示在服务器的访问日志中。

我需要一个没有副作用的基于标头的解决方案,我发现它可以通过设置如何跨所有浏览器控制网页缓存中提到的标头来实现.

结果,至少适用于 Chrome,将是:

$.ajax({
   url: url, 
   headers: {
     'Cache-Control': 'no-cache, no-store, must-revalidate', 
     'Pragma': 'no-cache', 
     'Expires': '0'
   }
});

也许是一个愚蠢的问题,但是如果我的 ajax 返回图像,图像会被缓存吗?避免大量 Amazon S3 请求?
2021-03-26 23:28:41
MarceloAgimóvel,我相信这可以是一个单独的 SO 问题。
2021-03-26 23:28:41

另一种方法是在生成对 ajax 调用的响应的代码中不提供来自服务器端的缓存头:

response.setHeader( "Pragma", "no-cache" );
response.setHeader( "Cache-Control", "no-cache" );
response.setDateHeader( "Expires", 0 );
我刚刚粘贴了我通常的无缓存咒语,并没有说明它是特定于 IE 的
2021-03-11 23:28:41
不正确。在 IE 中,XMLHttpRequest 调用将忽略 no-cache 标头,如下所述:stackoverflow.com/questions/244918 /... DateTime(或我的 .ajaxSetup 方法)是唯一真正有效的解决方案。
2021-04-03 23:28:41
这应该关闭所有浏览器的缓存: response.setHeader("Cache-Control", "max-age=0,no-cache,no-store,post-check=0,pre-check=0");
2021-04-04 23:28:41