小编典典

如何检查jQuery.ajax()请求标头状态是否为“ 304未修改”?

ajax

如何检查jQuery.ajax()请求标头状态是否为“ 304未修改”?

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

ifModified:true 并没有太大帮助,因为它中断了XHR数据请求。


阅读 296

收藏
2020-07-26

共1个答案

小编典典

如果不手动处理高速缓存头,则不可能。通常,XHR API无法提供304个响应:

对于由于用户代理生成的条件请求 产生的304未修改响应, 用户代理必须像服务器给出200 OK响应并提供适当的内容一样起作用

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

但是有一个好消息(有点):您 可以
使Ajax产生304响应,但只能通过手动设置HTTP缓存头
If-Modified-SinceIf-None-Match在请求中进行:

用户代理必须允许setRequestHeader()通过设置请求报头(例如,覆盖自动缓存验证If-None-MatchIf- Modified-Since),在这种情况下,304个未修改响应必须被通过。

因此,您可以使用如下代码:

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- ModifiedETag标头,因此您可以ifModified:true在下一次向该资源发送请求时让jQuery设置标头值。

需要注意的两件事:

  • 304个响应不携带数据。这是设计使然。假设是,如果您选择使用缓存,则 应该在缓存中已经有一个数据副本 !如果没有从服务器获取数据是一个问题(即,因为您还没有该数据),为什么要使用缓存?当手头有旧数据而只需要新数据时,应使用缓存。因此,使用304取回任何数据都不是问题。

  • jQuery必须具有If-None-Match前一个请求存储的上次修改日期或ETag(用于)。过程如下:

    • 首先获取:jQuery没有缓存信息,因此它不发送If-Modified-SinceIf-None-Match。当响应返回时,服务器可以宣布jQuery存储以供将来使用的最后修改的数据或ETag。

    • 后续提取:jQuery具有上一次提取的缓存信息,并将该数据转发到服务器。如果资源没有更改,则Ajax请求将获得304响应。如果资源已更改,则Ajax请求将获得200响应,以及jQuery的新缓存信息以用于下一次提取。

    • 但是,jQuery 在页面重装之间 不会 保留缓存信息(例如,在cookie中)。因此,由于jQuery没有要发送的缓存信息,因此页面重新加载后对资源的第一次获取 永远不会 是304(即,我们将其重置为“首次获取”的情况)。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); }

200即使浏览器提供了一个If-Modified-Since请求标头并得到一个304(在浏览器看到服务器的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。服务器不会发送“
a”,304因为它假定客户端没有最新版本的缓存副本(即,客户端宣布自2月12日以来已看到更改,但是2月13日发生了更改,客户端显然尚未看到)。

2020-07-26