An AJAX implementation of the progress bar, the following code:
- <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
- <title>ajax Progress bar-www.cxybl.com</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);
- }
- }
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
