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

https://stackoverflow.com/questions/367786

21-08-2019
|

题

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

在 QueryString 中添加一些随机字符串似乎可以解决这个问题（我使用 new Date().toString()），但这感觉就像是黑客攻击。

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

解决方案

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

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

编辑： 这个答案已经有好几年了。它仍然有效（因此我没有删除它），但是 现在有更好/更清洁的方法来实现这一目标. 。我的偏好是这方法，但是这如果您想禁用缓存，答案也很有用 每一个 页面生命周期内的请求。

其他提示

下面将阻止今后所有的AJAX请求被缓存，无论哪个jQuery的方法的使用（$不用彷徨，$就等）

$.ajaxSetup({ cache: false });

jQuery的$。获得（）将缓存的结果。代替

$.get("myurl", myCallback)

你应该使用$阿贾克斯，这将让你关闭缓存：

$.ajax({url: "myurl", success: myCallback, cache: false});

另一种方式是提供一种由服务器侧没有缓存的头信息中，生成到AJAX调用的响应的代码：

response.setHeader( "Pragma", "no-cache" );
response.setHeader( "Cache-Control", "no-cache" );
response.setDateHeader( "Expires", 0 );

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

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

至少对于 Chrome 来说，结果是：

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

我个人觉得，查询字符串的方法是比试图在服务器上设置头更可靠 - 不能保证某个代理或者浏览器将不只是缓存也无妨（某些浏览器比别人差 - 命名没有名字）

我通常使用Math.random()，但我看不出什么毛病，使用日期（你不应该做AJAX请求足够快，以获得相同的值的两倍）。

继文档： http://api.jquery.com/jquery.ajax/

可以使用cache属性与：

$.ajax({
    method: "GET",
    url: "/Home/AddProduct?",
    data: { param1: value1, param2: value2},
    cache: false,
    success: function (result) {
        // TODO
    }
});

当然“缓存破”技术将完成这项工作，但如果服务器指示给客户端的响应不应该缓存这不会首先发生。在某些情况下，它是缓存响应，有时不利于。让服务器决定数据的正确使用寿命。你可能想在以后改变它。更容易从服务器不是从你的UI代码许多不同的地方做。

当然，如果你有对服务器无法控制这并不能帮助。

怎么样使用POST请求，而不是一个GET的......？（你应该反正...）

真正的问题是，为什么你需要这不被缓存。如果它不应该被缓存，因为它时刻都在变化，服务器应该指定不缓存资源。如果它只是有时会改变（因为资源之一，它依赖于能够改变），并且如果客户端代码有知道关于它的一种方式，它可以添加一个虚拟参数是从一些哈希或最后修改日期计算的网址这些资源的（这就是我们在微软的Ajax脚本资源做这样他们就可以永远缓存，但它们出现的新版本仍可以投放）。如果客户端不知道的变化，正确的做法应该是服务器妥善处理HEAD请求，并告诉客户端是否使用缓存的版本还是不行。在我看来，像一个附加随机参数或从客户告诉从不缓存是错误的，因为可缓存是服务器资源的属性，所以必须决定服务器端。要问自己的另一个问题是，如果这真的资源通过GET送达还是应该经过POST？这是语义的问题，但它也带来了安全隐患（有工作，即只有当服务器允许GET攻击）。 POST不会得到缓存。

也许你应该看看阿贾克斯$（）代替（如果你使用jQuery，它看起来像）。看看： http://docs.jquery.com/Ajax/jQuery.ajax #options 和选项 “高速缓存”。

另一种方法是看你如何缓存在服务器端的东西。

一个小除了给出的答案优异：如果你使用的JavaScript没有为用户提供非Ajax的备份解决方案运行，你必须让这些服务器端头正确反正。这是不可能的，虽然我理解那些放弃它;）

我敢肯定有对SO另一个问题，这将使你的全套是适当的头。我不完全说服了miceus答复涵盖所有的基础100％。

对于那些使用在移动设备上的Safari cache的$.ajaxSetup()选项，看来可能必须使用的POST的时间戳，由于移动的Safari缓存太多。据对$.ajax()的文件（你从$.ajaxSetup()涉及）：

缓存设置为false，将只与HEAD正常工作和GET请求。它通过附加“_ = {}时间戳”的GET参数。不需要参数用于其它类型的请求，除了在IE8当POST就是已经被请求由GET的URL制成。

所以设置该选项本身并不能帮助你在我上面提到的情况。

基本上只是在你认为该内容会随着进度走在添加AJAX cache:false;。并且其中的内容不会有改变的地方ü可以忽略这一点。这样一来U将每次获得新的反应

Internet Explorer 的 Ajax 缓存：你打算怎么办呢？建议三种方法：

将缓存清除标记添加到查询字符串，例如 ?date=[timestamp]。在 jQuery 和 YUI 中，您可以告诉它们自动执行此操作。

使用 POST 而不是 GET

发送专门禁止浏览器缓存的 HTTP 响应标头

现在，很容易通过启用/禁用缓存选项，在您的Ajax请求，就这样做。

$(function () {
    var url = 'your url goes here';
    $('#ajaxButton').click(function (e) {
        $.ajax({
            url: url,
            data: {
                test: 'value'
            },
                cache: true, //cache enabled, false to reverse
                complete: doSomething
            });
        });
    });
    //ToDo after ajax call finishes
    function doSomething(data) {
        console.log(data);
    }
});

如果使用的是IE 9，那么就需要使用在控制器中类定义的前以下内容：

[的OutputCache（NoStore =真，持续时间= 0，的VaryByParam = “*”）]

公共类的TestController：控制器

此将防止缓存浏览器。

此链路上的详细信息： HTTP： //dougwilsonsa.wordpress.com/2011/04/29/disabling-ie9-ajax-response-caching-asp-net-mvc-3-jquery/

其实这解决了我的问题。

正如@Athasach说，根据jQuery的文档，$.ajaxSetup({cache:false})不会比其他工作GET和HEAD请求。

您是关闭发送回从服务器Cache-Control: no-cache头反正更好。它提供的关注的清洁器分离。

当然，这不会对你不属于你的项目的服务网址。在这种情况下，你可能会考虑进行代理服务器代码的第三方服务，而不是从客户端代码调用它。

如果您使用.NET ASP MVC，禁用通过添加在端点函数以下属性控制器动作的缓存： [OutputCacheAttribute（的VaryByParam = “*”，持续时间= 0，NoStore =真）]

附加的Math.random（）来请求URL

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow