最近在做项目的时候,使用了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>