本帖最后由 小鲁哥哥 于 2018-1-22 11:12 编辑
【济南校区】PHP模块讲解之ajax(三)
前面几节课我们讲了一下ajax的基本原理及数据的传输，接下来我们今天要讲的就是ajax在实际开发中会遇到的问题--缓存问题
首先来说一下缓存问题存在的原因： IE浏览器请求到的资源会被自动缓存，如果下次请求时还是使用相同的url和参数，那么会默认从缓存文件中找到结果并使用。
一、解决缓存问题 思路：每次请求之前存在的url的文件时，会使用缓存。如果每次请求的url都是不同的，则每次都会发送新的请求。
1、 随机数
var url=’url?_=’+Math.random(); 使用这种方式不是说不产生缓存文件，而是强制让每次请求的url是唯一的。并且会在客户端产生大量缓存文件。在理论上来说，还有可能两次随机的值是相同的。
[JavaScript] 纯文本查看 复制代码 <script>
//获取用户名
var username = $('#username').value;
//创建ajax对象
var xhr = createxhr();
//初始化
xhr.open('get','demo.php?username='+username+'&_='+Math.random());
//回调函数
xhr.onreadystatechange = function(){
//判断状态码
if(xhr.readyState == 4 && xhr.status ==200){
//如果存在
if(xhr.responseText ==1 ){
$('#msg').innerHTML = '<fontcolor="red">用户名已被占用</font>';
}else{//不存在的情况
$('#msg').innerHTML = '<fontcolor="green">用户名可以使用</font>';
}
}
}
//发送请求
xhr.send(null);
</script>
2、 时间戳
var url=’url?_=’+new Date().getTime(); 以下这种写法同样也会产生大量缓存文件，但永不重复。
[JavaScript] 纯文本查看 复制代码 <script>
//获取用户名
var username = $('#username').value;
//创建ajax对象
var xhr = createxhr();
//初始化
xhr.open('get','demo.php?username='+username+'&_='+new Date().getTime());
//回调函数
xhr.onreadystatechange = function(){
//判断状态码
if(xhr.readyState == 4 && xhr.status == 200){
//如果存在
if(xhr.responseText ==1 ){
$('#msg').innerHTML = '<font color="red">用户名已被占用</font>';
}else{//不存在的情况
$('#msg').innerHTML = '<font color="green">用户名可以使用</font>';
}
}
}
//发送请求
xhr.send(null);
</script>
3、 设置请求头
xhr.setRequestHeader("If-Modified-Since","0"); 通过设置请求头的信息，表示当前缓存文件的最后修改时间
[JavaScript] 纯文本查看 复制代码 <script>
//获取用户名
var username = $('#username').value;
//创建ajax对象
var xhr = createxhr();
//初始化
xhr.open('get','demo.php?username='+username);
//设置请求头
xhr.setRequestHeader('If-Modified-Since',"0");
//回调函数
xhr.onreadystatechange = function(){
//判断状态码
if(xhr.readyState == 4 && xhr.status == 200){
//如果存在
if(xhr.responseText ==1 ){
$('#msg').innerHTML = '<font color="red">用户名已被占用</font>';
}else{//不存在的情况
$('#msg').innerHTML = '<font color="green">用户名可以使用</font>';
}
}
}
//发送请求
xhr.send(null);
</script>
使用这种方式，每次都会产生一个缓存文件，但会覆盖前面的缓存文件，所以始终只有一个。
4、 设置响应头
header("Cache-Control: no-cache, must-revalidate"); [PHP] 纯文本查看 复制代码 <?php
//设置响应头
header("Cache-Control:no-cache,muset-revalidate");
$username = $_GET['username'];
mysql_connect('localhost','root','11111');
mysql_select_db('project');
mysql_query('set names utf8');
$result = mysql_query("select * from member where username = '$usernmae'");
到此为止，ajax的缓存问题就给大家介绍到这里，不知道大家对我今天讲解的ajax的缓存问题理解的如何，有什么问题可以在下面留言哦~ 如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友！ 黑马程序员济南中心联系电话：0531-55696830
| 
收藏
淘帖
踩
