浅谈Ajax请求与浏览器缓存

程序员文章站 2023-12-24 15:30:57

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

在现代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时用到：

response时用到：

说明：

-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请求与浏览器缓存就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

浅谈Ajax请求与浏览器缓存