Teilen Sie Beispiele für die Verwendung von AJAX zur Implementierung von Fortschrittsbalken auf Webseiten

Teilen Sie Beispiele für die Verwendung von AJAX zur Implementierung von Fortschrittsbalken auf Webseiten_Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 15:01:44

Original

2006 Leute haben es durchsucht

Während des Installations- und Downloadvorgangs von Anwendungen ist die Verwendung von Fortschrittsbalken weit verbreitet. Der Fortschrittsbalken kann verwendet werden, um den Abschlussfortschritt des Projekts anzuzeigen. Er kann als Prozentsatz oder als Zahl ausgedrückt und horizontal platziert werden. Verwenden Sie die Ajax-Technologie, um einen Fortschrittsbalken zu erstellen, der die Funktion leistungsfähiger und schneller macht.
Erstellen Sie nun ein Beispiel, um die Verwendung der Ajax-Technologie zur Implementierung eines Fortschrittsbalkens zu demonstrieren. Dieses Beispiel kann auch in Clientcode und Servercode unterteilt werden.

1, Servercode
Der Servercode implementiert hauptsächlich die Anforderungsinformationen eines Clients und gibt die entsprechende Prozentzahl zurück. Öffnen Sie Notepad und geben Sie den folgenden Code ein:

<%@ 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();  
%>

Nach dem Login kopieren

Speichern Sie den obigen Code als ProgressBar.jsp. In dieser Datei wird eine Variable counter deklariert und ihr wird der Wert 1 zugewiesen. Diese Variable ist die Grundlage für die vom Fortschrittsbalken zurückgegebene Prozentzahl. Verwenden Sie das unten stehende Anforderungsobjekt, um den Wert der vom Client gesendeten Variablenaufgabe zu erhalten. Wenn der Wert erstellt ist, bedeutet dies, dass der Fortschrittsbalken neu erstellt werden muss und der Wert des Zählers auf 1 gesetzt wird Wenn keine Erstellung erfolgt, wird der Prozentsatz basierend auf dem Wert des Zählers Number zurückgegeben. Nach Abschluss eines Vorgangs wird der Zählerwert um 1 erhöht.

2, Kundencode
Der Client-Code dieses Beispiels zeigt hauptsächlich den Status des Fortschrittsbalkens basierend auf der zurückgegebenen Prozentzahl an. Öffnen Sie Notepad und geben Sie den folgenden Code ein:

<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(); 
   checkDiv(); 
   var url = "ProgressBarJsp.jsp&#63;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&#63;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 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>网站正在加载中，请稍候</h1> 
 
 <p> 
 <table align="center"> 
  <tbody> 
   <tr><td> 
    <div 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> 
    </div> 
   </td></tr> 
   <tr><td align="center" id="complete"></td></tr> 
  </tbody> 
 </table> 
 </body> 
</html>

Nach dem Login kopieren

Speichern Sie den obigen Code als JspprogressBar.html. In dieser Datei wird die JavaScript-Funktion createXMLHttpRequest() hauptsächlich zum Erstellen eines XMLHttpRequest-Objekts verwendet. Die Funktion go() schließt das Senden einer asynchronen Anfrage an den Server ab. Ihre Hauptfunktion besteht darin, zu benachrichtigen Starten Sie den Server und starten Sie den Fortschrittsbalken. Die Funktion GoCallback() wird hauptsächlich zum Verarbeiten der Serverantwort verwendet, und die Funktion pollServer() wird alle 2 Sekunden aufgerufen. Sie wird auch zum Senden asynchroner Anforderungen an den Server verwendet, wobei hauptsächlich der Prozentsatz der Serverantwort abgefragt wird. Die Funktion PollCallback () wird hauptsächlich zum Verarbeiten der serverseitigen Antwort verwendet, dh zum Angeben des Anzeigestatus des Fortschrittsbalkens basierend auf der vom Server zurückgegebenen Zahl. Dabei ist zu beachten, dass die Funktion goCallback() nur einmal ausgeführt wird, während die Funktion PollCallback() mehrfach ausgeführt werden kann. Die restlichen drei Funktionen sind Hilfsfunktionen zur Implementierung des Fortschrittsbalkens.

3, führen Sie
aus Kopieren Sie die beiden oben genannten JSP-Dateien in das JSP-Verzeichnis. Das Betriebseffektdiagramm lautet wie folgt:

201656165706542.jpg (518×153)