Ajax在IE中緩存問題

時間 2019-11-20

標籤 ajax 緩存問題欄目 Ajax 简体版

原文原文鏈接

<!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>javascript

以上是在項目中使用ztree插件，作樹形結構時遇到的ajax緩存問題，緩存只在IE中出現，使用其餘瀏覽器沒有問題，針對IE中的問題，採用的解決辦法：是在rframe頁面添加js代碼以下：css

固然，也在網上查找了其餘方法(固然本人尚未測試，有興趣的能夠試試)：分爲客戶端解決和服務端解決java

1.客戶端解決方案
IE訪問策略：Internet選項--瀏覽歷史記錄--設置-- Internet 臨時文件的選項改成每次訪問網頁時也能夠node

1: 在AJAX請求的頁面後加個隨機函數,咱們可使用隨機時間函數jquery

在javascript發送的URL後加上t=Math.random()
例如這樣:URL+"&"+"t="+Math.random();或者new Date();web

2: 在XMLHttpRequest發送請求以前加上XMLHttpRequest.setRequestHeader("If-Modified-Since","0")ajax

通常狀況下,這裏的XMLHttpRequest不會直接使用
你應該能夠找到這樣的代碼
XXXXX.send(YYYYYY);
那麼,就把它變成
XXXXX.setRequestHeader("If-Modified-Since","0");
XXXXX.send(YYYYYY);json

實踐證實，兩種方法都很是有效。
一、在服務端加 header("Cache-Control: no-cache, must-revalidate");
二、在ajax發送請求前加上 xmlHttpRequest.setRequestHeader("If-Modified-Since","0");
三、在ajax發送請求前加上 xmlHttpRequest.setRequestHeader("Cache-Control","no-cache");
四、在 Ajax 的 URL 參數後加上 "?fresh=" + Math.random(); //固然這裏參數 fresh 能夠任意取了
五、第四種方法和第三種相似，在 URL 參數後加上 "?timestamp=" + new Date().getTime(); //推薦使用這種方式
六、用POST替代GET：不推薦瀏覽器

2.服務器端解決方案：

以Struts2爲例：
Struts2 Server端用法

Xml代碼

代碼以下:

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();
}

}