生活随笔
收集整理的這篇文章主要介紹了
解决浏览器缓存问题
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1，引題
? ?什么是緩存,就不用解釋了, 大家在更新CSDN博客時(shí)經(jīng)常遇到的問(wèn)題,很頭疼. 如何解決瀏覽器的緩存問(wèn)題,看例子.
2，例子
一個(gè)訪問(wèn)頁(yè)面計(jì)數(shù)器的小例子(效果：每點(diǎn)擊一次按鈕，訪問(wèn)次數(shù)+1).不多做解釋,直接運(yùn)行,看運(yùn)行效果.
（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(){?? ???????????????//創(chuàng)建XMLHttpRequest對(duì)象?? ???????????????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("當(dāng)前瀏覽器不支持創(chuàng)建XMLHttpRequest對(duì)象，請(qǐng)更換瀏覽器");?? ???????????????????return;?? ???????????????}?? ???????????????//2,注冊(cè)回調(diào)方法?? ???????????????cachexmlhttp.onreadystatechange=function(){?? ???????????????????if(cachexmlhttp.readyState===4){?? ???????????????????????if(cachexmlhttp.status===200){?? ???????????????????????????var?message=cachexmlhttp.responseText;?? ???????????????????????????var?div=document.getElementById("cachemessage");?? ???????????????????????????div.innerHTML=message;?? ???????????????????????}?? ???????????????????}?? ???????????????};?? ???????????????? ???????????????//3,設(shè)置和服務(wù)器端交互的相應(yīng)參數(shù)——Get方式?? ???????????????cachexmlhttp.open("GET","Cache",true);?? ????????????????? ???????????????//4,設(shè)置向服務(wù)器端發(fā)送的數(shù)據(jù)，啟動(dòng)和服務(wù)器端的交互?? ???????????????cachexmlhttp.send(null);?? ???????????}?? ????????????? ????????</script>??????? ????</head>?? ????<body>?? ????????<div?id="message"></div>?? ????????<br/>?? ??????<input?type="button"?onclick="cache();"?value="測(cè)試緩存問(wèn)題"/>?? ???????? ??????<div?id="cachemessage"></div>?? ????</body>?? </html>??
Cache.java(一個(gè)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("當(dāng)前計(jì)數(shù)器的值為:"+counter);?? ????????}?finally?{?????????????? ????????????out.close();?? ????????}?? ????}??
（2）運(yùn)行（IE中）
IE中運(yùn)行后，打開HttpWatch? Basic（前提是安裝了HttpWatch Basic）；
觀察第一次點(diǎn)擊“測(cè)試緩存問(wèn)題”按鈕和第二次點(diǎn)擊的?Result和URL有什么不同？
?
點(diǎn)擊第一次：
?
點(diǎn)擊第二次：
（而，按我們代碼所期望，第二次點(diǎn)擊后的運(yùn)行結(jié)果應(yīng)該是：當(dāng)前計(jì)數(shù)器的值為1，為什么仍未0？）
?
3，分析問(wèn)題
在HttpWatch?Basic中觀察：
——很明顯第二次訪問(wèn)的是緩存，因?yàn)閮纱卧L問(wèn)的URl一樣，第二次訪問(wèn)時(shí)，緩存中存在，所以不會(huì)創(chuàng)建新的請(qǐng)求，而直接從緩存中讀取，所以就有了緩存問(wèn)題。
?
4，解決問(wèn)題
如何解決？
——增加時(shí)間戳。
關(guān)鍵代碼：
if(url.indexOf("?")>=0){
??????url=url+"&t="+(newDate()).valueOf();
?}else{
?????????url=url+"?t"+(newDate()).valueOf();
?}
修改function?cache()中的代碼：
在IE中運(yùn)行，查看運(yùn)行結(jié)果：
?
點(diǎn)擊第一次：
?
點(diǎn)擊第二次：
?
在HttpWatch?Basic中觀察：
——兩次請(qǐng)求均創(chuàng)建，兩次請(qǐng)求URL不同；緩存問(wèn)題解決。
?
5，總結(jié)：
（1）解決瀏覽器緩存問(wèn)題：
——增加時(shí)間戳。
關(guān)鍵代碼：
if(url.indexOf("?")>=0){
??????url=url+"&t="+(newDate()).valueOf();
?}else{
?????????url=url+"?t"+(newDate()).valueOf();
?}
（2）學(xué)會(huì)使用HttpWatch?Basic
總結(jié)
以上是生活随笔為你收集整理的解决浏览器缓存问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
