jQuery ajax cache response

jQuery ajax cache response

本文关键字：response cache ajax jQuery      更新时间：2023-09-26

我正在使用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 中的，还是我必须自己编写逻辑才能工作？

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

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(); 
});

什么是t_date？

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

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

相关文章：