A-A+

Ajax禁止缓存的几个解决方案

2016年01月21日 web前端设计 暂无评论 阅读 5 views 次

我们介绍了最常用的Ajax缓存禁止方法,有需要了解的朋友可参考一下。

最常用的方法是

方法1:服务器端代码加入,代码如下:

response.setHeader("Cache-Control", "no-cache, must-revalidate");

方法2:用JavaScript在Ajax提交的时候加入一个随机数作为URL中的一个参数,代码如下:

req.open(url + "&" + Math.random).

原因:IE中如果XMLHttpRequest提交的URL与历史一样则使用缓存,根本不向服务器端提交。因此无法取到刚提交的数据。

1.在服务端加 header("Cache-Control: no-cache, must-revalidate");(如php中)

2.在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0");

3.在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache");

4.在 Ajax 的 URL 参数后加上 "?fresh=" + Math.random(); //当然这里参数 fresh 可以任意取了

5.第五种方法和第四种类似,在 URL 参数后加上 "?timestamp=" + new Date().getTime();

6.用POST替代GET:不推荐

加个随机数,代码如下:

xmlHttp.open("GET", "ajax.asp?now=" + new Date().getTime(), true);

实例,代码如下:

  1. function saveUserInfo()   
  2. {   
  3.  //获取接受返回信息层   
  4.  var msg = document.getElementById("msg");   
  5.  //获取表单对象和用户信息值   
  6.  var f = document.user_info;   
  7.  var userName = f.user_name.value;   
  8.  var userAge = f.user_age.value;   
  9.  var userSex = f.user_sex.value;   
  10.  //接收表单的URL地址   
  11.  var url = "/save_info.php";   
  12.  //需要POST的值,把每个变量都通过&来联接   
  13.  var postStr = "user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex;  
  14.  //实例化Ajax   
  15.  var ajax = InitAjax();   
  16.     
  17.  //通过Post方式打开连接   
  18.  ajax.open("POST", url, true);   
  19.  //定义传输的文件HTTP头信息   
  20.  ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");   
  21.  //发送POST数据   
  22.  ajax.send(postStr);   
  23.  //获取执行状态   
  24.  ajax.onreadystatechange = function() {   
  25.   //如果执行状态成功,那么就把返回信息写到指定的层里   
  26.   if (ajax.readyState == 4 && ajax.status == 200) {   
  27.    msg.innerHTML = ajax.responseText;   
  28.   }   
  29.  }   
  30. }  

在要异步获取的asp页面中写一段禁止缓存的代码,代码如下:

  1. Response.Buffer =True  
  2. Response.ExpiresAbsolute =Now() - 1  
  3. Response.Expires=0  
  4. Response.CacheControl="no-cache"  

在ajax发送请求前加上xmlHTTP.setRequestHeader("If-Modified-Since","0");可以禁止缓存,代码如下:

  1. xmlHTTP.open("get", URL, true);   
  2. xmlHTTP.onreadystatechange = callHTML;   
  3. xmlHTTP.setRequestHeader("If-Modified-Since","0");   
  4. xmlHTTP.send();  

AJAX的缓存是由浏览器维持的,对于发向服务器的某个url,ajax仅在第一次请求时与服务器交互信息,之后的请求中,ajax不再向服务器提交请求,而是直接从缓存中提取数据。

有些情况下,我们需要每一次都从服务器得到更新后数据。思路是让每次请求的url都不同,而又不影响正常应用:在url之后加入随机内容。

url=url+"&"+Math.random();

1.每次请求的url都不一样(ajax的缓存便不起作用)

2.不影响正常应用(最基本的)

在JSP中禁止缓存,代码如下:

response.addHeader("Cache-Control", "no-cache");

response.addHeader("Expires", "Thu, 01 Jan 1970 00:00:01 GMT");

html实现方法,代码如下:

  1. <META HTTP-EQUIV="pragma" CONTENT="no-cache">   
  2. <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">   
  3. <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">  
标签:

给我留言