Saturn's Weblog

技术驱动未来

防止AJAX动态结果在前端页面缓存的方法

2009-05-24 16:06:19 @ 墨尔本所属分类：HTML/CSS/JavaScript

在利用AJAX从后台程序提取数据，然后在前端页面显示出来的过程中，我们经常会碰到AJAX提取的数据被缓存，导致结果异常的问题。

具体原因是因为AJAX依赖于JavaScript，而浏览器会自动将JavaScript代码和文件数据缓存在客户端，这有利于用户下次访问时页面的快速下载和解析。

要解决数据被缓存，大概有两种做法。

第一种，是在客户端进行，在AJAX发送请求到后台数据处理页面的URL上加一个随机字符串即可。这样一来，浏览器会认为AJAX发出的HTTP请求每次都不同（URL不同），从而每次都重新请求。具体做法如下：

给客户端GET请求上添加随机字符串
1	xmlHttp.open("GET", "ajax.php?r="</span><span style="color: #339933;">+new Date().getTime(), true);

既然是随机字符串，还可以使用：+math.random()，只要保持字符串随机即可。

另外一种是在服务器端进行。具体做法是修改HTTP头信息，手动设置让其过期。下面以PHP为例说明：

客户端修改HTTP头防止缓存
1 2 3 4	header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); // always modified header ("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1 header ("Pragma: no-cache"); // HTTP/1.0

客户端修改HTTP头防止缓存

 header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past
 header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); // always modified
 header ("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
 header ("Pragma: no-cache"); // HTTP/1.0

其他语言，比如ASP，J2EE，做法与此非常类似。

通常情况下，我们只需要选其以上两种方法的其中一种即可。

Trackback(UTF-8): http://www.cnSaturn.com/trackback/48

共有0条精彩评论：

到目前为止，还没有任何评论

很抱歉，本文的评论功能暂时被关闭。

日志分类

Saturn's Weblog

技术驱动未来

防止AJAX动态结果在前端页面缓存的方法

2009-05-24 16:06:19 @ 墨尔本 所属分类：HTML/CSS/JavaScript

2009-05-24 16:06:19 @ 墨尔本所属分类：HTML/CSS/JavaScript