您的位置：首页 > 其它

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

2015-02-13 11:41 176 查看

在利用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 "用户名可以用";
}
?>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航