传智播客旗下技术交流社区北京校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 小鲁哥哥 黑马程序员官方团队   /  2018-1-22 11:07  /  263 人查看  /  0 人回复  /   1 人收藏 转载请遵从CC协议

本帖最后由 小鲁哥哥 于 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>

使用这种方式,每次都会产生一个缓存文件,但会覆盖前面的缓存文件,所以始终只有一个。

1.png

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


分享至 : QQ空间
收藏

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马
关闭

站长推荐 上一条 /5 下一条