Ajax制作Web进度条
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>
相关推荐
jiaguoquan00 2020-07-07
坚持着执着 2020-06-05
81530694 2011-09-27
liqing00 2012-07-11
zergxixi 2016-10-31
zhaolisha 2020-06-12
knightwatch 2020-04-25
zhaolisha 2020-01-11
zhaolisha 2019-12-29
wanghongsha 2019-12-06
小小大人物 2014-01-19
loopstang 2014-01-11
roodyszz0 2019-11-17
81493369 2019-11-04
Liuzhiqianblog 2019-11-03
用不完的好奇心 2019-10-26
89241846 2019-09-12