基于Ajax技术的简易进度条的实现

网上找来的，链接为：http://blog.youkuaiyun.com/javatwt/archive/2007/03/02/1519117.aspx

progressBar.html文件： 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >

< html >
     < head >
         < title > Ajax Progress Bar </ title >
         < script  type ="text/javascript" > ... ...
        var xmlHttp;
        var key;
        function createXMLHttpRequest() ......{
            if (window.ActiveXObject) ......{
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } 
            else if (window.XMLHttpRequest) ......{
                xmlHttp = new XMLHttpRequest();                
            }
        }
        function go() ......{
            createXMLHttpRequest();
            clearBar();
            var url = "ProgressBarServlet?task=create";
            var button = document.getElementById("go");
            button.disabled = true;
            xmlHttp.open("GET", url, true);
            xmlHttp.onreadystatechange = goCallback;
            xmlHttp.send(null);
        }
        function goCallback() ......{
            if (xmlHttp.readyState == 4) ......{
                if (xmlHttp.status == 200) ......{
                    setTimeout("pollServer()", 2000);
                }
            }
        }
        function pollServer() ......{
            createXMLHttpRequest();
            var url = "ProgressBarServlet?task=poll&key=" + key;
            xmlHttp.open("GET", url, true);
            xmlHttp.onreadystatechange = pollCallback;
            xmlHttp.send(null);
        }
        
        function pollCallback() ......{
            if (xmlHttp.readyState == 4) ......{
                if (xmlHttp.status == 200) ......{
                    var percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data;
                    var progress = document.getElementById("progress");
                    var progressPersent = document.getElementById("progressPersent");
                     progress.width = percent_complete + "%";
                     progressPersent.innerHTML = percent_complete + "%";
                    if (percent_complete < 100) ......{
                        setTimeout("pollServer()", 2000);
                    } else ......{
                        document.getElementById("complete").innerHTML = "Complete!";
                        //document.getElementById("go").disabled = false;
                    }
                }
            }
        }        
         function clearBar() ......{
               var progress_bar = document.getElementById("progressBar");
               var progressPersent = document.getElementById("progressPersent");
               var complete = document.getElementById("complete");
               progress_bar.style.visibility = "visible"
               progressPersent.innerHTML = "&nbsp;";
               complete.innerHTML = "Begin to upload this file...";
         }
         </ script >
     </ head >
     < body >
         < div  id ="progressBar"
            style ="padding:0px;border:solid black 0px;visibility:hidden" >
             < table  width ="300"  border ="0"  cellspacing ="0"  cellpadding ="0"
                align ="center" >
                 < tr >
                     < td  align ="center"  id ="progressPersent" >
                        86%
                     </ td >
                 </ tr >
                 < tr >
                     < td >
                         < table  width ="100%"  border ="1"  cellspacing ="0"  cellpadding ="0"
                            bordercolor ="#000000" >
                             < tr >
                                 < td >
                                     < table  width ="1%"  border ="0"  cellspacing ="0"  cellpadding ="0"
                                        bgcolor ="#FF0000"  id ="progress" >
                                         < tr >
                                             < td >
                                                 &nbsp;
                                             </ td >
                                         </ tr >
                                     </ table >
                                 </ td >
                             </ tr >
                         </ table >
                     </ td >
                 </ tr >
                 < tr >
                     < td  align ="center"  id ="complete" >
                        completed
                     </ td >
                 </ tr >
             </ table >
         </ div >
         < input  id ="go"  name ="run"  type ="button"  value ="run"  onClick ="go();" >
     </ body >
</ html >

web.xml文件：

<? xml version="1.0" encoding="UTF-8" ?>
< web-app  version ="2.4"  xmlns ="http://java.sun.com/xml/ns/j2ee"
    xmlns:xsi ="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation ="http://java.sun.com/xml/ns/j2ee 
    http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" >
    
     < servlet >
         < servlet-name > ProgressBarServlet </ servlet-name >
         < servlet-class >
            sample.ProgressBarServlet
         </ servlet-class >
     </ servlet >

     < servlet-mapping >
         < servlet-name > ProgressBarServlet </ servlet-name >
         < url-pattern > /ProgressBarServlet </ url-pattern >
     </ servlet-mapping >

</ web-app >

ProgressBarServlet.java文件：

package  sample;

import  java.io.IOException;
import  java.io.PrintWriter;

import  javax.servlet.ServletException;
import  javax.servlet.http.HttpServlet;
import  javax.servlet.http.HttpServletRequest;
import  javax.servlet.http.HttpServletResponse;

public   class  ProgressBarServlet  extends  HttpServlet ... ... {

    private int counter = 1;

    /** *//**//**
     * Handles the HTTP <code>GET</code> method.
     * 
     * @param request
     *            servlet request
     * @param response
     *            servlet response
     */
    protected void doGet(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException ......{
        String task = request.getParameter("task");
        String res = "";

        if (task.equals("create")) ......{
            res = "<key>1</key>";
            counter = 1;
        } else ......{
            String percent = "";
            switch (counter) ......{
            case 1:
                percent = "10";
                break;
            case 2:
                percent = "23";
                break;
            case 3:
                percent = "35";
                break;
            case 4:
                percent = "51";
                break;
            case 5:
                percent = "64";
                break;
            case 6:
                percent = "73";
                break;
            case 7:
                percent = "89";
                break;
            case 8:
                percent = "100";
                break;
            }
            counter++;

            res = "<percent>" + percent + "</percent>";
        }

        PrintWriter out = response.getWriter();
        response.setContentType("text/xml");
        response.setHeader("Cache-Control", "no-cache");
        out.println("<response>");
        out.println(res);
        out.println("</response>");
        out.close();
    }

    /** *//**//**
     * Handles the HTTP <code>POST</code> method.
     * 
     * @param request
     *            servlet request
     * @param response
     *            servlet response
     */
    protected void doPost(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException ......{
        doGet(request, response);
    }

    /** *//**//**
     * Returns a short description of the servlet.
     */
    public String getServletInfo() ......{
        return "Short description";
    }

}