日期:2014-05-16  浏览次数:20688 次

Ajax 缓存: 两个重要的事实

事实1 : Ajax缓存和HTTP缓存效果相同

现代浏览器的HTTP系统和缓存系统要比Ajax的XMLHttpRequest对象更靠近底层. 在这个层面上,浏览器并不知道或关心Ajax请求。它只是服从正常的基于从服务器返回的HTTP响应头缓存规则。

如果你已经知道HTTP缓存,您可以将这种知识应用到Ajax的缓存。唯一真正的区别是,您可能需要以不同的方式为静态文件设置响应头。

以下HTTP响应头是可以用来做Ajax缓存的:

  • Expires:应该被应用在你知道内容何时被修改的情况下。 例如,如果是股票价格您可能会设置一个在10秒后过期的数值。对于照片,你可以设置一个更长时间的Expires头,因为你指望它永远不改变。Expires头允许浏览器在一段时间内可以重复使用缓存内容,并避免任何不需要的同服务器的交互过程.
  • Last-Modified:?设置这个标记会通知浏览器可以使用If-Modified-Since头来产生一个条件GET请求以便检查其本地缓存。如果数据不需要更新,服务器将使用HTTP 304状态码来响应此请求
  • Cache-Control:?如果允许,这应该被设置为'public',使其他用户可以在中间代理和缓存服务器上存储和共享数据,在Firefox上,这还将启用针对HTTPS的缓存

当然,如果您使用Ajax的POST方法,这并不适用,因为POST请求不会被缓存。如果您的Ajax请求有安全性要求,你应该总是使用POST方法,例如:银行帐户的资金转账。

我们创建了一个Ajax缓存例子来展示这些响应头的效果. 使用HttpWatch, 你可以看到我们在ajax响应头里面设置了上述全部3个响应头:

如果你以固定频率多次点击'Ajax Update'按钮, 你会发现ajax大约每隔1分钟更新一次,因为Expires头设置为在未来的1分钟后过期。在HttpWatch截图里面你可以看到重复点击刷新按钮导致ajax请求直接从浏览器缓存里面读取,没有发生任务网络活动(即在发送和接收列里面字节数都为0) :

最后一次点击发生在 1:06.531 ,因为缓存的数据已经超过1分钟,Ajax请求发生了一次网络通讯。从服务器返回的响应头200指明新的内容应该被重新下载。

事实2: IE浏览器不会刷新过期日期前的Ajax内容

有时,Ajax是用来在加载时填充网页的内容(如价格清单)。当页面加载完毕事件发生后,它直接被JavaScript调用,而不是依靠按一个按钮来触发。这使得Ajax调用表现为它好像是一个嵌入的资源

当你开发一个这样的网页时,通常的想法是试图通过更新嵌入的Ajax内容来刷新页面。对于其它嵌入的资源比如CSS或图片,浏览器自动发送的请求取决于F5 (刷新)或 Ctrl+F5 (强制刷新):

  1. F5(刷新) 如果原本的内容有一个Last-Modified 响应头,浏览器会建立一个有条件的更新请求. 浏览器使用If-Modified-Since 请求头使得服务器可以返回HTTP 304响应代码来避免不必要的下载。