Ajax制作Web进度条实例

来源：互联网发布：毕业后悔做程序员知乎编辑：程序博客网时间：2024/05/18 00:07

1.index.jsp

按 Ctrl+C 复制代码

<%@ page language="java" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <script type="text/javascript" language="javaScript">      var bgcolor = '#7FFF00'; //全局变量，用于设置进度条的背景色      var number; //全局变量，用于记录当前span序号      var clear = "&nbsp;&nbsp;&nbsp;"; //全局变量，记录清空时的内容      var xmlHttp = false; //全局变量，用于记录XMLHttpRequest对象      function createXMLHttpRequest() { //创建XMLHttpRequest对象的方法        if(window.ActiveXObject) { //Inetrnet Explorer时，创建XMLHttpRequest对象的方法          try {            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");          } catch(e) {            try {              xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");               //旧版本的Inetrnet Explorer，创建XMLHttpRequest对象            } catch(e) {              window.alert("创建XMLHttpRequest对象错误"+e);            }           }        } else if(window.XMLHttpRequest) { //mozilla时，创建XMLHttpRequest对象的方法          xmlHttp = new XMLHttpRequest();        }         if(!(xmlHttp)) { //未成功创建XMLHttpRequest对象            window.alert("创建XMLHttpRequest对象异常！");        }        }      //启动进度条的方法      function startRun() {        createXMLHttpRequest(); //创建XMLHttpRequest对象        clearBar(); //执行请求前先清除进度条        xmlHttp.onreadystatechange = callBack;        //指定onreadystatechange属性值，用于指定状态正常时的处理函数        xmlHttp.open("GET", "/ProgressTest/servlet/ProcessServlet?flag=start", true);        xmlHttp.send(null);      }            //开始进行进度条显示的处理函数      function callBack() {          //window.alert("callBack()");        if(xmlHttp.readyState == 4) {           if(xmlHttp.status == 200) { //status状态正常时             setTimeout("aginRun()",1000);            //每隔1000毫秒（1秒）执行一次“aginRun()”函数           }        }      }      //清除用于显示进度条的span的内容      function clearBar() {        for (var i=0;i<10;i++) { //根据span元素的id，分别清楚其显示内容          var sp = document.getElementById("sp" + i);          sp.innerHTML = clear; //首先清空span元素的内容          sp.style.backgroundColor = "white"; //设置span元素的背景色        }      }      //设置用于显示进度条的span元素的显示内容      function aginRun() {        createXMLHttpRequest(); //创建XMLHttpRequest对象        xmlHttp.onreadystatechange = aginCallBack;        //指定状态正常时的处理函数为“aginCallBack”        document.getElementById("run").disabled=true; //设置按钮不可用        xmlHttp.open("GET", "/ProgressTest/servlet/ProcessServlet?flag=run", true);        //window.alert(" " + number);        xmlHttp.send(null);      }      //进度条执行时的函数      function aginCallBack() {        if(xmlHttp.readyState==4) {          if(xmlHttp.status==200) {            var percent =             xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data;           //记录当前完成比例            var index = parseResult(percent); //解析结果集            var nextCell = 1;            for (var i=0; i<index; i++) { //遍历span元素集合，设置其内容（颜色与文字）              var sp = document.getElementById("sp"+i);            //根据每个span元素的id获取span对象              sp.innerHTML= clear; //清空span元素内容              sp.style.backgroundColor = bgcolor; //设置span元素的内容              nextCell = i+1;              if(nextCell>=index && nextCell<10) { //显示当前处理进度的百分比                document.getElementById("sp"+nextCell).innerHTML=percent+"%";              }            }            if(index<10) { //索引小于10，设置setTimeout方法               setTimeout("aginRun()",1000);            } else { //索引大于10，设置进度条成功完成的页面效果               document.getElementById("result").innerHTML = "OK!";               document.getElementById("run").disabled = false;            }          }        }      }      //解析结果集      function parseResult(result) {        if(result.length<1) {          return 1;        } else if(result.length==2) {          return result.substring(0,1);        } else {          return 10;        }      }    </script>    <title>Ajax进度条</title>  </head>  <body>   <table align="center">            <tr>              <td>Ajax进度条示例&nbsp;&nbsp;&nbsp;<input type="button" value="开始" id="run" onclick="startRun();"/></td>            </tr>            <tr>              <td>              <div id="processBar" style="padding:1px;border:solid black 1px;">               <span id="sp0">&nbsp;&nbsp;&nbsp;</span>               <span id="sp1">&nbsp;&nbsp;&nbsp;</span>               <span id="sp2">&nbsp;&nbsp;&nbsp;</span>               <span id="sp3">&nbsp;&nbsp;&nbsp;</span>               <span id="sp4">&nbsp;&nbsp;&nbsp;</span>               <span id="sp5">&nbsp;&nbsp;&nbsp;</span>               <span id="sp6">&nbsp;&nbsp;&nbsp;</span>               <span id="sp7">&nbsp;&nbsp;&nbsp;</span>               <span id="sp8">&nbsp;&nbsp;&nbsp;</span>               <span id="sp9">&nbsp;&nbsp;&nbsp;</span>              </div>              </td>            </tr>            <tr><td align="center" id="result"></td> </tr>    </table>  </body></html>

按 Ctrl+C 复制代码

2.ProcessServlet.java

按 Ctrl+C 复制代码

public class ProcessServlet extends HttpServlet {        private static final String CONTENT_TYPE = "text/xml; charset=UTF-8";//设置返回响应的ContentType    private int count = 1;// 全局变量计数器    /**     *当前Servlet对象构造方法     */    public ProcessServlet() {        super();    }    /**     *当前Servlet销毁时的操作。<br>     */    public void destroy() {        super.destroy();    }    /**     *当前Servlet的doGet方法。<br>     *     *当客户端表单的“method”类型为“get”时，调用此方法     *      * @param request客户端请求对象     * @param response 服务器响应对象     * @throws ServletException 发生ServeltException时抛出     * @throws IOException发生IOException时抛出     */    public void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        System.out.println("*********************doGet()**********");        response.setContentType(CONTENT_TYPE); //设置服务器响应类型        response.setHeader("Cache-Control","no-cache"); //页面不记录缓存        String flag = request.getParameter("flag"); //操作类型        StringBuffer xml= //            new StringBuffer("<?xml version=\"1.0\" encoding=\"UTF-8\"?><items>");            new StringBuffer("<items>");        //记录返回的xml串        if("start".equals(flag)) { //第一次创建//            xml.append("<count>1</count>");            count = 1;        } else {            String proportion = "";            switch(count) { //根据计数器的值，设置显示当前进度的百分比              case 1:proportion="10"; break;              case 2:proportion="20"; break;              case 3:proportion="30"; break;              case 4:proportion="40"; break;              case 5:proportion="50"; break;              case 6:proportion="60"; break;              case 7:proportion="70"; break;              case 8:proportion="80"; break;              case 9:proportion="90"; break;              case 10:proportion="100"; break;            }            count++;            xml.append("<percent>").append(proportion).append("</percent>");        }        xml.append("</items>");        PrintWriter out = response.getWriter();        out.println(xml.toString()); //返回生成的XML串        out.flush(); //输出流刷新        out.close(); //关闭输出流        System.out.println("*********** " + xml.toString());    }    /**     * 初始化servlet. <br>     * @throws ServletException 发生ServletExcpetio异常时抛出     */    public void init() throws ServletException {    }}

按 Ctrl+C 复制代码

3.web.xml

按 Ctrl+C 复制代码

0 0

Ajax制作Web进度条 实例

Ajax制作Web进度条实例