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？

如果要向网址附加时间戳（这是cache: false的作用），则浏览器将始终发送新请求，因为它将所有唯一的网址/查询字符串参数视为唯一{{1}请求。

对您的请求的回复是否有GET标头？如果将其设置为cache-control，则浏览器每次都会请求资源。

jQuery ajax缓存响应

2 个答案: