您的位置:首页 > 其它

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

2010-04-29 16:35 676 查看
最近在做项目的时候,使用了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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: