Ajax在IE中缓存问题
Posted 北方阿木
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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="<%=request.getContextPath()%>/css/zTree/zTreeStyle/zTreeStyle.css">
<script type="text/javascript" src="<%=request.getContextPath()%>/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中缓存问题的主要内容，如果未能解决你的问题，请参考以下文章