通常
jqXHR.status
返回200
,即使请求头是"304 Not Modified"。
ifModified:true
并没有帮助太多,因为它会破坏XHR数据请求。jqXHR.status
返回200
,即使请求头是"304 Not Modified"。
ifModified:true
并没有帮助太多,因为它会破坏XHR数据请求。If-Modified-Since
或If-None-Match
来使Ajax产生304响应:setRequestHeader()
通过设置请求标头(例如If-None-Match
、If-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-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 无法保留缓存信息,但目前它不这样做。
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); }
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日的更改)。If-Modified-Since
+Last-Modified
ж–№жі•пјҢдёҚе№ёзҡ„жҳҜпјҢChromeжҖ»жҳҜиҝ”еӣһ200пјҢиҖҢFirefoxиҝ”еӣһ301зј“еӯҳз»“жһңгҖӮзңӢиө·жқҘпјҢеңЁXMLHttpRequestдёӯжІЎжңүжңүж•Ҳзҡ„зј“еӯҳйӘҢиҜҒеҸҜиғҪгҖӮ - BinyaminIf-Modified-Since
值发送 304 响应吗?当服务器实际发送 304 响应时,脚本才能观察到 304 响应。使用显式的 If-Modified-Since
允许脚本看到现有的 304 响应(而不是隐藏为 200);它不会在实际响应中生成不存在的 304 状态。 - apsillers如果响应来自缓存,头信息也将被缓存。我把这个当作一个机会。我的服务器发送一个唯一的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应该是一个哈希函数,用于验证“解码后的数据与最初发送的数据相同”。
var cache;
$.ajax({
...
beforeSend: function() {
cache = setTimeout(function() {
console.log('The content not cached jet.');
}, 300);
},
success: function(data) {
if (cache) {
clearTimeout(cache);
}
}
});
也许试试这个?
$.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
}
});
readystatechange
事件在3xx响应中不会被触发,所以当status
为304时,也不会进入complete
状态。 - JAAulde打开浏览器的检查器,它会显示有关Ajax请求的信息,包括状态。
对于Chrome,请右键单击并选择检查元素,然后转到“网络”选项卡。
对于Firefox,只需使用Firebug并按照相同的步骤操作即可。