黑马程序员技术交流社区

标题: 【济南校区】PHP模块讲解之ajax(三) [打印本页]

---

作者: 小鲁哥哥    时间: 2018-1-22 11:07
标题: 【济南校区】PHP模块讲解之ajax(三)

【济南校区】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

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2