事实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 (强制刷新):
- F5(刷新) 如果原本的内容有一个Last-Modified 响应头,浏览器会建立一个有条件的更新请求. 浏览器使用If-Modified-Since 请求头使得服务器可以返回HTTP 304响应代码来避免不必要的下载。
- Ctrl+F5 (强制刷新) 导致浏览器发送一个没有条件的GET请求,其中Cache-Control请求头被设置为'no-cache'. 这代表不管浏览器需要的内容是否已经被缓存,所有的中间代理和缓存服务器都需要重新从原始服务器来下载此内容。
Firefox会将刷新类型传递给所有Ajax请求来刷新页面,因此任何Ajax派生的内容都会被更新。这个HttpWatch插件的屏幕快照显示了我们的Ajax缓存刷新 页面效果:
Firefox 确保Ajax请求是被假定为带条件的GET。在我们这个例子页面内,如果缓存的数据在10秒以内,服务器会返回304代码,如果数据过期 ,服务器会返回200的代码.
在 Internet Explorer中, 已加载的Ajax请求被视为和页面刷新无关的内容,用户的刷新动作也不会被传递到Ajax中。如果缓存的Ajax内容还没过期,IE不会发生GET请求到服务器,它直接从缓存读取内容,导致在HttpWatch中看到(Cache)数据的产生。下面是在IE中缓存没有过期时按F5的效果:
即时按Ctrl+F5, Ajax仍然从缓存中加载内容:
这意味这在IE中,即使你按强制刷新(Ctrl+F5),在内容过期之前,Ajax也不会更新。确保更新的唯一方法是从缓存中删除此记录。在HttpWatch中, 你可以通过使用下面的工具:
分享到:
相关推荐
Ajax 缓存问题 Ajax 缓存问题 Ajax 缓存问题 Ajax 缓存问题
《Ajax实战:实例详解》sources 全部源码
详细解读Jquery各Ajax函数:$.get(),$.post(),$.ajax(),$.getJSON()
Ajax控件:UPdatepanel使用
Ajax控件:UpdateproGress
这两个部分是笔者在“疯狂Java实训营”的培训讲义,是《疯狂Ajax讲义:Prototype/jQuery+DWR+Spring+Hibernate整合开发》的重点部分。第三部分则提供了2个综合性案例:Blog系统和电子拍卖系统,让读者将前面所学真正...
AJAX实例:根据邮编自动完成地址信息 AJAX实例:根据邮编自动完成地址信息
本书是ajax实战三部曲的最后一本书的源代码,非常适合初学者使用
ajax实战:配套源码 ajax实战:配套源码
ajax缓存有好处,但也有坏处,缓存有时候会导致误操作,影响用户体验,若你的WEB项目不需要ajax缓存功能,可按下述方法来禁止ajax缓存。 一、在ASP中禁止ajax缓存: ‘放在ASP网页最开头部分 Response.expires=0 ...
这两个部分是笔者在“疯狂Java实训营”的培训讲义,是《疯狂Ajax讲义:Prototype/jQuery+DWR+Spring+Hibernate整合开发》的重点部分。第三部分则提供了2个综合性案例:Blog系统和电子拍卖系统,让读者将前面所学真正...
vs2008中 Ajax错误: Sys未定义 vs2008中 Ajax错误: Sys未定义
清除AJAX的缓存; 清除AJAX的缓存 清除AJAX的缓存 清除AJAX的缓存
本书在简要介绍这两个库在宏观应用中的意义之后,再通过 QuickGallery图片浏览器示例探索突破传统 Web应用局限的捷径,研究 Prototype辅助类及其运行方式;随后介绍如何添加 scriptaculous特效和控件,如 资源...
Ajax实战:Prototype与Scriptaculous篇pdf
做一个项目用到Ajax,开始觉得挺好,后来发现一个问题,例如删除一项,恢复之后就不能再接着删除, 必须要等一段时间,后来知道是IE缓存的问题
Ajax效果:可拖拽的表格! 值得下载看看!资源免费,大家分享!!
Ajax基础:四天学会Ajax chm 本教程的作者是一位 Ajax 编程专家,他通过这本书向大家演示了HTML、JavaScript™ 技术、DHTML 和 DOM 这些技术是如何协同工作的—— 从总体概述到细节的讨论 —— 使高效的 Web 开发...
Ajax应用:jQuery+PHP+MySQL发表评论
ajax框架:dwr 实战(包括整合 pdf文档