アプリケーションのインストールとダウンロード中に、進行状況バーの使用が非常に一般的になりました。 Progress Barを使用して、プロジェクトの完了進行を識別し、パーセンテージまたは数値で表すことができ、水平に配置できます。 AJAXテクノロジーを使用して進行状況バーを作成すると、機能はより強力で高速になります。
次に、AJAXテクノロジーを使用して進行状況バーの実装を実証するインスタンスを作成します。このインスタンスは、クライアントコードとサーバーコードに分割することもできます。
1。サーバーコード
サーバーコードは、主にクライアントリクエスト情報の文を実装し、対応するパーセンテージ数を返します。メモ帳を開いて、次のコードを入力します。
<％@ page contentType = "text/html; charset = gb2312"言語= "java" import = "java.sql。*" errorpage = ""％> <％！ int counter = 1; //注：複数のユーザーがこの変数を共有します。この進捗バーは、単一のユーザーにのみ適しています％> <％string task = request.getParameter（ "task"）;文字列res = ""; if（task.equals（ "create"））{res = "1";カウンター= 1; } else {stringパーセント= ""; switch（counter）{ケース1：パーセント= "10";壊す;ケース2：パーセント= "23";壊す;ケース3：パーセント= "35";壊す;ケース4：パーセント= "51";壊す;ケース5：パーセント= "64";壊す;ケース6：パーセント= "73";壊す;ケース7：パーセント= "89";壊す;ケース8：パーセント= "100";壊す; } counter ++; res = "<パーセント>" +パーセント + "</パーセント>"; } // printwriter out = respons.getWriter（）; Response.setContentType（ "Text/xml"）; Response.setheader（ "Cache-Control"、 "no-cache"）; out.println（ "<response>"）; out.println（res）; out.println（ "</respons>"）; out.close（）; ％>上記のコードをreswordbar.jspという名前で保存します。このファイルでは、変数カウンターが宣言され、1の値が割り当てられます。これは、Progress Barがパーセンテージ番号を返す基礎です。以下では、リクエストオブジェクトを使用して、クライアントが送信した変数タスクの値を取得します。値が作成されている場合、進行状況バーを再作成する必要があり、カウンター値が1に設定されていることを意味します。タスクが作成されていない場合、パーセンテージ数はカウンター値に基づいて返され、操作が完了し、カウンター値が1に追加されます。
2。クライアントコード
この例のクライアントコードは、主に戻り率の割合数に基づいて進行状況バーのステータスを実装しています。メモ帳を開いて、次のコードを入力します。
<html> <head> <title> jsp+ajax progress bar </title> <script = "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）{setimeout（ "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（ "パーセント"）[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）{setimeout（ "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>ウェブサイトはロードされています。 id = "block2"> </span> <span id = "block3"> </span> <span id = "block4"> </span> <span id = "block5"> </span> <span id = "block6"> </span> <span> <span> <span> <span> < <tr> <td align = "center" id = "complete"> </td> </tr> </tbody> </table> </body> </html>jspprogressbar.htmlという名前で上記のコードを保存します。このファイルでは、javaScript関数CreatexmlhttpRequest（）は、主にxmlhttprequestオブジェクトを作成するために使用されます。 GO（）関数は、サーバーに非同期リクエストを送信したいと考えています。この関数は、Webページがロードされたときに呼び出されます。その主な機能は、サーバーに通知し、クライアントの進行状況バーの実行を開始することです。 GoCallback（）関数は、主にサーバーの応答を処理するために使用され、2秒ごとにPollserver（）関数を呼び出します。また、非同期リクエストをサーバーに送信するためにも使用され、主にサーバーの応答の割合を要求します。 Pollcallback（）関数は、主にサーバー側の応答を処理するために使用されます。つまり、サーバー側によって返される数に基づいて、進行状況バーの表示ステータスを指定します。ここでは、gocallback（）関数は1回のみ実行され、Pollcallback（）関数は複数回実行でき、他の3つの関数は進行状況バーを実装する補助関数であることに注意してください。
3。実行します
上記の2つのJSPファイルをJSPディレクトリにコピーします。操作レンダリングは次のとおりです。