[第二弹]ajax缓存问题

在IE浏览器下,每当发出一个ajax请求时,响应结果都会缓存在浏览器客户端中,当你想再次请求同一个请求时,浏览器不会发送请求,而是直接将缓存的结果显示出来

代码1-1,demo01.html:

<html>
	<head>
		<Meta http-equiv="Content-type" content="text/html;charset=utf-8">
		<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
		<script src="public.js"></script>
	</head>
	<body>
		
		<script>
			window.onload = function(){
				document.getElementById('btn1').onclick = function(){
					var first = document.getElementById('first').value;
					var second = document.getElementById('second').value;
					var url = 'demo01.PHP?first=' + first + '&second=' + second;
					var xmlHttp = createXMLHttp();
					xmlHttp.open('get',url);
					xmlHttp.onreadystatechange = function(){
						if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
							var result = xmlHttp.responseText;
							document.getElementById('result').value = result;
						}
					};
					xmlHttp.send(null);
				};
			};
		</script>
		
		<p>one:<input type="text" id="first" name="first" > </p>
		<p>two:<input type="text" id="second" name="second"> </p>
		<p>result<input type="text" id="result" > </p>
		<input type="button" id="btn1" value="确定">
	</body>
</html>

代码1-2,demo01.PHP

<?PHP
	$first = $_GET['first'];
	$second = $_GET['second'];
	echo $first + $second
?>

demo01.html 让用户输入两个数据,并将数据发送到服务器,demo01.PHP计算两数之和,然后将结果返回至浏览器.

例如,输入12,8,返回20

当我把demo01.PHP第四行代码修改为echo $first - $second,再次输入12,点击确定,返回结果依然是20,并不是4

解决办法,

在请求url后面加上一些附加值,例如

var url = 'demo01.PHP?first=' + first + '&second=' + second + '&n=' + Math.random();

或者

var url = 'demo01.PHP?first=' + first + '&second=' + second + '&n=' + new Date().getTime();

上面两种方法会产生大量缓存文件,

第三种方法:

在

xmlHttp.open('get',url);

后面加一行代码:

xmlHttp.setRequestHeader('If-Modified-Since','0');

If-Modified-since:date的意思是:当所请求的文件的修改日期落后于date(date表示的是浏览器缓存文件的日期),也就是说,服务器上的文件比浏览器缓存文件新,那么发送新的请求以获得最新的文件

[第二弹]ajax缓存问题

猜你在找的Ajax相关文章