快捷導(dǎo)航

使用AJAX實(shí)現(xiàn)Web頁(yè)面進(jìn)度條的實(shí)例分享

更新時(shí)間：2016年05月06日 16:59:58 作者：Arison

這篇文章主要介紹了使用AJAX實(shí)現(xiàn)Web頁(yè)面進(jìn)度條的實(shí)例分享,利用AJAX的異步來(lái)顯示服務(wù)器端的處理進(jìn)度是當(dāng)下比較流行的做法,需要的朋友可以參考下

在應(yīng)用程序的安裝和下載過(guò)程中，進(jìn)度條的使用已經(jīng)是非常普遍了。進(jìn)度條可以用來(lái)表識(shí)項(xiàng)目的完成進(jìn)度，可以用百分比或數(shù)字表示，可以水平放置。利用Ajax技術(shù)創(chuàng)建進(jìn)度條，功能顯得更加強(qiáng)大的快捷。
現(xiàn)在創(chuàng)建一個(gè)實(shí)例，以演示使用Ajax技術(shù)實(shí)現(xiàn)進(jìn)度條。該實(shí)例同樣可以分為客戶(hù)端代碼和服務(wù)端代碼。

1，服務(wù)端代碼
服務(wù)端代碼主要實(shí)現(xiàn)一句客戶(hù)端的請(qǐng)求信息，返回相應(yīng)的百分比數(shù)字。打開(kāi)記事本，輸入下列代碼：

<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %> 
<%! 
int counter = 1;//注意：多用戶(hù)將共享此變量，此進(jìn)度條只適合單用戶(hù) 
%> 
<% 
 String task = request.getParameter("task"); 
  String res = ""; 
   
  if (task.equals("create")) { 
   res = "1"; 
   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();  
%>

將上述代碼保存，名稱(chēng)為ProgressBar.jsp。在該文件中，聲明了一個(gè)變量counter，并賦值為1，該變量是進(jìn)度條返回百分比數(shù)字的依據(jù)。在下面使用request對(duì)象獲取客戶(hù)端傳送的變量task的值，如果該值為create，表示需要重新創(chuàng)建進(jìn)度條，并設(shè)定counter的值為1；如果task不是create，則會(huì)依據(jù)counter的值返回百分比數(shù)字，完成一次操作，counter值加1。

2，客戶(hù)端代碼
本實(shí)例的客戶(hù)端代碼主要實(shí)現(xiàn)依據(jù)返回百分比數(shù)字顯示進(jìn)度條的狀態(tài)。打開(kāi)記事本，輸入下列代碼：

<html> 
 <head> 
 <title>JSP+Ajax 進(jìn)度條</title> 
 <script type="text/javascript"> 
  var xmlHttp; 
  var bar_color = 'blue'; 
  var span_id = "yellow"; 
  var clear = " " 
 
  function createXMLHttpRequest() { 
   if (window.ActiveXObject) { 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
   } 
   else if (window.XMLHttpRequest) { 
    xmlHttp = new XMLHttpRequest();     
   } 
  } 
 
  function go() { 
   createXMLHttpRequest(); 
   checkDiv(); 
   var url = "ProgressBarJsp.jsp?task=create"; 
   xmlHttp.open("GET", url, true); 
   xmlHttp.onreadystatechange = goCallback; 
   xmlHttp.send(null); 
  } 
 
  function goCallback() { 
   if (xmlHttp.readyState == 4) { 
    if (xmlHttp.status == 200) { 
     setTimeout("pollServer()", 2000); 
    } 
   } 
  } 
   
  function pollServer() { 
   createXMLHttpRequest(); 
   var url = "ProgressBarJsp.jsp?task=poll"; 
   xmlHttp.open("GET", url, true); 
   xmlHttp.onreadystatechange = pollCallback; 
   xmlHttp.send(null); 
  } 
   
  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()", 2000); 
     } else { 
      document.getElementById("complete").innerHTML = "網(wǎng)站已完成加載!"; 
     } 
    } 
   } 
  } 
   
  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 onload="go();"> 
 <h1 align=center>網(wǎng)站正在加載中，請(qǐng)稍候</h1> 
 
 <p> 
 <table align="center"> 
  <tbody> 
   <tr><td> 
    <div id="progressBar" style="padding:2px;border:solid yellow 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>

將上述代碼保存，名稱(chēng)為JspprogressBar.html。在該文件中，JavaScript函數(shù)createXMLHttpRequest()主要用來(lái)創(chuàng)建XMLHttpRequest對(duì)象，go()函數(shù)完成想服務(wù)器端發(fā)送異步請(qǐng)求，該函數(shù)在網(wǎng)頁(yè)加載時(shí)被調(diào)用，其主要作用就是通知服務(wù)器，并在客戶(hù)端開(kāi)始運(yùn)行進(jìn)度條。GoCallback()函數(shù)主要用于處理服務(wù)端的響應(yīng)，并每隔2秒調(diào)用pollServer()函數(shù)也是用于向服務(wù)端發(fā)送異步請(qǐng)求，主要請(qǐng)求服務(wù)器端響應(yīng)的百分?jǐn)?shù)字。PollCallback()函數(shù)主要用于處理服務(wù)器端響應(yīng)，即依據(jù)服務(wù)器端的返回的數(shù)字，指定進(jìn)度條的顯示狀態(tài)。這里需要注意的是，goCallback()函數(shù)只執(zhí)行一次，而PollCallback()函數(shù)可以執(zhí)行多次，其余的三個(gè)函數(shù)都是實(shí)現(xiàn)進(jìn)度條的輔助函數(shù)。

3，運(yùn)行
將上述兩個(gè)Jsp文件復(fù)制到JSP目錄下。運(yùn)行效果圖如下：

201656165706542.jpg (518×153)