关于AJAX请求服务器后缓存数据,造成没有及时刷新的问题

最近在做项目的时候,使用了ajax去请求服务器的数据!刚开始还可以，我测试一切运行正常（我不是专业的测试人员哈!所以还是有些问题没有测出来哈）!后来ajax请求的数据变化了,但是页面数据没有变，依然是第一次的数据!这个问题害我整了好大半天啊![还是自己技术不到位啊！] 没办法遇到问题还是要解决啊!只有硬着头皮弄了撒! 因为ajax请求也是到后台页面执行的,那就断点吧! 嘿嘿，通过断点我发现了问题! 每次ajax请求他只有第一次去后台，后面的他就不会去后台了!如果你其他按钮把数据改变了，因为ajax第二次以后都不会去后台执行去数据了!所以数据没有及时刷新[数据被缓存了,如果你重启IE你修改的数据就可以看到了]，有点希望了! 至少症状找到了撒！接下就是怎么解决这个问题啊! 嘿，后来和Bobby同事提醒我在ajax的请求url后面加一个时间戳参数试一试! 那就死马当活马医了!反正我也没有好的方法! 哈哈居然可以了! [在此感谢bobby]（还是自己技术不到位啊！汗…）后来去google了一下，多少人也遇到这个问题! 下面集自己的理解和网络上的一些资源解决这个问题! [IE中如果XMLHttpRequest提交的URL与历史一样则使用缓存，根本不向服务器端提交。因此无法取到刚提交的数据]

我最初的做法: 下面的代码运行后! 第一次点击GetData按钮显示 demo , 当在点击changDate改变数据后, 在点击 GetData还是显示 demo ！而不是我们期望的changed data 字符串! 这就是我最初遇到的问题! 当然下面只是一个简单的demo而没有太多的实际意义!

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="ajax_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script runat="server">
        private static string data = "demo";
        protected void Page_Load(object sender, EventArgs e)
        {
            if (IsPostBack) return;
            if (!string.IsNullOrEmpty(Request.QueryString["ajax"]))
            {
                Response.Write(data);
                Response.End();
            }
        }

        protected void Unnamed1_Click(object sender, EventArgs e)
        {
            data = "Changed data";
        }
    </script>
    <script type="text/javascript">
        function createXmlHttpRequest() {
            if (window.ActiveXObject) {
                return new ActiveXObject("Microsoft.XMLHTTP");
            } else if (window.XMLHttpRequest) {
                return new XMLHttpRequest();
            }
        }
        function test() {
            //ajax请求地址,就是本页面哈
            var url = "Default.aspx?ajax=true";
            /*
                解决方法: var url = "Default.aspx?ajax=true&random=" + Math.random();
                         var url = "Default.aspx?ajax=true&random=" + new Date().getMilliseconds();
                后面跟一个随机数或者时间戳保证他请求的url每次都不一样!这样就不会被缓存
                2.在send()方法之前设置setRequestHeader
                  XMLHttpRequest.setRequestHeader("If-Modified-Since","0")
            */
            var xmlHttpRequest = createXmlHttpRequest();
            xmlHttpRequest.onreadystatechange = function() {
                if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
                    var context = xmlHttpRequest.responseText;
                    document.getElementById("divInfo").innerHTML = context;
                }
            }
            xmlHttpRequest.open("GET", url, true);
            //xmlHttpRequest.setRequestHeader("If-Modified-Since","0");
            xmlHttpRequest.send(null);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <input id="getData" type="button" value="GetData" onclick="test();" />
    <div id="divInfo">
    
    </div>
    <asp:Button runat="server" Text="changDate" onclick="Unnamed1_Click" />
    </form>
</body>
</html>

上面的2种方法,我已测试通过!并解决了我的问题！

Technorati 标签: ajax

posted on 2010-04-29 16:35 JoinJ 阅读(2725) 评论(0) 编辑收藏举报