In einem aktuellen Projekt gab es eine Upload-Funktion: Laden Sie eine CVS-Datei hoch, analysieren Sie die Datei und schreiben Sie sie in die Datenbank. Da oft große Dateien hochgeladen werden müssen, dauert es oft 40 Minuten, bis Kunden diese Funktion abgeschlossen haben Prozess, die Seite auch Es gibt keine Eingabeaufforderung und die Benutzererfahrung ist sehr schlecht?
Warum nicht Ajax verwenden, um einen Fortschrittsbalken zu erstellen?
Erfüllen Sie diese Anforderung in zwei Schritten:
Erstens: Schreiben Sie einen einfachen Ajax, um die einfachste Fortschrittsbalkenfunktion zu implementieren.
Zweitens: Wandeln Sie diesen Fortschrittsbalken in einen für das Projekt verfügbaren Fortschrittsbalken um.
1: Der einfachste Fortschrittsbalken
1. Der Client sendet alle 2 Sekunden eine createXMLHttpRequest-Anfrage an den Server und ruft die vom Server zurückgegebenen Fortschrittsdaten ab. Verwenden Sie Javascript, um die Breite einer Tabelle basierend auf den vom Server zurückgegebenen Daten zu aktualisieren.
Dies simuliert einen Fortschrittsbalken.
progressBar.html.Der Inhalt lautet wie folgt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<Kopf>
<title>Ajax-Fortschrittsbalken</title>
<script type="text/javascript">...
var xmlHttp;
Var-Schlüssel;
Funktion createXMLHttpRequest() ...{
if (window.ActiveXObject) ...{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) ...{
xmlHttp = new XMLHttpRequest();
}
}
Funktion go() ...{
createXMLHttpRequest();
clearBar();
var url = "ProgressBarServlet?task=create";
var button = document.getElementById("go");
button.disabled = true;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = goCallback;
xmlHttp.send(null);
}
Funktion goCallback() ...{
if (xmlHttp.readyState == 4) ...{
if (xmlHttp.status == 200) ...{
setTimeout("pollServer()", 2000);
}
}
}
Funktion pollServer() ...{
createXMLHttpRequest();
var url = "ProgressBarServlet?task=poll&key=" + key;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = pollCallback;
xmlHttp.send(null);
}
Funktion pollCallback() ...{
if (xmlHttp.readyState == 4) ...{
if (xmlHttp.status == 200) ...{
var percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data;
var progress = document.getElementById("progress");
var progressPersent = document.getElementById("progressPersent");
progress.width = prozent_vollständig + „%“;
progressPersent.innerHTML = prozent_vollständig + „%“;
if (percent_complete < 100) ...{
setTimeout("pollServer()", 2000);
} anders ...{
document.getElementById("complete").innerHTML = "Complete!";
//document.getElementById("go").disabled = false;
}
}
}
}
Funktion clearBar() ...{
var progress_bar = document.getElementById("progressBar");
var progressPersent = document.getElementById("progressPersent");
var complete = document.getElementById("complete");
progress_bar.style.visibility = "sichtbar"
progressPersent.innerHTML = " ";
Complete.innerHTML = „Beginnen Sie mit dem Hochladen dieser Datei …“;
}
</script>
</head>
<Körper>
<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>
</table>
</td>
</tr>
<tr>
<td align="center" id="complete">abgeschlossen</td>
</tr>
</table>
</div>
<input id = "go" name="run" type="button" value="run" onClick="go();">
</body>
</html>
2: Ein simuliertes Servlet: ProgressBarServlet1. Java, der Inhalt ist wie folgt:
package com.cyberobject.lcl.ajax;
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*
/**;
*
* @Autor Nate
* @version
*/
öffentliche Klasse ProgressBarServlet erweitert HttpServlet {
privater int-Zähler = 1;
/** Behandelt die HTTP-Methode <code>GET</code>.
* @param-Anfrage-Servlet-Anfrage
* @param Antwort-Servlet-Antwort
*/
protected void doGet(HttpServletRequest-Anfrage, HttpServletResponse-Antwort)
wirft ServletException, IOException {
String task = request.getParameter("task");
String res = "";
if (task.equals("create")) {
res = "<key>1</key>";
Zähler = 1;
}
anders {
String-Prozent = "";
Schalter (Zähler) {
Fall 1: Prozent = „10“;
Fall 2: Prozent = „23“;
Fall 3: Prozent = „35“;
Fall 4: Prozent = „51“;
Fall 5: Prozent = „64“;
Fall 6: Prozent = „73“;
Fall 7: Prozent = „89“;
Fall 8: Prozent = „100“;
}
counter++;
res = "<percent>" + Prozent + "</percent>";
}
PrintWriter out = Response.getWriter();
Response.setContentType("text/xml");
Response.setHeader("Cache-Control", "no-cache");
out.println("<Antwort>");
out.println(res);
out.println("</response>");
out.close();
}
/** Behandelt die HTTP-Methode <code>POST</code>.
* @param-Anfrage-Servlet-Anfrage
* @param Antwort-Servlet-Antwort
*/
protected void doPost(HttpServletRequest-Anfrage, HttpServletResponse-Antwort)
wirft ServletException, IOException {
doGet(Anfrage, Antwort);
}
/** Gibt eine kurze Beschreibung des Servlets zurück.
*/
öffentlicher String getServletInfo() {
return „Kurzbeschreibung“;
}
}
3: Im Internet. Konfigurieren Sie die Servlet-Zuordnung in XML:
<!-- Action Servlet Mapping -->
<Servlet>
<servlet-name>ProgressBarServlet</servlet-name>
<display-name>ProgressBarServlet</display-name>
<servlet-class>com.cyberobject.lcl.ajax.ProgressBarServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ProgressBarServlet</servlet-name>
<url-pattern>/ProgressBarServlet</url-pattern>
</servlet-mapping>
An diesem Punkt ist der Fortschrittsbalken betriebsbereit. Der nächste Schritt besteht darin, es auf unser System zu portieren.
zwei:
1: Fügen Sie in der Klasse DbOperater, die die Datenbank schreibt, ein Fortschrittsattribut hinzu
private int progress
2: Fügen Sie in der Klasse, die die Datenbank schreibt, eine getProgress()-Methode hinzu:
public int getProgress()
{
Rückkehrfortschritt;
}
3: In der for-Schleife beim Schreiben der Bibliothek progress++;
4: Rufen Sie die getProgress()-Methode des DbOperater im Servlet auf, das den DbOperater aufruft, und stellen Sie so Echtzeitdaten für den Fortschrittsbalken bereit.
5: Darüber hinaus wird doGet () des Servlets zum Abrufen von Fortschrittsdaten und doPost () zum Hochladen von Dateien und Schreiben von Bibliotheksoperationen verwendet. Die Arbeitsteilung untereinander ist klar.
Dies ist archiviert.