下面小编就为大家带来一篇浅谈ajax请求与浏览器缓存。小编觉得挺不错的,现在就分享ajax源码给大家,也给大家做个参考。对ajax感兴趣的一起跟随小编过来看看吧
在现代web应用程序中,前端代码充斥着大量的ajax请求,如果对于ajax请求可以使用浏览器缓存,那么可以显著地减少网络请求,提高程序响应速度。
1. ajax request
使用jquery框架可以很方便的进行ajax请求,示例代码如下:
$.ajax({
url : 'url',
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请求就可以利用浏览器缓存了吗?
继续看。
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的服务,代码片段如下:
@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等等。
相关推荐:
关于ajax技术中servlet末尾的输出流实例详解
ajax技术组成与核心原理讲解
ajax异步加载解析实例分享
以上就是浅谈ajax请求与浏览器缓存的详细内容。