Ajax制作Web进度条
1.index.jsp
1 <%@ page language="java" pageEncoding="UTF-8"%> 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 3 <html> 4 <head> 5 <script type="text/javascript" language="javaScript"> 6 var bgcolor = '#7FFF00'; //全局变量，用于设置进度条的背景色 7 var number; //全局变量，用于记录当前span序号 8 var clear = " "; //全局变量，记录清空时的内容 9 var xmlHttp = false; //全局变量，用于记录XMLHttpRequest对象 10 function createXMLHttpRequest() { //创建XMLHttpRequest对象的方法 11 if(window.ActiveXObject) { //Inetrnet Explorer时，创建XMLHttpRequest对象的方法 12 try { 13 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 14 } catch(e) { 15 try { 16 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 17 //旧版本的Inetrnet Explorer，创建XMLHttpRequest对象 18 } catch(e) { 19 window.alert("创建XMLHttpRequest对象错误"+e); 20 } 21 } 22 } else if(window.XMLHttpRequest) { //mozilla时，创建XMLHttpRequest对象的方法 23 xmlHttp = new XMLHttpRequest(); 24 } 25 if(!(xmlHttp)) { //未成功创建XMLHttpRequest对象 26 window.alert("创建XMLHttpRequest对象异常！"); 27 } 28 } 29 30 //启动进度条的方法 31 function startRun() { 32 createXMLHttpRequest(); //创建XMLHttpRequest对象 33 clearBar(); //执行请求前先清除进度条 34 xmlHttp.onreadystatechange = callBack; 35 //指定onreadystatechange属性值，用于指定状态正常时的处理函数 36 xmlHttp.open("GET", "/ProgressTest/servlet/ProcessServlet?flag=start", true); 37 xmlHttp.send(null); 38 } 39 40 //开始进行进度条显示的处理函数 41 function callBack() { 42 //window.alert("callBack()"); 43 if(xmlHttp.readyState == 4) { 44 if(xmlHttp.status == 200) { //status状态正常时 45 setTimeout("aginRun()",1000); 46 //每隔1000毫秒（1秒）执行一次“aginRun()”函数 47 } 48 } 49 } 50 51 //清除用于显示进度条的span的内容 52 function clearBar() { 53 for (var i=0;i<10;i++) { //根据span元素的id，分别清楚其显示内容 54 var sp = document.getElementById("sp" + i); 55 sp.innerHTML = clear; //首先清空span元素的内容 56 sp.style.backgroundColor = "white"; //设置span元素的背景色 57 } 58 } 59 //设置用于显示进度条的span元素的显示内容 60 function aginRun() { 61 createXMLHttpRequest(); //创建XMLHttpRequest对象 62 xmlHttp.onreadystatechange = aginCallBack; 63 //指定状态正常时的处理函数为“aginCallBack” 64 document.getElementById("run").disabled=true; //设置按钮不可用 65 xmlHttp.open("GET", "/ProgressTest/servlet/ProcessServlet?flag=run", true); 66 //window.alert(" " + number); 67 xmlHttp.send(null); 68 } 69 70 //进度条执行时的函数 71 function aginCallBack() { 72 if(xmlHttp.readyState==4) { 73 if(xmlHttp.status==200) { 74 var percent = 75 xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data; 76 //记录当前完成比例 77 var index = parseResult(percent); //解析结果集 78 var nextCell = 1; 79 for (var i=0; i<index; i++) { //遍历span元素集合，设置其内容（颜色与文字） 80 var sp = document.getElementById("sp"+i); 81 //根据每个span元素的id获取span对象 82 sp.innerHTML= clear; //清空span元素内容 83 sp.style.backgroundColor = bgcolor; //设置span元素的内容 84 nextCell = i+1; 85 if(nextCell>=index && nextCell<10) { //显示当前处理进度的百分比 86 document.getElementById("sp"+nextCell).innerHTML=percent+"%"; 87 } 88 } 89 if(index<10) { //索引小于10，设置setTimeout方法 90 setTimeout("aginRun()",1000); 91 } else { //索引大于10，设置进度条成功完成的页面效果 92 document.getElementById("result").innerHTML = "OK!"; 93 document.getElementById("run").disabled = false; 94 } 95 } 96 } 97 } 98 99 //解析结果集 100 function parseResult(result) { 101 if(result.length<1) { 102 return 1; 103 } else if(result.length==2) { 104 return result.substring(0,1); 105 } else { 106 return 10; 107 } 108 } 109 </script> 110 <title>Ajax进度条</title> 111 </head> 112 <body> 113 <table align="center"> 114 <tr> 115 <td>Ajax进度条示例 <input type="button" value="开始" id="run" onclick="startRun();"/></td> 116 </tr> 117 <tr> 118 <td> 119 <div id="processBar" style="padding:1px;border:solid black 1px;"> 120 <span id="sp0"> </span> 121 <span id="sp1"> </span> 122 <span id="sp2"> </span> 123 <span id="sp3"> </span> 124 <span id="sp4"> </span> 125 <span id="sp5"> </span> 126 <span id="sp6"> </span> 127 <span id="sp7"> </span> 128 <span id="sp8"> </span> 129 <span id="sp9"> </span> 130 </div> 131 </td> 132 </tr> 133 <tr><td align="center" id="result"></td> </tr> 134 </table> 135 </body> 136 </html>
2.ProcessServlet.java
1 public class ProcessServlet extends HttpServlet { 2 3 private static final String CONTENT_TYPE = "text/xml; charset=UTF-8"; 4 //设置返回响应的ContentType 5 private int count = 1;// 全局变量计数器 6 /** 7 *当前Servlet对象构造方法 8 */ 9 public ProcessServlet() { 10 super(); 11 } 12 /** 13 *当前Servlet销毁时的操作。<br> 14 */ 15 public void destroy() { 16 super.destroy(); 17 } 18 /** 19 *当前Servlet的doGet方法。<br> 20 * 21 *当客户端表单的“method”类型为“get”时，调用此方法 22 * 23 * @param request客户端请求对象 24 * @param response 服务器响应对象 25 * @throws ServletException 发生ServeltException时抛出 26 * @throws IOException发生IOException时抛出 27 */ 28 public void doGet(HttpServletRequest request, HttpServletResponse response) 29 throws ServletException, IOException { 30 System.out.println("*********************doGet()**********"); 31 response.setContentType(CONTENT_TYPE); //设置服务器响应类型 32 response.setHeader("Cache-Control","no-cache"); //页面不记录缓存 33 String flag = request.getParameter("flag"); //操作类型 34 StringBuffer xml= 35 // new StringBuffer("<?xml version=\"1.0\" encoding=\"UTF-8\"?><items>"); 36 new StringBuffer("<items>"); 37 //记录返回的xml串 38 if("start".equals(flag)) { //第一次创建 39 // xml.append("<count>1</count>"); 40 count = 1; 41 } else { 42 String proportion = ""; 43 switch(count) { //根据计数器的值，设置显示当前进度的百分比 44 case 1:proportion="10"; break; 45 case 2:proportion="20"; break; 46 case 3:proportion="30"; break; 47 case 4:proportion="40"; break; 48 case 5:proportion="50"; break; 49 case 6:proportion="60"; break; 50 case 7:proportion="70"; break; 51 case 8:proportion="80"; break; 52 case 9:proportion="90"; break; 53 case 10:proportion="100"; break; 54 } 55 count++; 56 xml.append("<percent>").append(proportion).append("</percent>"); 57 } 58 xml.append("</items>"); 59 PrintWriter out = response.getWriter(); 60 out.println(xml.toString()); //返回生成的XML串 61 out.flush(); //输出流刷新 62 out.close(); //关闭输出流 63 System.out.println("*********** " + xml.toString()); 64 } 65 66 /** 67 * 初始化servlet. <br> 68 * @throws ServletException 发生ServletExcpetio异常时抛出 69 */ 70 public void init() throws ServletException { 71 } 72 }
3.web.xml
1 <?xml version="1.0" encoding="UTF-8"?> 2 <web-app version="2.5" 3 xmlns="http://java.sun.com/xml/ns/javaee" 4 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 5 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 6 http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> 7 <servlet> 8 <servlet-name>ProcessServlet</servlet-name> 9 <servlet-class>wen.ProcessServlet</servlet-class> 10 </servlet> 11 <servlet-mapping> 12 <servlet-name>ProcessServlet</servlet-name> 13 <url-pattern>/servlet/ProcessServlet</url-pattern> 14 </servlet-mapping> 15 16 <welcome-file-list> 17 <welcome-file>index.jsp</welcome-file> 18 </welcome-file-list> 19 </web-app>
