最近のプロジェクトには、CVS ファイルをアップロードし、ファイルを解析してデータベースに書き込むアップロード機能がありました。多くの場合、大きなファイルをアップロードする必要があるため、この機能を完了するまでに 40 分かかります。プロセス、ページにもプロンプトがなく、ユーザー エクスペリエンスが非常に悪いですか?
ajax を使用してプログレスバーを作成してみてはいかがでしょうか?
この要件は次の 2 つの手順で完了します。
1: 単純な ajax を作成して、最も単純なプログレス バー関数を実装します。
2: この進行状況バーを、プロジェクトで使用できる進行状況バーに変換します。
1: 最も単純なプログレスバー
1.クライアントは、createXMLHttpRequest リクエストを 2 秒ごとにサーバーに送信し、サーバーから返された進行状況データを取得します。サーバーから返されたデータに基づいて、JavaScript を使用してテーブルの幅を更新します。
これは進行状況バーをシミュレートします。
progressBar.html。内容は次のとおりです:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<頭>
<title>Ajax プログレスバー</title>
<script type="text/javascript">...
var xmlHttp;
var キー;
関数 createXMLHttpRequest() ...{
if (window.ActiveXObject) ...{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) ...{
xmlHttp = 新しい XMLHttpRequest();
}
関数
go() ...{
createXMLHttpRequest();
クリアバー();
var url = "ProgressBarServlet?task=create";
var button = document.getElementById("go");
button.disabled = true;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = goCallback;
xmlHttp.send(null);
関数
goCallback() ...{
if (xmlHttp.readyState == 4) ...{
if (xmlHttp.status == 200) ...{
setTimeout("pollServer()", 2000);
}
}
}
関数pollServer() ...{
createXMLHttpRequest();
var url = "ProgressBarServlet?task=poll&key=" + key;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange =pollCallback;
xmlHttp.send(null);
}
関数pollCallback() ...{
if (xmlHttp.readyState == 4) ...{
if (xmlHttp.status == 200) ...{
varpercent_complete = xmlHttp.responseXML.getElementsByTagName("パーセント")[0].firstChild.data;
var progress = document.getElementById("progress");
var progressPersent = document.getElementById("progressPersent");
progress.width = パーセント完了 + "%";
progressPersent.innerHTML = パーセント_コンプリート + "%";
if (percent_complete < 100) ...{
setTimeout("pollServer()", 2000);
} それ以外 ...{
document.getElementById("complete").innerHTML = "完了!";
//document.getElementById("go").disabled = false;
}
}
}
}
関数クリアバー() ...{
var progress_bar = document.getElementById("progressBar");
var progressPersent = document.getElementById("progressPersent");
var complete = document.getElementById("complete");
progress_bar.style.visibility = "可視"
progressPersent.innerHTML = " ";
complete.innerHTML = "このファイルのアップロードを開始します...";
}
</script>
</head>
<本文>
<div id="progressBar" style="padding:0px;border:solid black 0px;visibility:hidden">
<table width="300" border="0" cellpacing="0" cellpadding="0" align="center">
<tr>
<td align="center" id="progressPersent">86%</td>
</tr>
<tr>
<td>
<table width="100%" border="1" cellpacing="0" cellpadding="0" bordercolor="#000000">
<tr>
<td>
<table width="1%" border="0" cellpacing="0" cellpadding="0" bgcolor="#FF0000" id="progress">
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</テーブル>
</td>
</tr>
<tr>
<td align="center" id="complete">完了</td>
</tr>
</テーブル>
</div>
<input id = "go" name="run" type="button" value="run" onClick="go();">
</body>
</html>
2: シミュレートされたサーブレット: ProgressBarServlet1。 javaの場合、内容は次のとおりです。
パッケージ com.cyberobject.lcl.ajax;
インポート java.io.*
;
インポート javax.servlet.http.*
;
*
* @著者ネイト
* @バージョン
*/
public class ProgressBarServlet extends HttpServlet {
プライベート int カウンタ = 1;
/** HTTP <code>GET</code> メソッドを処理します。
* @param リクエストサーブレットリクエスト
* @param 応答 サーブレット応答
*/
protected void doGet(HttpServletRequest リクエスト、HttpServletResponse レスポンス)
ServletException、IOExceptionをスローします{
文字列タスク = request.getParameter("タスク");
文字列 res = "";
if (task.equals("create")) {
res = "<key>1</key>";
カウンタ = 1;
}
それ以外 {
文字列パーセント = "";
スイッチ（カウンター）{
ケース 1: パーセント = "10";
ケース 2: パーセント = "23";
ケース 3: パーセント = "35";
ケース 4: パーセント = "51";
ケース 5: パーセント = "64";
ケース 6: パーセント = "73";
ケース 7: パーセント = "89";
ケース 8: パーセント = "100";
}
カウンタ++;
res = "<パーセント>" + パーセント + "</パーセント>";
}
PrintWriter 出力 = response.getWriter();
response.setContentType("テキスト/xml");
response.setHeader("キャッシュ制御", "キャッシュなし");
out.println("<応答>");
out.println(res);
out.println("</response>");
out.close();
}
/** HTTP <code>POST</code> メソッドを処理します。
* @param リクエストサーブレットリクエスト
* @param 応答 サーブレット応答
*/
protected void doPost(HttpServletRequest リクエスト、HttpServletResponse レスポンス)
ServletException、IOExceptionをスローします{
doGet(リクエスト, レスポンス);
}
/** サーブレットの短い説明を返します。
*/
public String getServletInfo() {
"簡単な説明" を返します。
}
}
3: ウェブ上で。 XML でサーブレット マッピングを構成します。
<!-- アクション サーブレット マッピング -->
<サーブレット>
<サーブレット名>ProgressBarServlet</サーブレット名>
<表示名>ProgressBarServlet</表示名>
<サーブレットクラス>com.cyberobject.lcl.ajax.ProgressBarServlet</サーブレットクラス>
</servlet>
<サーブレットマッピング>
<サーブレット名>ProgressBarServlet</サーブレット名>
<url-pattern>/ProgressBarServlet</url-pattern>
</サーブレットマッピング>
この時点で、進行状況バーを実行する準備ができています。次のステップは、それをシステムに移植することです。
二：
1: データベースを書き込むクラス DbOperator に、progress 属性を追加します
private int progress;
2: データベースを書き込むクラスに getProgress() メソッドを追加します。
public int getProgress()
{
進行状況を返します。
}
3: ライブラリを作成する for ループ内で、progress++;
4: DbOperater を呼び出すサーブレットで DbOperater の getProgress() メソッドを呼び出し、進行状況バーにリアルタイム データを提供します。
5: さらに: サーブレットの doGet() は進行状況データの取得に使用され、doPost() はファイルのアップロードとライブラリ操作の作成に使用されます。相互の役割分担は明確です。
これはアーカイブされています。