使用时间戳解决浏览器缓存问题

最新推荐文章于 2023-07-28 09:58:03 发布

iteye_2022

最新推荐文章于 2023-07-28 09:58:03 发布

阅读量543

点赞数

文章标签： javascript ViewUI

在IE或者其他的很多浏览器中，如果你每次请求的地址是相同的，浏览器就不会去连接服务器而是去读取缓存，这

样对于很多应用来时是非常好的，可以降低服务器的压力或者减少带宽的使用，但是对于ajax应用，很多都是必须保持

时时的连接与服务器进行交互，所以需要使用一个小技巧，时间戳来使每次的请求地址都不同，从而跳过浏览器的缓存

机制实现每次的请求服务器，这样的功能在图片验证码的时候也是比较常用的一种方法。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ajax.html</title>
	<script type="text/javascript" src="/Ajax/js/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		function test(){
			//1.获取文本框中的值
			var value = $("#userName").val();
			//2.将文本框中的内容发送给后台服务器
			var url = "/Ajax/servlet/AjaxServlet?name="+value;
			url = convertURL(url);
			alert(url);
			$.get(url,null,callback);
		}
		//给url地址增加时间戳，骗过浏览器，不读去缓存
		function convertURL(url){
			var timestmp = (new Date()).valueOf();
			//将时间戳追加到url上面
			url = url+ "&t=" +timestmp;
			return url; 
		}
		
		function callback(data){//回调函数
			//3.接受服务器的返回的数据
			//alert(data);
			//4.将结果显示在页面中
			$("#div1").html(data);
		}
	</script>
  </head>
  
  <body>
    用户名:<input type="text" id="userName" οnblur="test();"/><span id="div1" style="color: red"></span>
	<br/>
    密码:<input type="password" id="password" /><br/>
    邮箱:<input type="text" id="mail" />
  </body>
</html>

可以看到，我们使用date.valueof方法，这个方法返回毫秒级别的数据，可以说是唯一的，所以可以作为时间戳。