OStack程序员社区-中国程序员成长平台 › 门户 ›编程› AJAX› AJAX编程经验 › 查看内容

AJAX 进度条实现代码

2022-2-5 17:00| 发布者: 菜鸟教程小白| 查看: 294| 评论: 0|原作者: [db:作者]|来自: [db:来源]

摘要: AJAX 进度条实现代码，基于java后来，大家可以学习下。

效果如下：

<!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; 
var bar_color = 'gray';//进度条的颜色 
var span_id = "block"; 
var clear = "&nbsp;&nbsp;&nbsp;"; 
function createXMLHttpRequest()//创建XMLHttpRequest对象 
{ 
if(window.ActiveXObject) 
{ 
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
else if(window.XMLHttpRequest) 
{ 
xmlHttp = new XMLHttpRequest(); 
} 
} 
function go() 
{ 
createXMLHttpRequest();//创建XMLHttpRequest对象 
checkDiv();//显示滚动条 
xmlHttp.onreadystatechange = callBack;//设置回调函数 
var url = "/AjaxDemo/servlet/ProgressBarServlet?task=create";//请求的地址 
var button = document.getElementById("go"); 
button.disabled = true;//设置按钮不可用 
xmlHttp.open("get",url,true);//打开对服务器的连接 
xmlHttp.send();//发送请求 
} 
function callBack() 
{ 
if(xmlHttp.readyState == 4) 
{ 
if(xmlHttp.status == 200) 
{ 
setTimeout("pollServer()",500);//定时调用 
} 
} 
} 
function pollServer() 
{ 
createXMLHttpRequest(); 
var url="/AjaxDemo/servlet/ProgressBarServlet?task=poll&key="+key; 
xmlHttp.onreadystatechange = pollCallBack; 
xmlHttp.open("GET",url,true); 
xmlHttp.send(); 
} 
function pollCallBack() 
{ 
if(xmlHttp.readyState == 4) 
{ 
if(xmlHttp.status == 200) 
{ 
var percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0] 
.firstChild.data;//从服务器端获得响应信息 
var index = processResult(percent_complete); 
for(var i = 1; i<=index; i++) 
{ 
var elem = document.getElementById("block"+i); 
elem.innerHTML = clear; 
elem.style.backgroundColor = bar_color; 
var next_cell = i+1; 
if(next_cell > index && next_cell <= 9) 
{ 
document.getElementById("block"+next_cell).innerHTML = percent_complete + "%"; 
} 
} 
if(index <9 ) 
{ 
setTimeout("pollServer()",500); 
} 
else 
{ 
document.getElementById("complete").innerHTML = "Complete!"; 
document.getElementById("go").disabled = false; 
} 
} 
} 
} 
function processResult(percent_complete) 
{ 
var ind; 
if(percent_complete.length == 1) 
{ 
ind = 1; 
} 
else if(percent_complete.length == 2) 
{ 
ind = percent_complete.substring(0,1); 
} 
else 
{ 
ind = 9; 
} 
return ind; 
} 
function checkDiv() 
{ 
var progress_bar = document.getElementById("progressBar"); 
if(progress_bar.style.visibility == "visible") 
{ 
clearBar(); 
document.getElementById("complete").innerHTML = ""; 
} 
else 
{ 
progress_bar.style.visibility = "visible"; 
} 
} 
function clearBar() 
{ 
for(var i =1; i<10; i++) 
{ 
var elem = document.getElementById("block"+i); 
elem.innerHTML = clear; 
elem.style.backgroundColor = "white"; 
} 
} 
</script> 
</head> 
<body> 
<h1>Ajax Progress Bar Example</h1> 
Launch long-running process: 
<input type="button" value="Launch" id="go" onclick="go()"/> 
<p> 
<table align="center"> 
<tbody> 
<tr> 
<td> 
<div id="progressBar" style="padding:2px;border:solid black 2px;visibility:hidden"> 
<span id="block1">&nbsp;&nbsp;&nbsp;</span> 
<span id="block2">&nbsp;&nbsp;&nbsp;</span> 
<span id="block3">&nbsp;&nbsp;&nbsp;</span> 
<span id="block4">&nbsp;&nbsp;&nbsp;</span> 
<span id="block5">&nbsp;&nbsp;&nbsp;</span> 
<span id="block6">&nbsp;&nbsp;&nbsp;</span> 
<span id="block7">&nbsp;&nbsp;&nbsp;</span> 
<span id="block8">&nbsp;&nbsp;&nbsp;</span> 
<span id="block9">&nbsp;&nbsp;&nbsp;</span> 
</div> 
</td> 
</tr> 
<tr><td align="center" id="complete"></td></tr> 
</tbody> 
</table> 
</body> 
</html>

复制代码代码如下:

package cn.Ajax.test; 
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; 
@SuppressWarnings("serial") 
public class ProgressBarServlet extends HttpServlet { 
private int counter = 1; 
/** 
* The doGet method of the servlet. <br> 
* 
* This method is called when a form has its tag value method equals to get. 
* 
* @param request the request send by the client to the server 
* @param response the response send by the server to the client 
* @throws ServletException if an error occurred 
* @throws IOException if an error occurred 
*/ 
public 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(); 
} 
/** 
* The doPost method of the servlet. <br> 
* 
* This method is called when a form has its tag value method equals to post. 
* 
* @param request the request send by the client to the server 
* @param response the response send by the server to the client 
* @throws ServletException if an error occurred 
* @throws IOException if an error occurred 
*/ 
public void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
doGet(request, response); 
} 
} 