The effect is as follows:
Copy codeThe Code is as follows:
<! 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 '; // progress bar color
Var span_id = "block ";
Var clear = "";
Function createXMLHttpRequest () // create an XMLHttpRequest object
{
If (window. ActiveXObject)
{
XmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");
}
Else if (window. XMLHttpRequest)
{
XmlHttp = new XMLHttpRequest ();
}
}
Function go ()
{
CreateXMLHttpRequest (); // create an XMLHttpRequest object
CheckDiv (); // display the scroll bar
XmlHttp. onreadystatechange = callBack; // you can specify the callBack function.
Var url = "/AjaxDemo/servlet/ProgressBarServlet? Task = create "; // request address
Var button = document. getElementById ("go ");
Button. disabled = true; // The set button is unavailable.
XmlHttp. open ("get", url, true); // open the connection to the server
XmlHttp. send (); // send a request
}
Function callBack ()
{
If (xmlHttp. readyState = 4)
{
If (xmlHttp. status = 200)
{
SetTimeout ("pollServer ()", 500); // scheduled 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; // obtain the response information from the server.
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 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>
</Html>
Copy codeThe Code is as follows:
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 );
}
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
