Ajax實現進度條

最後更新：2017-02-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

Ajax實現的進度條，如下代碼：

 
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
  <html> 
  <head> 
  <title>Ajax Progress Bar - www.cxybl.com</title> 
  <script type="text/javascript"> 
  var xmlHttp; 
  var key; 
  var bar_color = 'gray';//進度條的顏色 
  var span_id = "block"; 
  var clear = " "; 
  function createXMLHttpRequest()//建立XMLHttpRequest對象 
  { 
  if(window.ActiveXObject) 
  { 
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
  } 
  else if(window.XMLHttpRequest) 
  { 
  xmlHttp = new XMLHttpRequest(); 
  } 
  } 
  function go() 
  { 
  createXMLHttpRequest();//建立XMLHttpRequest對象 
  checkDiv();//顯示捲軸 
  xmlHttp.onreadystatechange = callBack;//設定回呼函數 
  var url = "/AjaxDemo/servlet/ProgressBarServlet?task=create";//請求的地址 
  var button = document.getElementById("go"); 
  button.disabled = true;//設定按鈕不可用 
  xmlHttp.open("get",url,true);//開啟對伺服器的串連 
  xmlHttp.send();//發送請求 
  } 
  function callBack() 
  { 
  if(xmlHttp.readyState == 4) 
  { 
  if(xmlHttp.status == 200) 
  { 
  setTimeout("pollServer()",500);//定時調用 
  } 
  } 
  } 
  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;//從伺服器端獲得響應資訊 
  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</h1> 
  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> 
   
   
  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); 
  } 
  }

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More