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

2020/10/08 17:41 · javascript ·  · 0评论

好像我使用加载动态内容$.get(),结果缓存在浏览器中。

在QueryString中添加一些随机字符串似乎可以解决此问题(我使用new Date().toString()),但这感觉像是一种hack。

还有其他方法可以做到这一点吗?或者,如果唯一字符串是实现此目的的唯一方法,则除之外还有其他建议new Date()吗?

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

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

编辑:这个答案已经好几年了。它仍然有效(因此我没有删除它),但是现在有更好/更干净的方法可以实现此目的我的首选方法这种方法,但是如果您要在页面生命周期内禁用每个请求的缓存答案也很有用

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

$.ajaxSetup({ cache: false });

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

$.get("myurl", myCallback)

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

$.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代码中的许多不同位置执行操作容易得多。

当然,如果您无法控制服务器,这将无济于事。

真正的问题是,为什么不缓存它?如果不应该因为它一直在更改而对其进行缓存,则服务器应指定不对资源进行缓存。如果它有时只是更改(因为它所依赖的资源之一可以更改),并且如果客户端代码有一种了解的方式,则可以将伪参数附加到从某个哈希或上次修改日期计算出的url上这些资源(这是我们在Microsoft Ajax脚本资源中所做的工作,因此可以永久地缓存它们,但是仍然可以在出现时提供新版本)。如果客户端不知道更改,则正确的方法应该是服务器正确处理HEAD请求并告诉客户端是否使用缓存的版本。在我看来,像添加随机参数或从客户端告诉永不缓存是错误的,因为可缓存性是服务器资源的属性,因此应在服务器端确定。另一个要问的问题是,该资源是真正通过GET提供还是通过POST提供?这是一个语义问题,但是也有安全隐患(只有服务器允许GET时,某些攻击才会起作用)。POST将不会被缓存。

使用POST请求而不是GET ...呢?(无论如何,您应该...)

也许您应该改用$ .ajax()(如果您使用的是jQuery,看起来像这样)。看一下:http : //docs.jquery.com/Ajax/jQuery.ajax#options和选项“缓存”。

另一种方法是查看如何在服务器端缓存内容。

对于在移动Safari上使用cache选项的用户$.ajaxSetup()来说,您似乎必须为POST使用时间戳记,因为移动Safari也会对其进行缓存。根据上的文档$.ajax()(您将从指向$.ajaxSetup()):

将缓存设置为false只能与HEAD和GET请求一起正常使用。它通过在GET参数后附加“ _ = {timestamp}”来工作。对于其他类型的请求,不需要此参数,但在IE8中,当对GET已经请求的URL进行POST时,则不需要该参数。

因此,在我上面提到的情况下,仅设置该选项将无济于事。

除了给出的出色答案之外,还有一小部分内容:如果您正在为没有javascript的用户使用非ajax备份解决方案运行,那么无论如何,您都将必须纠正这些服务器端标头。这不是不可能的,尽管我了解那些放弃的人;)

我确定SO上还有另一个问题,它将为您提供适当的全套标题。我并非完全被定罪为胶束回复涵盖所有基础100%。

基本上,只需添加cache:false;ajax,您就会在其中认为内容会随着进度的变化而变化。而内容在那里不会改变的地方,您可以忽略这一点。这样,您每次都会获得新的响应

Internet Explorer的Ajax缓存:您将如何处理?建议三种方法:

  1. 将高速缓存清除令牌添加到查询字符串,例如?date = [timestamp]。在jQuery和YUI中,您可以告诉他们自动执行此操作。
  2. 使用POST而不是GET
  3. 发送专门禁止浏览器缓存的HTTP响应标头

正如@Athasach所说,根据jQuery文档,$.ajaxSetup({cache:false})除GET和HEAD请求外,它不适用于其他请求。

Cache-Control: no-cache无论如何,最好还是从服务器发送回标头。它提供了更清晰的关注点分离。

当然,这不适用于您不属于项目的服务URL。在这种情况下,您可以考虑从服务器代码代理第三方服务,而不是从客户端代码调用第三方服务。

现在,很容易通过在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);
    }
});

如果使用的是.net ASP MVC,请通过在端点函数上添加以下属性来禁用对控制器操作的缓存:

[OutputCacheAttribute(VaryByParam = "*", Duration = 0, NoStore = true)]

如果使用的是IE 9,则需要在控制器类定义之前使用以下命令:

[OutputCache(NoStore = true,Duration = 0,VaryByParam =“ *”)]

公共类TestController:控制器

这将阻止浏览器进行缓存。

该链接的详细信息:http :
//dougwilsonsa.wordpress.com/2011/04/29/disabling-ie9-ajax-response-caching-asp-net-mvc-3-jquery/

实际上,这解决了我的问题。

添加标题

headers: {
                'Cache-Control':'no-cache'
            }

附加Math.random() 到请求网址

本文地址:http://javascript.askforanswer.com/fangzhiliulanqihuancunajaxdiaoyongjieguo.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!