Während der Installation und des Downloads von Anwendungen ist die Verwendung von Fortschrittsbalken sehr häufig geworden. Der Fortschrittsbalken kann verwendet werden, um den Abschlussschritt des Projekts zu identifizieren, durch Prozentsätze oder Zahlen dargestellt und horizontal platziert werden kann. Mithilfe der Ajax -Technologie, um Fortschrittsbalken zu erstellen, wird die Funktion leistungsfähiger und schneller.
Erstellen Sie nun eine Instanz, um die Implementierung von Fortschrittsbalken mithilfe der AJAX -Technologie zu demonstrieren. Diese Instanz kann auch in Client -Code und Servercode unterteilt werden.
1. Servercode
Der Servercode implementiert hauptsächlich einen Satz von Client -Anforderungsinformationen und gibt die entsprechende prozentuale Nummer zurück. Öffnen Sie Notepad und geben Sie den folgenden Code ein:
<%@ page contentType = "text/html; charSet = gb2312" Sprache = "java" import = "java.sql.*" Fehlerpage = ""%> <%! Int counter = 1; // Hinweis: Mehrere Benutzer teilen diese Variable und diese Fortschrittsleiste eignet sich nur für Einzelbenutzer%> <% String task = request.getParameter ("Task"); String res = ""; if (task.equals ("create")) {res = "1"; Zähler = 1; } else {string Prozent = ""; Switch (Zähler) {Fall 1: Prozent = "10"; brechen; Fall 2: Prozent = "23"; brechen; Fall 3: Prozent = "35"; brechen; Fall 4: Prozent = "51"; brechen; Fall 5: Prozent = "64"; brechen; Fall 6: Prozent = "73"; brechen; Fall 7: Prozent = "89"; brechen; Fall 8: Prozent = "100"; brechen; } counter ++; res = "<Prozent>" + Prozent + "</Prozent>"; } // printwriter out = response.getWriter (); response.setContentType ("text/xml"); response.setheader ("cache-control", "no-cache"); out.println ("<santwort>"); out.println (res); out.println ("</reaktion>"); out.close (); %>Speichern Sie den obigen Code mit dem Namen ProgressBar.jsp. In dieser Datei wird ein variabler Zähler deklariert und ein Wert von 1 zugewiesen, was die Grundlage für die Fortschrittsbalken darstellt, um eine prozentuale Zahl zurückzugeben. Verwenden Sie im Folgenden das Anforderungsobjekt, um den Wert der vom Client übertragenen variablen Aufgabe zu erhalten. Wenn der Wert erstellt wird, bedeutet dies, dass die Fortschrittsbalken neu erstellt werden müssen und der Zählerwert auf 1 festgelegt ist. Wenn die Aufgabe nicht erstellt wird, wird die prozentuale Zahl basierend auf dem Zählerwert zurückgegeben, und der Vorgang wird abgeschlossen und der Zählerwert wird zu 1 hinzugefügt.
2. Clientcode
Der Client -Code dieses Beispiels implementiert hauptsächlich den Status der Fortschrittsleiste basierend auf der Rückgabeprozentzahl. Öffnen Sie Notepad und geben Sie den folgenden Code ein:
<html> <kopf> <titels> JSP+AJAX Progress -Leiste </title> <script type = "text/javaScript"> var xmlhttp; var bar bar_color = 'blau'; var span_id = "gelb"; 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 = "progresorBarjsp.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 = "progresorBarjsp.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 prozent_complete = xmlhttp.responsexml.getElementsByTagname ("Prozent") [0] .Firstchild.data; var index = processResult (Prozent_Complete); für (var i = 1; i <= index; i ++) {var elem = document.getElementById ("block"+i); elem.innerhtml = klar; Elem.Style.backgroundColor = bar_color; var next_cell = i + 1; if (next_cell> index && next_cell <= 9) {document.getElementById ("block" + next_cell) .innerHtml = Prozent_Complete + "%"; }} if (index <9) {setTimeout ("PollServer ()", 2000); } else {document.getElementById ("komplett"). InnerHtml = "Die Website wurde geladen!"; }}}}} Funktion processResult (Prozent_Complete) {var ind; if (Prozent_complete.length == 1) {ind = 1; } else if (prozent_complete.length == 2) {ind = prozent_complete.substring (0, 1); } else {ind = 9; } return ind; } function checkDiv () {var progress_bar = document.getElementById ("ProgressBar"); if (progress_bar.style.visibility == "sichtbar") {clearBar (); document.getElementById ("complete"). innerhtml = ""; } else {progress_bar.style.visibility = "sichtbar"}} Funktion clearBar () {für (var i = 1; i <10; i ++) {var elem = document.getElementById ("block"+i); elem.innerhtml = klar; Elem.Style.backgroundColor = "White"; }} </script> </head> <body onload = "go ();"> <h1 align = center> Die Website lädt, bitte warte </h1> <p> <table align = "center"> <tbody> <tr> <tr> <td> <div id = "progreshbar" style = "padding: 2px; 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>Speichern Sie den obigen Code mit dem Namen jspprogressBar.html. In dieser Datei wird die JavaScript -Funktion createxmlhttprequest () hauptsächlich zum Erstellen von XMLHTTPrequest -Objekt verwendet. Die Funktion Go () möchte eine asynchrone Anforderung auf den Server senden. Die Funktion wird aufgerufen, wenn die Webseite geladen wird. Die Hauptfunktion besteht darin, den Server zu benachrichtigen und die Fortschrittsleiste im Client auszuführen. Die Funktion gocallback () wird hauptsächlich zur Verarbeitung der Reaktion des Servers verwendet und ruft alle 2 Sekunden die Funktion PollServer () auf. Es wird auch verwendet, um asynchrone Anforderungen an den Server zu senden, wobei hauptsächlich den Prozentsatz der Antwort des Servers angefordert wird. Die Funktion PollCallback () wird hauptsächlich zur Verarbeitung von serverseitigen Antworten verwendet, dh zum Angeben des Anzeigestatus der Fortschrittsleiste basierend auf der von der Server-Seite zurückgegebenen Nummer. Es ist hier zu beachten, dass die Funktion gocallback () nur einmal ausgeführt wird, während die Funktion PollCallback () mehrmals ausgeführt werden kann und die anderen drei Funktionen Hilfsfunktionen sind, die die Fortschrittsleiste implementieren.
3. Run
Kopieren Sie die beiden oben genannten JSP -Dateien in das JSP -Verzeichnis. Die Operationsrenderungen sind wie folgt: