生活随笔
收集整理的這篇文章主要介紹了
解决浏览器缓存问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1，引題
? ?什么是緩存,就不用解釋了, 大家在更新CSDN博客時經常遇到的問題,很頭疼. 如何解決瀏覽器的緩存問題,看例子.
2，例子
一個訪問頁面計數器的小例子(效果：每點擊一次按鈕，訪問次數+1).不多做解釋,直接運行,看運行效果.
（1）代碼
AJAXNew.html中:
[html]?view plaincopy
<html>?? ????<head>?? ????????<title></title>?? ????????<meta?http-equiv="Content-Type"?content="text/html;?charset=UTF-8">?? ????????<script?type="text/javascript">?? ???????????var?cachexmlhttp;????? ???????????function?cache(){?? ???????????????//創建XMLHttpRequest對象?? ???????????????if(window.XMLHttpRequest){?? ???????????????????//IE7、IE8、FireFox、Mozilla、Safari、Opera?? ???????????????????cachexmlhttp=?new?XMLHttpRequest();?? ???????????????????if(cachexmlhttp.overrideMimeType){?? ???????????????????????cachexmlhttp.overrideMimeType("text/xml");?? ???????????????????}?? ???????????????}else?if(window.ActiveXObject){?? ???????????????????//IE6,IE5.5,IE5?? ???????????????????var?activexName=["MSXML2.XMLHTTP.60","MSXML2.XMLHTTP.5.0",?? ???????????????????????"MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP",?? ????????????????????????"Miscrosoft.XMLHTTP"];?? ????????????????????for(var?i=0;i<activexName.length;i++){?? ????????????????????????try{?? ????????????????????????????cachexmlhttp=new?ActiveXObject(activexName[i]);?? ????????????????????????????break;?? ????????????????????????}catch(e){?? ?????????????????????????????? ????????????????????????}?????????????????????? ????????????????????}?????????????????? ???????????????}??? ???????????????if(cachexmlhttp===undefined?||?cachexmlhttp===null){?? ???????????????????alert("當前瀏覽器不支持創建XMLHttpRequest對象，請更換瀏覽器");?? ???????????????????return;?? ???????????????}?? ???????????????//2,注冊回調方法?? ???????????????cachexmlhttp.onreadystatechange=function(){?? ???????????????????if(cachexmlhttp.readyState===4){?? ???????????????????????if(cachexmlhttp.status===200){?? ???????????????????????????var?message=cachexmlhttp.responseText;?? ???????????????????????????var?div=document.getElementById("cachemessage");?? ???????????????????????????div.innerHTML=message;?? ???????????????????????}?? ???????????????????}?? ???????????????};?? ???????????????? ???????????????//3,設置和服務器端交互的相應參數——Get方式?? ???????????????cachexmlhttp.open("GET","Cache",true);?? ????????????????? ???????????????//4,設置向服務器端發送的數據，啟動和服務器端的交互?? ???????????????cachexmlhttp.send(null);?? ???????????}?? ????????????? ????????</script>??????? ????</head>?? ????<body>?? ????????<div?id="message"></div>?? ????????<br/>?? ??????<input?type="button"?onclick="cache();"?value="測試緩存問題"/>?? ???????? ??????<div?id="cachemessage"></div>?? ????</body>?? </html>??
Cache.java(一個Servlet)中：
[java]?view plaincopy
import?java.io.IOException;?? import?java.io.PrintWriter;?? import?javax.servlet.ServletException;?? import?javax.servlet.annotation.WebServlet;?? import?javax.servlet.http.HttpServlet;?? import?javax.servlet.http.HttpServletRequest;?? import?javax.servlet.http.HttpServletResponse;?? ?? ? ? ? ?? @WebServlet(urlPatterns?=?{"/Cache"})?? public?class?Cache?extends?HttpServlet?{?? ????protected?void?processRequest(HttpServletRequest?request,?HttpServletResponse?response)?? ????????????throws?ServletException,?IOException?{?? ????????response.setContentType("text/html;charset=UTF-8");?? ????????PrintWriter?out?=?response.getWriter();?? ????????try?{?? ???????????Integer?counter?=?(Integer)request.getSession().getAttribute("Counter");?? ?????????????if(counter?==null){?? ?????????????????counter?=?0;?? ?????????????}else{?? ????????????????counter++;?? ?????????????}?? ?????????????request.getSession().setAttribute("Counter",counter);?? ?????????????out.println("當前計數器的值為:"+counter);?? ????????}?finally?{?????????????? ????????????out.close();?? ????????}?? ????}??
（2）運行（IE中）
IE中運行后，打開HttpWatch? Basic（前提是安裝了HttpWatch Basic）；
觀察第一次點擊“測試緩存問題”按鈕和第二次點擊的?Result和URL有什么不同？
?
點擊第一次：
?
點擊第二次：
（而，按我們代碼所期望，第二次點擊后的運行結果應該是：當前計數器的值為1，為什么仍未0？）
?
3，分析問題
在HttpWatch?Basic中觀察：
——很明顯第二次訪問的是緩存，因為兩次訪問的URl一樣，第二次訪問時，緩存中存在，所以不會創建新的請求，而直接從緩存中讀取，所以就有了緩存問題。
?
4，解決問題
如何解決？
——增加時間戳。
關鍵代碼：
if(url.indexOf("?")>=0){
??????url=url+"&t="+(newDate()).valueOf();
?}else{
?????????url=url+"?t"+(newDate()).valueOf();
?}
修改function?cache()中的代碼：
在IE中運行，查看運行結果：
?
點擊第一次：
?
點擊第二次：
?
在HttpWatch?Basic中觀察：
——兩次請求均創建，兩次請求URL不同；緩存問題解決。
?
5，總結：
（1）解決瀏覽器緩存問題：
——增加時間戳。
關鍵代碼：
if(url.indexOf("?")>=0){
??????url=url+"&t="+(newDate()).valueOf();
?}else{
?????????url=url+"?t"+(newDate()).valueOf();
?}
（2）學會使用HttpWatch?Basic
總結
以上是生活随笔為你收集整理的解决浏览器缓存问题的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
