如何检查 jQuery.ajax() 请求标头状态是否为“304 Not Modified”？

Question

如何检查 jQuery.ajax() 请求标头状态是否为“304 Not Modified”？

jqXHR.status 通常返回 200，即使请求的标头为“304 Not Modified”。

ifModified:true 没有太大帮助，因为它破坏了 XHR 数据请求。

Answer 1

如果不手动处理缓存标头，这是不可能的。通常，304 响应无法通过 XHR API 提供：

对于由用户代理生成的条件请求导致的 304 Not Modified 响应，用户代理必须表现得就像服务器给出了包含适当内容的 200 OK 响应。

jQuery 通常不知道有 304 响应，因为浏览器会礼貌地向 JavaScript 撒谎，告知网络上实际发生的情况。

但有一个好消息（有点）：您可以让 Ajax 生成 304 响应，但只能通过手动设置 请求中的 HTTP 缓存标头 If-Modified-Since 或 If-None-Match：

用户代理必须允许 setRequestHeader() 通过设置请求标头（例如，If-None-Match、If-Modified-由于），在这种情况下，必须传递 304 Not Modified 响应。

因此，您可以使用如下代码：

var xhr = new XMLHttpRequest();
xhr.open("GET", "foo.html");
xhr.setRequestHeader("If-Modified-Since", "Fri, 15 Feb 2013 13:43:19 GMT");
xhr.send();

一个基本困难是您如何知道上次修改日期或ETag发送？ 浏览器具有用于发送请求的缓存信息，但它不会与 JavaScript 共享该信息。幸运的是，jQuery 会跟踪 Ajax 响应中的 Last-Modified 和 ETag 标头，因此您可以使用 ifModified:true 让 jQuery 设置这些标头下次发送对该资源的请求时标头值。

对此需要注意两点：

• 304 响应不携带数据。这是设计使然。假设是，如果您选择使用缓存，则您的缓存中应该已有数据的副本！！如果无法从服务器获取数据是一个问题（即，因为您还没有该数据），那么为什么要使用缓存？当你手头有旧数据而只需要新数据时，应该使用缓存；因此，使用 304 返回没有数据应该不是问题。

• jQuery 必须具有上次请求存储的上次修改日期或 ETag（与 If-None-Match 一起使用）。过程是这样的：

  • 首次获取：jQuery 没有缓存信息，因此不会发送 If-Modified-Since 或 If-None-Match。当响应返回时，服务器可能会宣布最后修改的数据或 ETag，jQuery 存储这些数据以供将来使用。

  • 后续获取：jQuery 缓存上次获取的信息并将该数据转发到服务器。如果资源未更改，Ajax 请求将收到 304 响应。如果资源已更改，Ajax 请求将收到 200 响应，以及 jQuery 用于下次获取的新缓存信息。

  • 但是，jQuery 不会在页面重新加载之间保留缓存信息（例如，在 cookie 中）。因此，页面重新加载后第一次获取资源将永远不会是 304，因为 jQuery 没有要发送的缓存信息（即我们重置回“第一次获取”情况）。 jQuery 没有理由不能保留缓存信息，但目前它不能。

这里的底线是，您可以使用缓存标头来获取 JavaScript 304 响应，但您无法访问浏览器自己的 ETag 或特定资源的上次修改日期。因此，浏览器本身可能知道缓存有关资源的信息，但您的 JavaScript 代码却不知道。在这种情况下，浏览器将使用其缓存标头来获取真正的 304 响应，但将 200 响应转发到您的 JavaScript 代码，因为 JavaScript 没有发送任何缓存信息。

不可能使 JavaScript 304 请求与实际的网络 304 响应完全一致，因为您的浏览器已知的缓存信息和您的 JavaScript 代码已知的缓存信息可能会以不可预测的方式有所不同。然而，大多数时候正确获取 304 请求对于大多数实际开发需求来说已经足够了。

示例

下面是一个用 Node.js 编写的简短服务器示例（但它应该足够简单，可以移植到其他语言）：

