ajax 清理缓存实例

ajax好处就是：异步加载，实现局部刷新，提高用户体验。

在用ajax做数据提交时，发现一个问题。每次提交之后，更新提示总是出现上一次的更新提示记录。

手动清理浏览器缓存之后，好像问题可以解决了。可是提交一次之后，第二次又是同样的问题。

下面看一下我做的一个小程序

做了一个小的网络投票程序，用ajax提交前台的投票数据给后台数据库。

问题简单描述如下：程序内部要求做好判断和提示，如果同一天内同一个IP只能限制投票一次；

如果第一次提交，则弹出“投票成功；

第二次提交如果同一个主题已经存在的IP不能再次投票，则提示“不能重复投票”。

 

问题描述之后，似乎很简单了。

前台HTML提交的js脚本如下：
function submitVote(obj)
{
  var eve=getEvent();
  var chr=document.getElementsByName("netvote");
  var count=0;
  var selList="";
  for(var i=0;i<chr.length;i++){
      if(chr[i].checked){
        count++;
        selList+=chr[i].value+",";
      }
  }
 if (count<1){
    alert("还没有选择");
    if(eve.preventDefault){eve.preventDefault();}
    else{eve.returnValue=false;}
    return false;
   }
    var postUrl="/ashx/Vote.ashx?Id="+obj+"&optionId="+selList

    Request.sendGET(postUrl, cackbackResult,null,null,null);
}
function cackbackResult(req){
 var str=req.responseText;
 if(str=="0")//如果没有选择选项
 {
   alert("没有选择");
   return false;
 }
 if(str=="001")//已经投过的
 {
   alert("已经投过不能重复投票");
   return false;
 }
 if(str=="002")
 {
    alert("投票成功");
    location.href='default.html';
 }
}

 

后台处理代码：

 

  public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            int QId = Gain.GetQueryInt("Id", 0);//问题编号
            string optionId = Gain.GetQueryString("optionId");
            if (string.IsNullOrEmpty(optionId))
            {
                context.Response.Write("0");//没有选项
            }
            else if (QId > 0)
            {
                try
                {
                    EEY.Lib.BLL.VoteIp bvIp = new EEY.Lib.BLL.VoteIp();
                    string Ip = Gain.GetUserIP;
                    string strWhere = string.Format("Ip='{0}' AND OptionId={1} AND DateDiff(d,voteTime,getDate())<1", Ip, QId);
                    if (bvIp.Exists(strWhere))
                    {
                        context.Response.Write("001");//同一个IP一天只能对某一个问题投一次票
                    }
                    else
                    {
                        int optId = 0;
                        string[] arry = null;
                        if (optionId.IndexOf(',') >= 0)
                        {
                            optionId = optionId.TrimEnd(',');
                            if (optionId.IndexOf(',') >= 0)//多项选择
                            {
                                arry = optionId.Split(',');
                            }
                            else
                            {
                                arry = new string[1] { optionId };
                            }
                        }
                        EEY.Lib.Model.VoteIp vmodel = new EEY.Lib.Model.VoteIp();
                        vmodel.Ip = Ip;
                        vmodel.OptionId = QId;
                        vmodel.VoteTime = DateTime.Now;
                        bvIp.Add(vmodel);
                        if (!arry.Equals(null))
                        {
                            EEY.Lib.BLL.Option bopt = new EEY.Lib.BLL.Option();
                            for (int i = 0; i < arry.Length; i++)
                            {
                                optId = StrUtil.ToInt32(arry[i], 0);
                                bopt.UpdateCount(optId);
                            }
                            int total = bopt.GetQuestionVote(QId);
                            EEY.Lib.BLL.Question bq = new EEY.Lib.BLL.Question();
                            if ( bq.UpdateVote(QId, total)>0)
                            {
                                context.Response.Write("002");//添加成功
                            }
                        }
                    }
                }
                catch (System.Exception ex)
                {
                    context.Response.Write(ex.Message);
                }
            }
        }

 

 

通过测试发现，提交投票时候，同一个IP的确只能投一次，即查数据库票数记录即可以知道（第一次提交之后更新票数，但之后票数都没有变过）。

但每一次在前台点击投票都提示“投票成功”，实际是没有更新记录的。

显然不是我们要的结果。因此可以断定，肯定是ajax缓存问题，存在缓存的情况下它不会每次都执行后台代码。从而可以断定是前台提交的问题，及时的提交而不是返回缓存前一次的结果。

于是在提交时加上时间戮

既在postUrl处修改为：

  var postUrl="/ashx/Vote.ashx?Id="+obj+"&optionId="+selList+"&guid="+new Date().getTime();

 

//+"&guid="+new Date().getTime();

加上这时间之后，问题解决。显然ajax实时的返回后台处理结果，我们目的达到。OK

 

 

后记

Ajax在解决缓存时有三种办法。

 

1、加时间戮
对于一个浏览器，你的第一次点击是会调用rpc请求的， 但是你再用同一个浏览器提交表单的时候， rpc不会被提交， 因为参数一样， 这个可能是ajax的XMLHttpRequest对象的问题， 如设置了时间间隔了，实际上是（new ActiveXObject("Microsoft.XMLHTTP")）所以， 在实际操作的时候， 给rpc的参数传递一个没有用的guid= new Date().getTime()
一个时间戳 ，以保证每次的点击事件都会激发rpc请求， 因为这样的参数（或者说url）是不一样的。
 为什么要把时间戳追加到目标url？
在某些情况下， 有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个url。如果对每个请求的响应不同，这就会带来不好的结果。把当前时间戳追加到url的最后，就能确保url的唯一性，从而避免浏览器的缓存结果。

2、在要异步获取的页面中写一段禁止缓存的代码：
      Response.Buffer =True
      Response.ExpiresAbsolute =Now() - 1
      Response.Expires=0
      Response.CacheControl="no-cache" 

3、在ajax发送请求前加上xmlHTTP.setRequestHeader("If-Modified-Since","0");可以禁止缓存
      xmlHTTP.open("get", URL, true); 
      xmlHTTP.onreadystatechange = callHTML; 
      xmlHTTP.setRequestHeader("If-Modified-Since","0"); 
      xmlHTTP.send();