jQuery UI ajax 选项卡和内容的精细缓存控制答案

【问题标题】：jQuery UI ajax tabs and granular cache control of contentjQuery UI ajax 选项卡和内容的精细缓存控制
【发布时间】：2012-01-12 17:22:03
【问题描述】：

我正在使用 jQuery UI 选项卡，其中将 ajax 内容注入 DIV，而不是 IFRAME。

内容作为由 HTML 标记组成的文本文件存储在服务器上，但该文件缺少 DOCTYPE 声明、HEAD 部分、BODY 部分'它基本上是

  <DIV>lorem ipse</DIV>.

我尝试了这种方法来强制实现无缓存场景：

 $("#tabs").tabs(
    {
    cache: false,
    ajaxOptions: {cache: false}
    }
);

但是当我查看 Fiddler 中的缓存选项卡时，它会说：

HTTP/200 响应默认是可缓存的，除非 Expires、Pragma、或 Cache-Control 标头存在并禁止缓存。存在 HTTP/1.1 ETAG 标头：“53a38d5790b2cc1:ab2” 存在 HTTP Last-Modified 标头：Sun，2011 年 12 月 4 日 14:23:50 GMT

未提供明确的 HTTP 过期信息。大多数浏览器使用启发式过期策略： Last-Modified 和 Date 之间的差值的 10% 是“00:20:13” 因此此响应将试探性地在 2011 年 12 月 4 日下午 1:08:26 过期。

如何将此特定内容保留为无缓存？

附：为了回应@Mikael 的观点，通常会向 URL 添加某种更改值以防止缓存，我不太确定在使用 jQuery ajax 声明性方法时如何做到这一点：

<div id='tabs' class="ui-tabs">

   <ul>
       <li><a title="contentcontainer" href="foo.html">One</a></li>
   <li><a title="contentcontainer" href="foo2.html">Two</a></li>        
   <li><a title="contentcontainer" href="foo3.html">Three</a></li>
   </ul>
   <div id='contentcontainer'></div>
 </div>

如何将'?' + new Date().getTime().toString() 附加到href URL？

【问题讨论】：

标签： ajax jquery-ui caching

【解决方案1】：

我不确定在这种情况下是什么原因导致缓存。

但是，在处理 ajax 请求时，防止缓存的一种流行方法是向 URL 添加随机或时间戳参数。例如请求 /public/static_file?_=1239871984 而不是 /public/static_file

另一种防止它的方法可能是添加过期标头，这在某些浏览器中效果不佳（如果我没记错的话，IE8 具有非常激进的 ajax 缓存）。

同样的方法也适用于在网站更新时强制刷新 js/css 文件。

【讨论】：