AJAX を使用して Web ページにプログレスバーを実装する例の共有

AJAX を使用して Web ページにプログレスバーを実装する例の共有_JavaScript スキル

WBOY

リリース： 2016-05-16 15:01:44

オリジナル

1989 人が閲覧しました

アプリケーションのインストールおよびダウンロードのプロセス中に、進行状況バーを使用することが非常に一般的になりました。進行状況バーは、プロジェクトの完了の進行状況を示すために使用でき、パーセンテージまたは数値で表すことができ、水平に配置できます。 Ajax テクノロジーを使用して進行状況バーを作成すると、機能がより強力かつ高速になります。
次に、Ajax テクノロジーを使用してプログレスバーを実装する例を作成します。この例は、クライアントコードとサーバーコードに分けることもできます。

1、サーバーコード
サーバーコードは主にクライアントのリクエスト情報を実装し、対応するパーセンテージの数値を返します。メモ帳を開き、次のコードを入力します:

<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %> 
<%! 
int counter = 1;//注意：多用户将共享此变量，此进度条只适合单用户 
%> 
<% 
 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();  
%>

ログイン後にコピー

上記のコードを ProgressBar.jsp として保存します。このファイルでは、変数 counter が宣言され、値 1 が割り当てられています。この変数は、プログレスバーによって返されるパーセンテージ数値の基礎となります。以下のリクエストオブジェクトを使用して、クライアントから送信された変数タスクの値を取得します。値が create の場合は、プログレスバーを再作成する必要があり、タスクが 1 の場合は counter の値が 1 に設定されることを意味します。作成しない場合は、カウンター番号の値に基づいてパーセンテージが返され、操作が完了するとカウンター値が 1 ずつ増加します。

2、クライアントコード
この例のクライアントコードは、主に、返されたパーセンテージ数値に基づいて進行状況バーのステータスを表示します。メモ帳を開き、次のコードを入力します:

<html> 
 <head> 
 <title>JSP+Ajax 进度条</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&#63;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&#63;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 = "网站已完成加载!"; 
     } 
    } 
   } 
  } 
   
  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>网站正在加载中，请稍候</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>

ログイン後にコピー

上記のコードを JspprogressBar.html として保存します。このファイルでは、JavaScript 関数 createXMLHttpRequest() が主に XMLHttpRequest オブジェクトの作成に使用されます。 go() 関数は、Web ページがロードされたときに呼び出され、通知します。サーバーを起動し、クライアントで実行の進行状況バーを表示します。 GoCallback() 関数は主にサーバーの応答を処理するために使用され、pollServer() 関数は 2 秒ごとに呼び出され、主にサーバーの応答の割合を要求する非同期リクエストをサーバーに送信するためにも使用されます。 PollCallback() 関数は主にサーバー側の応答を処理するために使用されます。つまり、サーバー側から返された数値に基づいて進行状況バーの表示ステータスを指定します。ここで、 goCallback() 関数は 1 回のみ実行されますが、PollCallback() 関数は複数回実行できることに注意してください。残りの 3 つの関数は、プログレスバーを実装するための補助関数です。

3、実行
上記の 2 つの Jsp ファイルを JSP ディレクトリにコピーします。動作効果図は以下のとおりです。

201656165706542.jpg (518×153)