网站建设中的Ajax请求与浏览器缓存

2019独角兽企业重金招聘Python工程师标准>>>

Ajax请求与浏览器缓存

在现代Web网站建设中，前端代码充斥着大量的Ajax请求，如果对于Ajax请求可以使用浏览器缓存，那么可以显著地减少网络请求，提高程序响应速度。

1. Ajax Request

使用jQuery框架可以很方便的进行Ajax请求，示例代码如下：

1

$.ajax({

2	url : 'http://www.hualai.net.cn',

3	dataType : "xml",

4	cache: true,

5	success : function(xml, status){

6

}

7

});

非常简单，注意其中的第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时用到：

1	| "no-cache"

2	| "no-store"

3	| "max-age" "=" delta-seconds

4	| "max-stale" [ "=" delta-seconds ]

5	| "min-fresh" "=" delta-seconds

6	| "no-transform"

7	| "only-if-cached"

8	| "cache-extension"

response时用到：

01	| "public"

02	| "private" [ "=" <"> field-name <"> ]

03	| "no-cache" [ "=" <"> field-name <"> ]

04	| "no-store"

05	| "no-transform"

06	| "must-revalidate"

07	| "proxy-revalidate"

08	| "max-age" "=" delta-seconds

09	| "s-maxage" "=" delta-seconds

10	| "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服务，代码片段如下：

1	<a href="http://my.oschina.net/get" class="referer" target="_blank">@GET </a>

2	@Produces("application/xml")

3	public Response getProducts() {

4	Response.ResponseBuilder response = Response.ok(data);

5	return response.build();

6

}

添加Cache控制后，进行测试，一切OK。

最后的代码如下:

01	<a href="http://my.oschina.net/get" class="referer" target="_blank">@GET </a>

02	@Produces("application/xml")

03	public Response getProducts() {

04	Response.ResponseBuilder response = Response.ok(data);

05	// Expires 3 seconds from now..this would be ideally based

06	// of some pre-determined non-functional requirement.

07	Date expirationDate = new Date(System.currentTimeMillis() + 3000);

08	response.expires(expirationDate);

09	return response.build();

10

}

以上只是示例代码，还可以进行更精细的控制，例如使用CacheControl、Last-Modified等等。

转载于:https://my.oschina.net/Weiwanbinblogs/blog/198115