来源:自学PHP网 时间:2015-04-14 14:50 作者: 阅读:次
[导读] Ajax请求与浏览器缓存在现代Web网站建设中,前端代码充斥着大量的Ajax请求,如果对于Ajax请求可以使用浏览器缓存,那么可以显著地减少网络请求,提高程序响应速度。1. Ajax Request使用...
Ajax请求与浏览器缓存
在现代Web网站建设中,前端代码充斥着大量的Ajax请求,如果对于Ajax请求可以使用浏览器缓存,那么可以显著地减少网络请求,提高程序响应速度。 1. Ajax Request 使用jQuery框架可以很方便的进行Ajax请求,示例代码如下: [javascript] $.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服务,代码片段如下: [java] @GET @Produces("application/xml") public Response getProducts() { Response.ResponseBuilder response = Response.ok(data); return response.build(); } 添加Cache控制后,进行测试,一切OK。 最后的代码如下: [java] @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等等。 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com