如何判断XMLHTTPRequest是否命中浏览器缓存

Question

如果可以告诉(在javascript执行中)GET XMLHTTPRequest是否命中浏览器缓存而不是从服务器获取响应？

Answer 1

来自XMLHttpRequest规范:

对于由用户代理生成的条件请求而导致的304 Not Modified响应,用户代理必须表现为服务器使用适当的内容给出200 OK响应.

换句话说,即使对于访问浏览器缓存的请求,浏览器也总是会给出状态代码200 OK.

但是,该规范还说:

用户代理必须允许作者请求标头覆盖自动缓存验证(例如,If-None-Match或If-Modified-Since),在这种情况下,必须传递304 Not Modified响应.

因此,有一种解决方法可以使您的JavaScript代码看到304 Not Modified响应.

Answer 2

你使用 Firefox 的Firebug吗？

Firebug 有一个带有“XHR”过滤视图的“Net”面板。您应该能够通过请求阶段栏检查缓存信息，检查状态和/或单击三角形以检查“标题”。

缓存或不缓存

并非所有网络请求都是相同的 - 其中一些请求是从浏览器缓存而不是网络加载的。Firebug 为每个请求提供状态代码，以便您可以快速扫描并查看您的站点如何有效地使用缓存来优化页面加载时间。

Firebug Net 面板文档位于此处。

Chrome/Safari/Opera 都有类似的调试工具。刚刚在这里找到了一个很好的列表（大多数应该有检查 XHR 的工具）。

编辑：

为了某种程度的救赎自己...

正如ibu 所回答的那样，我还将首先检查响应的状态代码。

如果您使用的是 jQuery：

statusCode（已添加 1.5） 映射 默认值：{} 数字 HTTP 代码和响应具有相应代码时调用的函数的映射。例如，当响应状态为 404 时，将发出以下警报：

$.ajax({
  statusCode: {
    404: function() {
      alert("page not found");
    }
  }
});

如果请求成功，状态码函数采用与成功回调相同的参数；如果导致错误，它们将采用与错误回调相同的参数。

jQuery 确实让生活变得轻松。:)