加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

[第二弹]ajax缓存问题

发布时间:2020-12-16 00:20:23 所属栏目:百科 来源:网络整理
导读:在IE浏览器下,每当发出一个ajax请求时,响应结果都会缓存在浏览器客户端中,当你想再次请求同一个请求时,浏览器不会发送请求,而是直接将缓存的结果显示出来 代码1-1,demo01.html: htmlheadmeta http-equiv="Content-type" content="text/html;charset=utf-8"sc

在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表示的是浏览器缓存文件的日期),也就是说,服务器上的文件比浏览器缓存文件新,那么发送新的请求以获得最新的文件

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读