Ajax的缓存问题

因为一直对Ajax都有一种望而生畏的感觉,所以一直也没仔细的研究过,好多事情都一样当你一开始觉得很难的时候它的难度就会比你预想的还难.大概这就是心理作用的影响吧.

今天要做一个无刷新验证用户名是否重复的功能不得不用Ajax了所以也就硬着头皮看了一下,本来看的是jQuery的Ajax的使用,但是前面介绍了一下传统的Ajax,看了一下竟然没有想象的那么难,于是试着用传统的方式做了一个小验证.

代码如下:

    <script language="javascript" type="text/javascript">        var xmlHttpReq = null;        function Ajax() {            var re = /^[a-zA-Z0-9]{4,16}$/;            if (!re.test($("#<%=txtName.ClientID %>").attr("value"))) {                alert("账号4-16位；只限数字(0-9)和英文(a-z)"); return;            }            if (window.ActiveXObject) {                xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");            } else if (window.XMLHttpRequest) {                xmlHttpReq = new XMLHttpRequest();            }            xmlHttpReq.open("get", "ControllerPage.aspx?t=" + new Date() + "&Page=usermanage&Act=checkname&Name=" + $("#<%=txtName.ClientID %>").attr("value"), true);            xmlHttpReq.onreadystatechange = RequestCallBack;            xmlHttpReq.send(null);        }        function RequestCallBack() {            if (xmlHttpReq.readyState == 4) {                if (xmlHttpReq.status == 200) {                    if (xmlHttpReq.responseText == "ok") {                        alert("账号可以使用!");                        $("#<%=btnOK.ClientID %>").attr("disabled", "");                    }                    else {                        alert("账号已存在！"); $("#<%=btnOK.ClientID %>").attr("disabled", "disabled");                    }                }            }        }        </script>

 

 

遇到的问题:

1.验证无效,用alert打了一下断点发现xmlHttpReq.status的值是500,于是进入ControllerPage.aspx,发现是因为这个页面会报黄页,改正bug后就好了.

2.添加新的用户后再添加相同的用户名结果验证的提示还是可以使用,但是如果刷新一下ControllerPage.aspx后验证功能就又好使了,我就郁闷了,后来发现是缓存的问题,解决方式如下 

xmlHttpReq.open("get", "ControllerPage.aspx?t=" + new Date() + "&Page=usermanage&Act=checkname&Name=" + $("#<%=txtName.ClientID %>").attr("value"), true);

加上了一个随时都在变的时间戳就好了,缓存问题得以解决,在这里要感谢一位大神同事的帮助.

 

上面是我遇到的问题以及解决方式,mark一下,希望对遇到此问题的同学有用.

 

贴上一篇在百度查到的解决方式:

 

 

Ajax要使用时间戳提交 及时更新的

当你的ajax需要的数据是及时更新的，也就是说在没有刷新页面的情况下，得到其他操作的新数据，你的ajax提交url中加入一个时间戳，这样，就可以避免页面使用缓存了，原理是：时间戳本事就是一个随时更新的变量，时间戳只是一个叫法，你可以这么理解：你的url中加了一个随时更新的变量，，那么，提交时是不会使用缓存的。
var url = "insertData.jsp?textName="+nameAdd+"&date="+new Date().getTime();

var url = "insertData.jsp?textName="+nameAdd+"&date="+Math.random();

ajax清空缓存的问题

 

在ajax的应用中，当用户访问一次后，再进行访问当XMLHttpRequest请求不变的时，在ie中会出现这样的现象，那就是取数据不会到服务器端取，而是直接从ie的缓存中取，则会就是ie的缓存问题。在ajax中解决缓存的问题采用时间戳的方式，即为每个XNLHttpRequest请求后面加一个时间戳的标志，从而保证每次请求都是新的从而解决ie缓存问题。