1. The progress bar consists of a div box and several spans with background colors;
2. The DIV is invisible during initialization, and the span background color is consistent with the webpage background color;
3. Calculate several span Blocks Based on the percentage of progress returned by the server, and set the background color for the span blocks;
Progressbar.html:
Program code <! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> progressbar </title>
<SCRIPT type = "text/JavaScript" src = "JS/progressbar. js"> </SCRIPT>
</Head>
<Body>
<H1> Ajax progress bar <Input id = "BTN" type = "button" value = "start" onclick = "dostart ();"/>
<Br/>
<Div id = "bar" style = "width: 156px; Border: #000000 2px solid; padding: 1px; visibility: hidden;">
<Span id = "bar1" style = "background-color: # ffffff"> </span>
<Span id = "bar2" style = "background-color: # ffffff"> </span>
<Span id = "bar3" style = "background-color: # ffffff"> </span>
<Span id = "bar4" style = "background-color: # ffffff"> </span>
<Span id = "bar5" style = "background-color: # ffffff"> </span>
<Span id = "bar6" style = "background-color: # ffffff"> </span>
<Span id = "bar7" style = "background-color: # ffffff"> </span>
<Span id = "bar8" style = "background-color: # ffffff"> </span>
<Span id = "bar9" style = "background-color: # ffffff"> </span>
<Span id = "bar10" style = "background-color: # ffffff"> </span>
</Div>
<Br/>
<Div id = "result"> </div>
</Body>
</Html>
Progressbar. JS:
Program code var XMLHTTP;
Function createxmlhttprequest (){
If (window. activexobject ){
XMLHTTP = new activexobject ("Microsoft. XMLHTTP ");
} Else if (window. XMLHttpRequest ){
XMLHTTP = new XMLHttpRequest ();
}
}
Function dostart (){
Init ();
Document. getelementbyid ("bar"). style. Visibility = "visible ";
}
Function Init (){
Createxmlhttprequest ();
XMLHTTP. onreadystatechange = handlechange;
VaR url = "progressbar. MGC? Action = init × tamp = "+ new date (). gettime ();
XMLHTTP. Open ("get", URL, true );
XMLHTTP. Send (null );
}
Function handlechange (){
If (XMLHTTP. readystate = 4 ){
If (XMLHTTP. Status = 200 ){
Refresh ();
}
}
}
Function refresh (){
Createxmlhttprequest ();
XMLHTTP. onreadystatechange = callback;
VaR url = "progressbar. MGC? Action = run × tamp = "+ new date (). gettime ();
XMLHTTP. Open ("get", URL, true );
XMLHTTP. Send (null );
SetTimeout ("Refresh ()", "500 ");
}
Function callback (){
If (XMLHTTP. readystate = 4 ){
If (XMLHTTP. Status = 200 ){
Parseresult ();
}
}
}
Function parseresult (){
VaR xmldoc = XMLHTTP. responsexml;
VaR pros = xmldoc. getelementsbytagname ("progress ");
VaR result = "";
For (VAR I = 0; I <pros. length; I ++ ){
VaR massage = pros [I]. childnodes [0]. childnodes [0]. nodevalue;
VaR percent = pros [I]. childnodes [1]. childnodes [0]. nodevalue;
Result + = massage + "[" + percent + "%]" + "<br/> ";
}
Document. getelementbyid ("result"). innerhtml = result;
Clearbar ();
VaR percents = xmldoc. getelementsbytagname ("percent ");
VaR nowpercent = percents [percents. Length-1]. childnodes [0]. nodevalue;
VaR COUNT = parseint (nowpercent/10 );
For (VAR I = 0; I <= count; I ++ ){
If (I! = 0 ){
VaR bar = Document. getelementbyid ("bar" + I );
Bar. style. backgroundcolor = "# bababa ";
}
}
}
Function clearbar (){
For (VAR I = 1; I <= 10; I ++ ){
VaR bar = Document. getelementbyid ("bar" + I );
Bar. style. backgroundcolor = "# ffffff ";
}
}
Progressbar. Java:
Program code package cn.edu. ahau. MGC. Ajax. progressbar;
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;
Public class progressbar extends httpservlet {
Private int count;
Private stringbuffer STR;
Public static final int Total = 25;
Public void doget (httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
This. dopost (request, response );
}
Public void dopost (httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
String action = request. getparameter ("action ");
If ("init". Equals (Action )){
This. Count = 1;
This. Str = new stringbuffer ();
} Else if ("run". Equals (Action )){
If (this. Count <= total ){
Int percent = count * 100/total;
Str. append ("<progress> <massage> completed" + (this. count ++) + "tasks </massage> <percent>" + percent + "</percent> </progress> ");
}
Response. setcontenttype ("text/XML; charset = UTF-8 ");
Response. setheader ("cache-control", "No-Cache ");
Printwriter out = response. getwriter ();
Out. Print ("<response>" + STR + "</response> ");
Out. Flush ();
Out. Close ();
}
}
}
Web. xml:
Program code <? XML version = "1.0" encoding = "UTF-8"?>
<Web-app version = "2.4"
Xmlns = "http://java.sun.com/xml/ns/j2ee"
Xmlns: xsi = "http://www.w3.org/2001/XMLSchema-instance"
Xsi: schemalocation = "http://java.sun.com/xml/ns/j2ee
Http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd>
<Servlet>
<Description> This is the description of my J2EE component </description>
<Display-Name> This is the display name of my J2EE component </display-Name>
<Servlet-Name> progressbar </servlet-Name>
<Servlet-class> cn.edu. ahau. MGC. Ajax. progressbar. progressbar </servlet-class>
</Servlet>
<Servlet-mapping>
<Servlet-Name> progressbar </servlet-Name>
<URL-pattern>/progressbar. MGC </url-pattern>
</Servlet-mapping>
<Welcome-file-List>
<Welcome-File> index. jsp </welcome-File>
</Welcome-file-List>
</Web-app>