Ajax中对于与禁止缓存的两种方式

在利用Ajax进行页面某一部分进行异步刷新的时候，经过抓包，可以发现一个问题就是：如果表单的内容毫无变化，它并未向服务器发出请求，而是向浏览器缓存发送的请求，从而提取的内容，这是浏览器的一种内部默认机制，但是有时候，我们不需要这样做，需要的是每次都是向服务器发送请求，进过学习，发现有两种方式可以实现禁止缓存：

1：发送请求的同时发送一个动态的数据，所谓动态，就是一直变化，例如Date（）；这样每次发送的请求就“不一样”，从而间接的实现了禁止缓存，以下是一个例子：

var url = "02.PHP?mytime = "+new Date()+"&usename="+$("usename").value;

2：就是直接在返回数据的页面添加一句禁止缓存的两条语句，这个是对数据全部禁止缓存：

header("Content-Type: text/xml; charset=utf-8");
header("Cache-Control: no-cache");

说明一下：第一句并不是禁止缓存，而是提示以UTF-8对的编码方式返回数据，一般情况下两者需要结合在一起，还有要注意的一点就是上面的引号不可以放在中间，至少在我的编辑器里面是这样，不是道上面原因，所以个人建议放在靠左位置最为安全

以下是我的一份实例代码（包含两份PHP 文件，一份为发送，一份为接收）

发送页面：

<html>
	<head>
		<title>页面1</title>
		<Meta charset = "UTF-8"/>
		<script type = "text/javascript">
			
			function getXmlHttpobject(){
				var xmlHttpRequest;
				//根据不同浏览器（IE和非IE分别使用不同的方法）
				if(window.ActiveXobject){
					/*window.alert("是IE浏览器");*/
					xmlHttpRequest = new ActiveXobject("Microsoft.XMLHTTP");//IE特有的
				}
				else{
					xmlHttpRequest = new XMLHttpRequest();//非IE的方法
				}
				return xmlHttpRequest;
			}
			var myXmlHttpRequest;
			function checkName(){
				myXmlHttpRequest = getXmlHttpobject(); //创建一个getHttpRequest（Ajax）对象**********第一条线****
				if(myXmlHttpRequest){  //如果有返回值，说明连接成功，否则不成功
					/*window.alert("创建ajax引擎成功");*/
					/*var url = "02.PHP?mytime = "+new Date()+"&usename="+$("usename").value;*/
					/*上面是禁止读取缓存的一种方式*/
					/*var url = "02.PHP?usename="+$("usename").value;*/
					var url = "02.PHP";
					var data = "usename="+$("usename");
					/*window.alert(url);*/
					myXmlHttpRequest.open("post",url,true);
					/*必须要加的一句话*/
					myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
					myXmlHttpRequest.onreadystatechange = chuli;
					/*myXmlHttpRequest.send(null); */                           //发送  //***************第二条线****
					myXmlHttpRequest.send(data);                            //发送  //***************第二条线****
				}
				else{
					window.alert("创建失败！！");
				}
			}
			function chuli(){
				/*window.alert("处理函数被调用");*/
				if(myXmlHttpRequest.readyState == 4){
					 //取回值，根据返回的文本
					/*window.alert("服务器返回"+myXmlHttpRequest.responseText);*///三号线返回//************第三条线***
					$("myres").value = myXmlHttpRequest.responseText;
				}
			}
			function $(id){
				return document.getElementById(id);
			}
		</script>
	</head>
	<body>
		<form action = "???" method = "post">
			用户名：<input type = "text" name = "usename1" id = "usename"/>
			<input type = "button" value = "验证用户名" onclick = "checkName();"/>
			<input type = "text" id = "myres" style = "border-width : 0px; color : red;" /><br/>
			用户密码<input type = "password" name = "password" /><br/>
			电子邮件<input type = "text" name = "email" /><br/>
			<input type = "submit" value = "提交按钮"/>
		</form action = "???" method = "post">
		<form>
			用户密码<input type = "password" name = "password" /><br/>
			电子邮件<input type = "text" name = "email" /><br/>
			<input type = "submit" value = "用户注册" />
		</form>
	</body>
</html>

接收页面：

<?PHP
	/**下面是浏览器禁止缓存的第二种方式直接定义
	这里，一定要注意引号的位置，发现引号在中间竟然出现错误*/
	header("Content-Type: text/xml; charset=utf-8");
	header("Cache-Control: no-cache");
	$usename = $_POST['usename'];      //3号线接收
	/*echo "用户名是".$usename; *///读取缓存的情况一定
	if($usename == "xuning"){
		echo "用户名已经存在";
	}else{
		echo "用户名可以用";
	}
?>

原文链接：https://www.f2er.com/ajax/163737.html

Ajax中对于与禁止缓存的两种方式

猜你在找的Ajax相关文章