解决浏览器缓存问题

1,引题

   什么是缓存,就不用解释了, 大家在更新CSDN博客时经常遇到的问题,很头疼. 如何解决浏览器的缓存问题,看例子.

2,例子

一个访问页面计数器的小例子(效果:每点击一次按钮,访问次数+1).不多做解释,直接运行,看运行效果.

(1)代码

AJAXNew.html中:

<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" οnclick="cache();" value="测试缓存问题"/>
      
      <div id="cachemessage"></div>
    </body>
</html>

Cache.java(一个Servlet)中:

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;

/**
 *
 * @author xuemin
 */
@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);

观察第一次点击“测试缓存问题”按钮和第二次点击的 ResultURL有什么不同?


 

点击第一次:


 

点击第二次:


(而,按我们代码所期望,第二次点击后的运行结果应该是:当前计数器的值为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



评论 34
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值