Ajax File Upload progress bar page: progressbar.jsp
<%@ page contenttype= "text/html; CHARSET=GBK "%>
<title>
Ajax progress Bar
</title>
<script type= "Text/javascript" >
XMLHttpRequest objects
var xmlHttp;
var key;
progress bar Color
var bar_color= ' Gray ';
var span_id= ' block ';
var clear= " "
Creating XMLHttpRequest Objects
function Createxmlhttprequest () {
if (window. ActiveXObject) {
XmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
}
else if (window. XMLHttpRequest) {
XmlHttp = new XMLHttpRequest ();
}
}
Execution method
function Go () {
Createxmlhttprequest ();
Checkdiv ();
var url = "Progressbarservlet?task=create";
Hide button
var button = document.getElementById ("Go");
Button.disabled = true;
Xmlhttp.open ("Get", url,true);
Xmlhttp.onreadystatechange = Gocallback;
Xmlhttp.send (NULL);
}
callback method
function Gocallback () {
if (xmlhttp.readystate = = 4) {
if (Xmlhttp.status = = 200) {
Set Update time
SetTimeout ("Pollserver ()", 2000);
}
}
}
Refresh, Resend
function Pollserver () {
Createxmlhttprequest ();
var url = "progressbarservlet?task=poll&key=" + key;
Xmlhttp.open ("Get", url,true);
Xmlhttp.onreadystatechange = Pollcallback;
Xmlhttp.send (NULL);
}
callback method
function Pollcallback () {
if (xmlhttp.readystate = = 4) {
if (Xmlhttp.status = = 200) {
Percent complete
var percent_complete = XmlHttp.responseXML.getElementsByTagName ("percent") [0].firstchild.data;
var index = Processresult (percent_complete);
var (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 ()", 2000);
}else{
document.getElementById ("complete"). InnerHTML = "complete!";
document.getElementById ("Go"). Disabled = false;
}
}
}
}
Parse results
function Processresult () {
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;
}
Check the TIP layer information
function Checkdiv () {
var Progress_bar = document.getElementById ("ProgressBar");
if (progress_bar.style.visibility = = "visible") {
Clear progress bar
Clearbar ();
document.getElementById ("complete"). InnerHTML = "";
}else{
progress_bar.style.visibility = "visible";
}
}
Clear progress bar
function Clearbar () {
for (var i = 1; i < i++) {
var elem = document.getElementById ("block" + i);
elem.innerhtml = clear;
Elem.style.backgroundColor = "White";
}
}
</script>
<body bgcolor= "#ffffff" >
Ajax progress Bar Example
To run the progress bar:
<input type= "button" value= "Run" id= "Go" onclick= "Go ()"/>
<p>
</p>
<table align= "center" >
<tbody>
<tr>
<td><div id= "ProgressBar" style= "Padding:2px;border:solid black 2px;visibility?hidden" >
<span id= "Block1" > </span>
<span id= "Block2" > </span>
<span id= "Block3" > </span>
<span id= "Block4" > </span>
<span id= "Block5" > </span>
<span id= "Block6" > </span>
<span id= "Block7" > </span>
<span id= "Block8" > </span>
<span id= "Block9" > </span>
</div></td>
</tr>
<TR><TD align= "center" id= "complete" ></td> </tr>
</tbody>
</table>
</body>
Server side: Progressbarservlet.java
Package ajaxvalidation;
Import javax.servlet.*;
Import javax.servlet.http.*;
Import java.io.*;
Import java.util.*;
public class Progressbarservlet
Extends HttpServlet {
private static final String Content_Type = "text/html;" CHARSET=GBK ";
Counter
private int counter = 1;
Initialize Global Variables
public void Init () throws Servletexception {
}
Handling Get methods
public void doget (HttpServletRequest request, httpservletresponse response) throws
Servletexception, IOException {
Get task type
String task = Request.getparameter ("task");
The returned XML string
String res = "";
For the first time, create a progress bar
if (Task.equals ("create")) {
res = "<key>1</key>";
counter = 1;
}else{
Percent complete
String percent = "";
Switch (counter) {
Case 1:percent = "ten";
Case 2:percent = "n";
Case 3:percent = "a";
Case 4:percent = "Wuyi";
Case 5:percent = "the";
Case 6:percent = "by";
Case 7:percent = "the";
Case 8:percent = "a";
}
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 ();
}
Clean up resources
public void Destroy () {
}
}