jQuery ajax 缓存响应

Question

我正在使用 jQuery 的 $.ajax() 方法来发出基于 XHR 的 HTTP GET 以从 Ruby on Rails 站点检索部分 HTML。在这种特殊情况下，每当用户单击选项卡式导航时，我都会使用从服务器返回的数据更新 HTML 表。问题是，一旦数据在服务器上可用，它就永远不会改变。当用户从一个选项卡单击到下一个选项卡时，它不必要地向服务器发出更多 XHR 请求以获取它应该已经拥有和/或缓存的数据。我尝试使用cache: true 属性，但我认为它不像我想象的那样有效。这是我的脚本示例：

 $.ajax({
      url: "/nba/value_charts/" + site_id + "/" + t_date,
      cache: true
    })
    .done(function( html ) {
      $("#vr").html(html)
      $(".value-charts").tablesorter(); 
 });

我可以做些什么，以便在重新单击选项卡时，它至少在用户刷新页面之前使用先前获取的 HTML 来覆盖它？如果缓存不存在，它应该只发出 XHR 请求。这是当前内置于 jQuery 还是我必须自己编写逻辑才能使其工作？

Answer 1

如果你想避免发送请求，你必须自己做。

window.ajaxCache = {};

// later on:
if (!window.ajaxCache["/nba/value_charts/" + site_id + "/" + t_date]) {
    window.ajaxCache["/nba/value_charts/" + site_id + "/" + t_date] = $.get("/nba/value_charts/" + site_id + "/" + t_date);
}
window.ajaxCache["/nba/value_charts/" + site_id + "/" + t_date].done(function( html ) {
    $("#vr").html(html)
    $(".value-charts").tablesorter(); 
});

所有cache: true 所做的只是避免设置_ 参数以防止缓存，允许浏览器像缓存图像一样缓存它，假设服务器返回告诉浏览器缓存它的标头。

这很容易在函数后面抽象：

getCachableData = (function(){
    var ajaxCache = {};
    return {
        get: function(url) {}
            if (!ajaxCache[url]) {
                ajaxCache[url] = $.get(url);
            }
            return ajaxCache[url];
        },
        clear: function(url) {
            if (url) {
                ajaxCache[url] = false;
            }
            else {
                ajaxCache = {};
            }
        }
    };
})();

// later on...
getCachableData.get("/nba/value_charts/" + site_id + "/" + t_date).done(function(html){
    $("#vr").html(html)
    $(".value-charts").tablesorter(); 
});

Answer 2

t_date 是什么？

如果您将时间戳附加到 url（这是 cache: false 所做的），则浏览器将始终发送新请求，因为它将所有唯一的 url / 查询字符串参数视为唯一的 GET 请求。

对您的请求的响应是否有 cache-control 标头？如果设置为no-cache，那么浏览器每次也会请求资源。