JQuery ajax 加载器和浏览器缓存答案

【问题标题】：JQuery ajax loader and browser cachingJQuery ajax 加载器和浏览器缓存
【发布时间】：2011-04-23 22:23:26
【问题描述】：

我正在使用 JQuery 通过 ajax 动态加载一些数据。每当用户发起 ajax 请求（即单击按钮或加载页面等）时，我都会显示一个 ajax 加载器 gif。一旦 ajax 请求完成（或出错），我将隐藏加载器图像。

这在大多数情况下都很有效。但我注意到（例如在 IE7 中）在页面加载时发出的 ajax 调用会被缓存（我认为）。所以基本上当我刷新页面并且可能会触发 ajax 调用时，IE 会加载缓存的数据。因此，jquery .ajax() 函数中的成功（或错误）回调永远不会被调用，并且加载器图像会无限期地保持打开状态。解决这个问题的最佳方法是什么？

【问题讨论】：

"... ajax 调用可能已被触发..."，我建议您在带有 firebug 的 firefox 上尝试此操作。这将更清楚地了解正在发生的事情。此外，如果您使用静态 URL 执行 GET，而不是 POST（未缓存），您可能会遇到返回缓存值的问题。
好吧，我在 Firefox 中没有看到相同的结果。我只能在 IE 中重现它。有没有类似 IE 的萤火虫之类的东西？

标签： javascript jquery ajax

【解决方案1】：

如果您想在整个站点中禁用 ajax 结果缓存，请使用.ajaxSetup()：

$.ajaxSetup( { cache : false } );

然后，您可以根据具体情况覆盖该行为：

$.ajax ({ 
...
cache: true,
...

【讨论】：

【解决方案2】：

.ajax() 提供cache 属性，默认为true：

$.ajax({
   ...
   cache:  false
});

http://api.jquery.com/jQuery.ajax/

作为替代方案，您可以在请求查询字符串中添加一个随机数。

$.ajax({
   url:   '/path/script.pl',
   dataType: 'text',
   type: 'GET',
   data: {
     q:   ~~(Math.random()*200)
   },
   success: function(data){
      // data
   }
});

【讨论】：

【解决方案3】：

jQuery.ajax 实际上有一个内置选项可以避免这种情况：

$.ajax( { cache : false } );

文档包含在 ajax 方法中：jQuery.ajax()

来自文档：

缓存默认值：true，对于 dataType 'script' 和 'jsonp' 为 false 如果设置为 false，它将强制您请求的页面不被浏览器缓存。

【讨论】：