Ajax实现进度条

Ajax实现的进度条，如下代码：

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
2. <html> 
3. <head> 
4. <title>Ajax Progress Bar - www.cxybl.com</title> 
5. <script type="text/javascript"> 
6. var xmlHttp; 
7. var key; 
8. var bar_color = 'gray';//进度条的颜色 
9. var span_id = "block"; 
10. var clear = " "; 
11. function createXMLHttpRequest()//创建XMLHttpRequest对象 
12. { 
13. if(window.ActiveXObject) 
14. { 
15. xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
16. } 
17. else if(window.XMLHttpRequest) 
18. { 
19. xmlHttp = new XMLHttpRequest(); 
20. } 
21. } 
22. function go() 
23. { 
24. createXMLHttpRequest();//创建XMLHttpRequest对象 
25. checkDiv();//显示滚动条 
26. xmlHttp.onreadystatechange = callBack;//设置回调函数 
27. var url = "/AjaxDemo/servlet/ProgressBarServlet?task=create";//请求的地址 
28. var button = document.getElementById("go"); 
29. button.disabled = true;//设置按钮不可用 
30. xmlHttp.open("get",url,true);//打开对服务器的连接 
31. xmlHttp.send();//发送请求 
32. } 
33. function callBack() 
34. { 
35. if(xmlHttp.readyState == 4) 
36. { 
37. if(xmlHttp.status == 200) 
38. { 
39. setTimeout("pollServer()",500);//定时调用 
40. } 
41. } 
42. } 
43. function pollServer() 
44. { 
45. createXMLHttpRequest(); 
46. var url="/AjaxDemo/servlet/ProgressBarServlet?task=poll&key="+key; 
47. xmlHttp.onreadystatechange = pollCallBack; 
48. xmlHttp.open("GET",url,true); 
49. xmlHttp.send(); 
50. } 
51. function pollCallBack() 
52. { 
53. if(xmlHttp.readyState == 4) 
54. { 
55. if(xmlHttp.status == 200) 
56. { 
57. var percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0] 
58. .firstChild.data;//从服务器端获得响应信息 
59. var index = processResult(percent_complete); 
60. for(var i = 1; i<=index; i++) 
61. { 
62. var elem = document.getElementById("block"+i); 
63. elem.innerHTML = clear; 
64. elem.style.backgroundColor = bar_color; 
65. var next_cell = i+1; 
66. if(next_cell > index && next_cell <= 9) 
67. { 
68. document.getElementById("block"+next_cell).innerHTML = percent_complete + "%"; 
69. } 
70. } 
71. if(index <9 ) 
72. { 
73. setTimeout("pollServer()",500); 
74. } 
75. else 
76. { 
77. document.getElementById("complete").innerHTML = "Complete!"; 
78. document.getElementById("go").disabled = false; 
79. } 
80. } 
81. } 
82. } 
83. function processResult(percent_complete) 
84. { 
85. var ind; 
86. if(percent_complete.length == 1) 
87. { 
88. ind = 1; 
89. } 
90. else if(percent_complete.length == 2) 
91. { 
92. ind = percent_complete.substring(0,1); 
93. } 
94. else 
95. { 
96. ind = 9; 
97. } 
98. return ind; 
99. } 
100. function checkDiv() 
101. { 
102. var progress_bar = document.getElementById("progressBar"); 
103. if(progress_bar.style.visibility == "visible") 
104. { 
105. clearBar(); 
106. document.getElementById("complete").innerHTML = ""; 
107. } 
108. else 
109. { 
110. progress_bar.style.visibility = "visible"; 
111. } 
112. } 
113. function clearBar() 
114. { 
115. for(var i =1; i<10; i++) 
116. { 
117. var elem = document.getElementById("block"+i); 
118. elem.innerHTML = clear; 
119. elem.style.backgroundColor = "white"; 
120. } 
121. } 
122. </script> 
123. </head> 
124. <body> 
125. <h1>Ajax Progress Bar Example</h1> 
126. Launch long-running process: 
127. <input type="button" value="Launch" id="go" onclick="go()"/> 
128. <p> 
129. <table align="center"> 
130. <tbody> 
131. <tr> 
132. <td> 
133. <div id="progressBar" style="padding:2px;border:solid black 2px;visibility:hidden"> 
134. <span id="block1"> </span> 
135. <span id="block2"> </span> 
136. <span id="block3"> </span> 
137. <span id="block4"> </span> 
138. <span id="block5"> </span> 
139. <span id="block6"> </span> 
140. <span id="block7"> </span> 
141. <span id="block8"> </span> 
142. <span id="block9"> </span> 
143. </div> 
144. </td> 
145. </tr> 
146. <tr><td align="center" id="complete"></td></tr> 
147. </tbody> 
148. </table> 
149. </body> 
150. </html> 
151.  
152.  
153. package cn.Ajax.test; 
154. import java.io.IOException; 
155. import java.io.PrintWriter; 
156. import javax.servlet.ServletException; 
157. import javax.servlet.http.HttpServlet; 
158. import javax.servlet.http.HttpServletRequest; 
159. import javax.servlet.http.HttpServletResponse; 
160. @SuppressWarnings("serial") 
161. public class ProgressBarServlet extends HttpServlet { 
162. private int counter = 1; 
163. /** 
164. * The doGet method of the servlet. <br> 
165. * 
166. * This method is called when a form has its tag value method equals to get. 
167. * 
168. * @param request the request send by the client to the server 
169. * @param response the response send by the server to the client 
170. * @throws ServletException if an error occurred 
171. * @throws IOException if an error occurred 
172. */ 
173. public void doGet(HttpServletRequest request, HttpServletResponse response) 
174. throws ServletException, IOException { 
175. String task = request.getParameter("task"); 
176. String res=""; 
177. if(task.equals("create")){ 
178. res = "<key>1</key>"; 
179. counter = 1; 
180. } 
181. else{ 
182. String percent = ""; 
183. switch (counter) { 
184. case 1: percent = "10";break; 
185. case 2: percent = "23";break; 
186. case 3: percent = "35";break; 
187. case 4: percent = "51";break; 
188. case 5: percent = "64";break; 
189. case 6: percent = "73";break; 
190. case 7: percent = "89";break; 
191. case 8: percent = "100";break; 
192. } 
193. counter++; 
194. res ="<percent>"+percent+"</percent>"; 
195. } 
196. PrintWriter out = response.getWriter(); 
197. response.setContentType("text/xml"); 
198. response.setHeader("Cache-Control", "no-cache"); 
199. out.println("<response>"); 
200. out.println(res); 
201. out.println("</response>"); 
202. out.close(); 
203. } 
204. /** 
205. * The doPost method of the servlet. <br> 
206. * 
207. * This method is called when a form has its tag value method equals to post. 
208. * 
209. * @param request the request send by the client to the server 
210. * @param response the response send by the server to the client 
211. * @throws ServletException if an error occurred 
212. * @throws IOException if an error occurred 
213. */ 
214. public void doPost(HttpServletRequest request, HttpServletResponse response) 
215. throws ServletException, IOException { 
216. doGet(request, response); 
217. } 
218. }  

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索xmlhttprequest
， function
， xmlhttp
， var
， 进度
， ajax进度条
， ajax实现进度条
onreadystatechange
ajax 加载实时进度条、php ajax实现进度条、ajax实现上传进度条、ajax进度条、ajaxfileupload进度条，以便于您获取更多的相关知识。