在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,8,点击确定,返回结果依然是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表示的是浏览器缓存文件的日期),也就是说,服务器上的文件比浏览器缓存文件新,那么发送新的请求以获得最新的文件,