ホームページ > 記事 > ウェブフロントエンド > AJAX を使用して Web ページにプログレスバーを実装する例を共有する
AJAX を使用して Web ページにプログレスバーを実装する例を共有する
- 亚连オリジナル
- 2018-05-22 10:53:061766ブラウズ
この記事では、AJAX を使用して Web ページにプログレス バーを実装する例を主に紹介します。AJAX を使用してサーバー側の処理の進行状況を表示する方法は、現時点では一般的な方法です。必要な方は参考にしてください。アプリケーションのインストールとダウンロード その過程で、プログレス バーの使用が非常に一般的になりました。進行状況バーは、プロジェクトの完了の進行状況を示すために使用でき、パーセンテージまたは数値で表すことができ、水平に配置できます。 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();
checkp();
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 = "网站已完成加载!";
}
}
}
}
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 checkp() {
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>
<p 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>
</p>
</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 回のみ実行されますが、残りの 3 つの関数はプログレス バーを実装するための補助関数であることに注意してください。
3.
を実行して、上記の 2 つの Jsp ファイルを JSP ディレクトリにコピーします。運用効果図は以下の通りです:
以上、皆様のお役に立てれば幸いです。
関連記事:
Ajaxを使用してパーセンテージ付きのプログレスバーの簡単な例を実装するAjaxが履歴の進む/戻る/更新をサポートしていない問題を解決する(グラフィックチュートリアル) 二次カプセル化jquery ajaxメソッドについて(コード付き)以上がAJAX を使用して Web ページにプログレスバーを実装する例を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。