<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<title>ajax Progress bar</title>
<script type= "Text/javascript" >
var xmlHttp;
var key;
var bar_color = ' gray ';//The Color of the progress bar
var span_id = "Block";
var clear = "";
function createxmlhttprequest ()//Create XMLHttpRequest Object
{
if (window. ActiveXObject)
{
XmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
}
else if (window. XMLHttpRequest)
{
XmlHttp = new XMLHttpRequest ();
}
}
function Go ()
{
Createxmlhttprequest ()///Create XMLHttpRequest Object
Checkdiv ()//Show scroll bar
Xmlhttp.onreadystatechange = callback;//Set callback function
var url = "/ajaxdemo/servlet/progressbarservlet?task=create";//Requested Address
var button = document.getElementById ("Go");
button.disabled = true;//Settings button not available
Xmlhttp.open ("Get", url,true);//Open connection to server
Xmlhttp.send ()//Send Request
}
function CallBack ()
{
if (xmlhttp.readystate = 4)
{
if (Xmlhttp.status = 200)
{
SetTimeout ("Pollserver ()", 500);//Timed Call
}
}
}
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;//get response information from the server side
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>
<body>
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" > </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>
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 is called when a form has it 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 = "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 ();
}
/**
* The DoPost method of the servlet. <br>
*
* This is called when a form, has its tag value, 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);
}
}
