浅谈Ajax请求与浏览器缓存
在现代Web应用程序中，前端代码充斥着大量的Ajax请求，如果对于Ajax请求可以使用浏览器缓存，那么可以显著地减少网络请求，提高程序响应速度。
1.AjaxRequest
使用jQuery框架可以很方便的进行Ajax请求，示例代码如下：
$.ajax({
url:'url',
dataType:"xml",
cache:true,
success:function(xml,status){
}
});
非常简单，注意其中的第4行代码：cache：true，显式的要求如果当前请求有缓存的话，直接使用缓存。如果该属性设置为false，则每次都会向服务器请求，Jquery的Comments如下：
Ifsettofalse,itwillforcerequestedpagesnottobecachedbythebrowser.Settingcachetofalsealsoappendsaquerystringparameter,"_=[TIMESTAMP]",totheURL.
前端的工作也就这么多了，这样的话Ajax请求就可以利用浏览器缓存了吗？
继续看。
2.Http协议
Http协议的header部分定义了关于客户端是否应该做Cache，以及如何做Cache。具体参见HttpHeaderFieldDefinitions的14.9Cache-Control和14.21Expires。这里简单说一下：
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,01Dec199416:00:00GMT
Last-Modified
Last-Modified用GMT格式表明了文档的最后修改时间，客户端第二次请求此URL时，会在头部加入一个属性，询问该时间之后文件是否有被修改过。如果服务器端的文件没有被修改过，则返回状态是304，内容为空，这样就节省了传输数据量。
3.我的问题
这几天在做Web前端的时候，发现客户端的每次Ajax都会从服务器端请求数据，而这些数据的即时性没有那么高，没必要每次都请求。
在显式的给Ajax加上cache为true后，发现问题依旧。于是怀疑是服务端的问题，服务端使用jersey搭建了基于Restful的服务，代码片段如下：
@GET
@Produces("application/xml")
publicResponsegetProducts(){
Response.ResponseBuilderresponse=Response.ok(data);
returnresponse.build();
}
添加Cache控制后，进行测试，一切OK。
最后的代码如下：
@GET
@Produces("application/xml")
publicResponsegetProducts(){
Response.ResponseBuilderresponse=Response.ok(data);
//Expires3secondsfromnow..thiswouldbeideallybased
//ofsomepre-determinednon-functionalrequirement.
DateexpirationDate=newDate(System.currentTimeMillis()+3000);
response.expires(expirationDate);
returnresponse.build();
}
以上只是示例代码，还可以进行更精细的控制，例如使用CacheControl、Last-Modified等等。
以上这篇浅谈Ajax请求与浏览器缓存就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。