jquery.ajax中的ifModified参数的误解

原来以为ifModified是为了在AJAX请求是发送 If-Modified-Since头,让服务端返回304。

测试代码如下:

$(function () {
test();
window.setTimeout(test, 5000);
}); function test() {
$.ajax({
type: "GET",
url: url,
ifModified: true,
success: function (d, textStatus, xhr) {
console.log(xhr.status);
console.log(d == undefined);
}
});
}

chrome:

network 为 304,304

console为  200 false, 304 true

ie10

network为 304, 304

console为 200 false, 304 true

firefox:

network为 304, 200(from cache)

console为 200 false, 200 false

上述测试是建立在已经访问过的基础上进行的,因此第一个请求都为304。

测试结果有几个疑问

1、为什么network监控的响应码与jqXHR.status有不一致的情况

2、chrome与ie10为什么第一次请求可以获取到内容,但同样的304返回,第二次却内容为undefined

3、firefox的第二次请求为什么直接从cache取数据

据文档 XHR API

For 304 Not Modified responses that are a result of a user agent generated conditional request the user agent must act as if the server gave a 200 OK response with the appropriate content. The user agent must allow setRequestHeader() to override automatic cache validation by setting request headers (e.g., If-None-Match, If-Modified-Since), in which case 304 Not Modified responses must be passed through.

就是说一般情况下,如果服务器返回304后,浏览器会进行转换。此时jqXHR.status应该是200,并且浏览器会自动将缓存的内容发送给jqXHR(304,服务器是不会发送内容信息的);

但可以通过jqXHR.setRequestHeader(If-Modified-Since)来重载该行为,如果服务端会返回304,则把该结果直接传递给 jqXHR。

据此我们回答了第一个疑问。

那么第二个问题是怎么回事?

查看了network中的请求,二次请求都有带 If-Modified-Since 的头,没什么发现

在jq的源码发现了以下代码

// Set the If-Modified-Since and/or If-None-Match header, if in ifModified mode.
if ( s.ifModified ) { if ( ( lastModified = jqXHR.getResponseHeader( "Last-Modified" ) ) ) {
jQuery.lastModified[ ifModifiedKey ] = lastModified;
}
if ( ( etag = jqXHR.getResponseHeader( "Etag" ) ) ) {
jQuery.etag[ ifModifiedKey ] = etag;
}
}

这是从响应获取Last-Modified头的过程

// Set the If-Modified-Since and/or If-None-Match header, if in ifModified mode.
if ( s.ifModified ) {
ifModifiedKey = ifModifiedKey || s.url;
if ( jQuery.lastModified[ ifModifiedKey ] ) {
jqXHR.setRequestHeader( "If-Modified-Since", jQuery.lastModified[ ifModifiedKey ] );
}
if ( jQuery.etag[ ifModifiedKey ] ) {
jqXHR.setRequestHeader( "If-None-Match", jQuery.etag[ ifModifiedKey ] );
}
}

这是设置If-Modified-Since头的过程

回到主题 ifModified 参数,文档如下

Allow the request to be successful only if the response has changed since the last request. This is done by checking the Last-Modified header. Default value is false, ignoring the header. In jQuery 1.4 this technique also checks the 'etag' specified by the server to catch unmodified data.

文档说得不是很清楚,看代码的实现。

jq根据jQuery.lastModified字典中是否包含数据来决定是否设置If-Modified-Since。那第一次请求jQuery.lastModified是没有数据的(JS是无法获取浏览器缓存的信息),因此第一次请求jqXHR是没有设置If-Modified-Since,那也就解释了第一次请求jqXHR.status为200。因为有了第一次请求,jq获取获取到第一次请求响应中的Last-ModifiedjQuery.lastModified有了数据,第二次请求jqXHR是会加上If-Modified-Since头的,因此jqXHR.status收到了浏览器直接传递过来的请求响应及内容。

搞定了第二个疑问。

第三个问题看了一些文档还没有明确的结论,估计是firefox在xhr在处理cache上有些不同,服务器响应头有包含

Cache-Control:public, max-age=18000

总结下:

jquery ifModified参数主要是为了在通过JS检测资源是否发生变化(304),并且在页面的第一个AJAX请求jqXHR.status永远不会返回304。

参考文档

1、http://www.w3.org/TR/2009/WD-XMLHttpRequest-20091119/

2、http://*.com/questions/5173656/how-to-check-if-jquery-ajax-request-header-status-is-304-not-modified

3、https://bugzilla.mozilla.org/show_bug.cgi?id=428916

上一篇:DOS tasklist 命令(转)


下一篇:jquery取消事件冒泡和取消默认行为