首页 > 代码库 > Ajax在IE中缓存问题

Ajax在IE中缓存问题

<!DOCTYPE html>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ page isELIgnored="false"%>
<%@include file="/jsp/common/meta.jsp"%>
<%@include file="/jsp/common/taglibs.jsp"%>
<html>
<head>
<link type="text/css" rel="stylesheet" href="http://www.mamicode.com//css/zTree/zTreeStyle/zTreeStyle.css">
<script type="text/javascript" src="http://www.mamicode.com//js/zTree/jquery.ztree.all.min.js"></script>
<title>数据维护树</title>
</head>
<script type="text/javascript">
$(function(){
initTree();
});

/* 初始化树 */
function initTree(){
$.fn.zTree.init($("#tree"),{
async: {
enable: true,
url: getUrl,
dataFilter: ajaxDataFilter
},
data: {
simpleData: {enable: true}
},
view: {
expandSpeed: ""
},
callback: {
beforeExpand: beforeExpand,
onClick: onClick,
onAsyncSuccess: onAsyncSuccess,
onAsyncError: onAsyncError
}
},[{"id":"1","pId":"1","name":"项目","code":"0001","type":"cctype","isParent":"true","nocheck":"true"}]);
var tree = $.fn.zTree.getZTreeObj("tree");
var treeNodes = tree.getNodes();
if(treeNodes.length > 0){
tree.expandNode(treeNodes[0],true,false,false);
}
}

/* 获取URL */
function getUrl(treeId,treeNode){
return "/civilizationconstruction/standardItemType!typeTree.action?parentId="+treeNode.id;
}

/* 数据预处理 */
function ajaxDataFilter(treeId,parentNode,responseData){
var list = responseData.list;
if(!list){
return null;
}
var nodes = [];
for(var i = 0; i < list.length; i++){
nodes[i] = {
"id": list[i].id,
"pId": list[i].pid,
"name": list[i].name,
"code": list[i].code,
"type": list[i].type,
"isParent": (list[i].type=="ccitem"?"false":"true"),
"nocheck": "true"
};
}
return nodes;
}

/* 父节点展开前事件回调 */
function beforeExpand(treeId,treeNode){
if(!treeNode.isAjaxing){
return true;
}else{
alert("正在加载项目类型数据,请稍后展开节点!");
return false;
}
}

/* 节点点击回调 */
function onClick(event,treeId,treeNode){
var tree = $.fn.zTree.getZTreeObj("tree");
var params = "";
params += "?id="+$(treeNode).attr("id");
params += "&name="+$(treeNode).attr("name");
params += "&pid="+$(treeNode).attr("pId");
params += "&code="+$(treeNode).attr("code");
params += "&type="+$(treeNode).attr("type");
$("#rframe",window.parent.document).attr("src",encodeURI("/civilizationconstruction/standardItemType!tagsBUS.action"+params));
}

/* 异步加载正常事件回调 */
function onAsyncSuccess(event,treeId,treeNode,msg){}

/* 异步加载异常事件回调 */
function onAsyncError(event,treeId,treeNode,XMLHttpRequest,textStatus,errorThrown){
alert("加载检查项目类型异常!");
treeNode.icon = "";
}

/* 重载节点 */
function reloadTreeNode(treeNodeId){
var tree = $.fn.zTree.getZTreeObj("tree");
var treeNode = tree.getNodeByParam("id",treeNodeId);
tree.reAsyncChildNodes(treeNode,"refresh");
}
</script>
<body>
<div><ul id="tree" class="ztree"></ul></div>
</body>
</html>

以上是在项目中使用ztree插件,做树形结构时遇到的ajax缓存问题,缓存只在IE中出现,使用其他浏览器没有问题,针对IE中的问题,采用的解决办法:是在rframe页面添加js代码如下:

<script type="text/javascript">
$.ajaxSetup ({
cache: false //关闭AJAX相应的缓存
});
</script>

当然,也在网上查找了其他方法(当然本人还没有测试,有兴趣的可以试试):分为客户端解决和服务端解决

1.客户端解决方案
IE访问策略:Internet选项--浏览历史记录--设置-- Internet 临时文件的选项改为每次访问网页时也可以

1: 在AJAX请求的页面后加个随机函数,我们可以使用随机时间函数

在javascript发送的URL后加上t=Math.random() 
例如这样:URL+"&"+"t="+Math.random();或者new Date();

2: 在XMLHttpRequest发送请求之前加上XMLHttpRequest.setRequestHeader("If-Modified-Since","0")

一般情况下,这里的XMLHttpRequest不会直接使用 
你应该可以找到这样的代码 
XXXXX.send(YYYYYY); 
那么,就把它变成 
XXXXX.setRequestHeader("If-Modified-Since","0"); 
XXXXX.send(YYYYYY);

实践证明,两种方法都非常有效。 
1、在服务端加 header("Cache-Control: no-cache, must-revalidate"); 
2、在ajax发送请求前加上 xmlHttpRequest.setRequestHeader("If-Modified-Since","0"); 
3、在ajax发送请求前加上 xmlHttpRequest.setRequestHeader("Cache-Control","no-cache"); 
4、在 Ajax 的 URL 参数后加上 "?fresh=" + Math.random(); //当然这里参数 fresh 可以任意取了 
5、第四种方法和第三种类似,在 URL 参数后加上 "?timestamp=" + new Date().getTime(); //推荐使用这种方式 
6、用POST替代GET:不推荐


2.服务器端解决方案:

以Struts2为例:
Struts2 Server端用法

Xml代码

代码如下:

<package name="json-nocache" extends="json-default"> 
 <interceptors> 
  <interceptor name="cachingHeadersInterceptor" class="com.ssa.pct.web.interceptor.CachingHeaderInterceptor" /> 
  <interceptor-stack name="defaultSecurityStack"> 
   <interceptor-ref name="defaultStack" /> 
   <interceptor-ref name="cachingHeadersInterceptor" /> 
  </interceptor-stack> 
 </interceptors> 

 <default-interceptor-ref name="defaultSecurityStack" /> 
</package> 


Java代码 

代码如下:

public class CachingHeaderInterceptor extends AbstractInterceptor {

 

 private static final long serialVersionUID = 1L;

 public String intercept(ActionInvocation invocation) throws Exception {
  ActionContext context = invocation.getInvocationContext();
  HttpServletResponse response = (HttpServletResponse) context.get(StrutsStatics.HTTP_RESPONSE);
  if (response != null) {
   response.setHeader("Cache-Control", "no-cache");
   response.setHeader("Pragma", "no-cache");
   response.setHeader("Expires", "-1");
  }
  return invocation.invoke();
 }

}

Ajax在IE中缓存问题