jquery 之ajax cache

最新推荐文章于 2024-01-20 10:11:11 发布

weixin_30745641

最新推荐文章于 2024-01-20 10:11:11 发布

阅读量174

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/onedayof2010/p/5073851.html

本文详细介绍了使用jQuery实现AJAX请求缓存的具体方法。通过跟踪分析请求头If-Modified-Since和If-None-Match的设置过程，以及Last-Modified和ETag值的存储与利用，展示了如何有效减少重复请求，提高数据加载效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做一个企业通讯录的功能，功能很简单，我的本意是做数据存储并且做同步更新，时间原因以及服务端的同事更倾向于简单点的方式，呵呵，于是我们就采取了实时查询的方式。

由于get请求有点多，由于页面的生命周期就是打开页面-关闭页面，想到cache，但是由于公司是使用的原生的ajax，因此研究一下jq的ajax的缓存是如何写的。

jq的思路大概是检测到需要cache这个请求，就会在对象池中检测是不是存在该url的Last-Modified值，存储容器如下：

1 // Last-Modified header cache for next request
2 lastModified: {},
3 etag: {},

然后，在发送请求的时候检测是否cache后，有如下的代码：

1 // Set the If-Modified-Since and/or If-None-Match header, if in ifModified mode.
2 if ( s.ifModified ) {
3     if ( jQuery.lastModified[ cacheURL ] ) {
4         jqXHR.setRequestHeader( "If-Modified-Since", jQuery.lastModified[ cacheURL ] );
5     }
6     if ( jQuery.etag[ cacheURL ] ) {
7         jqXHR.setRequestHeader( "If-None-Match", jQuery.etag[ cacheURL ] );
8     }
9 }

这里的代码意思是如果说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收到了浏览器直接传递过来的请求响应及内容。

然后等到请求成功了的时候，

 1 if ( s.ifModified ) {
 2     modified = jqXHR.getResponseHeader("Last-Modified");
 3     if ( modified ) {
 4         jQuery.lastModified[ cacheURL ] = modified;
 5     }
 6     modified = jqXHR.getResponseHeader("etag");
 7     if ( modified ) {
 8         Query.etag[ cacheURL ] = modified;
 9     }
10 }