require("http").createServer(function (req, res) {
  console.log(req.headers["if-modified-since"]);

  // always send Last-Modifed header
  var lastModDate = "Fri, 13 Feb 2013 13:43:19 GMT";
  res.setHeader("Last-Modified", lastModDate);

  // if the request has a If-Modified-Since header,
  //   and it's newer than the last modification,
  //   then send a 304 response; otherwise send 200
  if(req.headers["if-modified-since"] &&
     Date.parse(lastModDate) <= Date.parse(req.headers["if-modified-since"])) {
    console.log("304 -- browser has it cached");
    res.writeHead(304, {'Content-Type': 'text/plain'});
    res.end();
  } else {
    console.log("200 -- browser needs it fresh");
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('some content');
  }

}).listen(8080);

运行此服务器时，您可以在浏览器中加载页面并在浏览器控制台中执行两个不同的测试：

var xhr = new XMLHttpRequest();
xhr.open("GET", "/");
xhr.send();
xhr.onload = function() { console.log(xhr.status); }

此脚本即使浏览器提供 If-Modified-Since 请求标头并获取 304（这将在所有情况下发生），也始终会看到 200 响应在浏览器看到服务器的 Last-Modifed 响应标头之后的第一个请求之后）。

相比之下，此脚本总是看到 304 响应：

var xhr = new XMLHttpRequest();
xhr.open("GET", "/");
xhr.setRequestHeader("If-Modified-Since", "Fri, 15 Feb 2013 13:43:19 GMT");
xhr.send();
xhr.onload = function() { console.log(xhr.status); }

该脚本提供自己的 If-Modified-Since 请求标头（服务器上次修改日期后两天）；它不依赖于浏览器为 If-Modified-Since 提供的任何内容，因此允许（根据 XHR 规范）查看 304 响应。

最后，此脚本将始终看到 200：

var xhr = new XMLHttpRequest();
xhr.open("GET", "/");
xhr.setRequestHeader("If-Modified-Since", "Fri, 12 Feb 2013 13:43:19 GMT");
xhr.send();
xhr.onload = function() { console.log(xhr.status); }

这是因为该脚本使用早于服务器上次修改日期的 If-Modified-Since，因此服务器始终发送 200。服务器不会发送 304，因为它假定客户端没有最新版本的缓存副本（即客户端宣布自 2 月 12 日以来已看到更改，但有一个2 月 13 日发生的变化，客户显然没有看到）。

Answer 2

如果响应来自缓存，则标头也将被缓存。我把这当作一个机会。
我的服务器发送一个唯一的 md5 标头。这与 ?query=time() 的效果不同。现在在 JS 端验证最新的 md5 标头与当前的。如果您收到与之前相同的 MD5 标头，则响应来自缓存。我完全忘记了 JQuery，但看到可以设置和读取标题。

<?php
$oldMD5=filter_input(INPUT_SERVER,'HTTP_CONTENT_MD5',int);
if(!empty($oldMD5)){
  header('Content-MD5: '.(1+(int)$oldMD5));
}
--------------------------------------------------------------
<script>
var oldMD5=0;
//your Ajax implementation 
Ajax.setRequestHeader('Content-MD5',''+oldMD5);
var newMD5=parseInt(Ajax.getResponseHeader('Content-MD5'),10);
if(newMD5 && oldMD5<newMD5,10){
  oldMD5=newMD5;
  //not cached
}else{
  //cached
}

这有点滥用，因为 md5 应该是一个哈希值，用于验证“解码的数据与最初发送的数据相同”。

Answer 3

我有一种实施
https://github.com/laukstein/ajax-seo /blob/cbed03222d89f6f7e75dc49ce8882c30201bbb86/index.php#L266-274

var cache;

$.ajax({
    ...
    beforeSend: function() {
        cache = setTimeout(function() {
            console.log('The content not cached jet.');
        }, 300);
    },
    success: function(data) {
        if (cache) {
            clearTimeout(cache);
        }
    }
});

Answer 4

也许试试这个？

$.ajax({
    url: 'your-url',
    dataType: 'script',
    complete: function(xhr) { 
        if (xhr.status == 304) return;
        // or better: if (xhr.status != 200) return;
        // your code goes here
    }
});

Answer 5

打开浏览器检查器，它将显示有关 ajax 请求的信息，包括状态。

对于 Chrome，右键单击并选择检查元素，然后转到网络选项卡。

对于 Firefox，只需使用 Firebug 并按照相同的步骤操作即可。