Ajax请求与浏览器缓存
在现代Web网站建设中,前端代码充斥着大量的Ajax请求,如果对于Ajax请求可以使用浏览器缓存,那么可以显著地减少网络请求,提高程序响应速度。
1. Ajax Request
使用jQuery框架可以很方便的进行Ajax请求,示例代码如下:
$.ajax({
url : 'http://www.hualai.net.cn',
dataType : "xml",
cache: true,
success : function(xml, status){
}
});
非常简单,注意其中的第4行代码:cache:true,显式的要求如果当前请求有缓存的话,直接使用缓存。如果该属性设置为 false,则每次都会向网站服务器请求,Jquery的Comments如下:
If set to false, it will force requested pages not to be cached by the browser. Setting cache to false also appends a query string parameter, "_=[TIMESTAMP]", to the URL.
前端的工作也就这么多了,这样的话Ajax请求就可以利用web浏览器缓存了吗?
继续看。
2. Http 协议
Http协议的header部分定义了关于客户端是否应该做Cache,以及如何做Cache。具体参见Http Header Field Definitions 的 14.9 Cache-Control 和 14.21 Expires。这里简单说一下:
Cache-Control
Cache-control用于控制HTTP缓存(在HTTP/1.0中可能部分没实现,仅仅实现了Pragma: no-cache)
数据包中的格式:
Cache-Control: cache-directive
cache-directive可以为以下:
request时用到:
| "no-cache"
| "no-store"
| "max-age" "=" delta-seconds
| "max-stale" [ "=" delta-seconds ]
| "min-fresh" "=" delta-seconds
| "no-transform"
| "only-if-cached"
| "cache-extension"
response时用到:
| "public"
| "private" [ "=" <"> field-name <"> ]
| "no-cache" [ "=" <"> field-name <"> ]
| "no-store"
| "no-transform"
| "must-revalidate"
| "proxy-revalidate"
| "max-age" "=" delta-seconds
| "s-maxage" "=" delta-seconds
| "cache-extension"
说明:
- -Public 指示响应可被任何缓存区缓存。
- -Private 指示对于单个用户的整个或部分响应消息,不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息,此响应消息对于其他用户的请求无效。
- -no-cache 指示请求或响应消息不能缓存(HTTP/1.0用Pragma的no-cache替换)
- -no-store 用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
- -max-age 指示客户端可以接收生存期不大于指定时间(以秒为单位)的响应。
- -min-fresh 指示客户端可以接收响应时间小于当前时间加上指定时间的响应。
- -max-stale 指示客户端可以接收超出超时期间的响应消息。如果指定max-stale消息的值,那么客户端可以
接收超出超时期指定值之内的响应消息。
Expires
Expires 表示Cache的有效时间,允许客户端在这个时间之前不去发请求,等同max-age的效果。但是如果同时存在,则被Cache-Control的max-age覆盖。
格式:Expires = "Expires" ":" HTTP-date
示例:Expires: Thu, 01 Dec 1994 16:00:00 GMT
Last-Modified
Last-Modified用GMT格式表明了文档的最后修改时间,客户端第二次请求此网站URL时,会在头部加入一个属性,询问该时间之后文件是否有被修改过。如果网站服务器端的文件没有被修改过,则返回状态是304,内容为空,这样就节省了传输数据量。
3. 我的问题
这几天在做Web前端的时候,发现客户端的每次Ajax都会从网站服务器端请求数据,而这些数据的即时性没有那么高,没必要每次都从我们建设的网站请求。
在显式的给Ajax加上cache为true后,发现问题依旧。于是怀疑是网站服务端的问题,网站服务端使用 jersey 搭建了基于Restful的web服务,代码片段如下:
@GET
@Produces("application/xml")
public Response getProducts() {
Response.ResponseBuilder response = Response.ok(data);
return response.build();
}
添加Cache控制后,进行测试,一切OK。
最后的代码如下:
@GET
@Produces("application/xml")
public Response getProducts() {
Response.ResponseBuilder response = Response.ok(data);
// Expires 3 seconds from now..this would be ideally based
// of some pre-determined non-functional requirement.
Date expirationDate = new Date(System.currentTimeMillis() + 3000);
response.expires(expirationDate);
return response.build();
}
以上只是示例代码,还可以进行更精细的控制,例如使用CacheControl、Last-Modified等等。
分享到:
相关推荐
《高性能网站建设指南》内容丰富,主要包括减少HTTP请求、Edge Computing技术、Expires Header技术、Gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复...
10. **利用浏览器缓存**:通过设置合适的HTTP缓存头,可以让浏览器缓存资源,减少后续请求的时间。 这本书还介绍了如何使用工具如YSlow(由Steve Souders开发的Firefox插件)来评估和改进网站性能。它不仅仅是一份...
《高性能网站建设指南》内容丰富,主要包括减少HTTP请求、Edge Computing技术、Expires Header技术、Gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复...
《高性能网站建设指南》内容丰富,主要包括减少HTTP请求、Edge Computing技术、Expires Header技术、Gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复...
《高性能网站建设指南》内容丰富,主要包括减少HTTP请求、Edge Computing技术、Expires Header技术、Gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复...
《高性能网站建设指南》结合Web2.0以来Web开发领域的最新形势和特点,介绍了网站性能问题的现状、产生的原因,以及改善或解决性能问题的原则、技术技巧和最佳实践。重点关注网页的行为特征,阐释优化Ajax、CSS、...
《高性能网站建设指南》内容丰富,主要包括减少HTTP请求、Edge Computing技术、Expires Header技术、Gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复...
《高性能网站建设指南》内容丰富,主要包括减少HTTP请求、Edge Computing技术、Expires Header技术、Gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复...
《高性能网站建设指南》内容丰富,主要包括减少HTTP请求、Edge Computing技术、Expires Header技术、Gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复...
《高性能网站建设指南》结合Web2.0以来Web开发领域的最新形势和特点,介绍了网站性能问题的现状、产生的原因,以及改善或解决性能问题的原则、技术技巧和最佳实践。重点关注网页的行为特征,阐释优化Ajax、CSS、...
《高性能网站建设指南》结合Web2.0以来Web开发领域的最新形势和特点,介绍了网站性能问题的现状、产生的原因,以及改善或解决性能问题的原则、技术技巧和最佳实践。重点关注网页的行为特征,阐释优化Ajax、CSS、...
【压缩包子文件的文件名称列表】中的"23公司网站建设ASPAC" 可能是指这个源码项目包含了23个与公司网站建设和Asp相关的文件或子目录。这些文件可能包括HTML页面、ASP脚本、数据库连接文件、样式表(CSS)、...
浏览器缓存可以通过修改HTTP协议中的Header参数(如Cache-Control、Expires、Pragma、Last-Modified、Etag)来实现。利用HTTP 1.1协议的pipelining特性,应尽量使用GET请求而非POST请求,并通过gzip等方法压缩页面以...
《高性能网站建设指南》内容丰富,主要包括减少HTTP请求、Edge Computing技术、Expires Header技术、Gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复...
这个压缩包文件“学校实训毕业商用项目-网站建设企业模板.zip”包含了用于学校实训和毕业编程项目的前端源码,主要用于创建企业级的网站模板。在这个项目中,学生可以学习和实践HTML(超文本标记语言)这一基础网页...
这包括浏览器缓存、服务器端缓存(如Redis或Memcached)以及数据库级别的缓存。合理设置缓存更新策略,避免数据不一致,同时确保快速响应用户请求。 5. **内容压缩与编码**:GZIP压缩可以有效减小传输数据量,加快...
在这个毕业设计项目中,我们将深入探讨如何使用ASP技术构建一个完整的交友网站,包括源代码分析和相关理论阐述。 1. **ASP基础** - ASP的工作原理:ASP文件在服务器上执行,生成HTML代码,然后发送到客户端浏览器...