Teilen Sie Beispiele für die Verwendung von AJAX zum Implementieren von Fortschrittsbalken auf Webseiten-js-Tutorial-php.cn

Teilen Sie Beispiele für die Verwendung von AJAX zum Implementieren von Fortschrittsbalken auf Webseiten

亚连

Freigeben： 2018-05-22 10:53:06

Original

1811 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich das Teilen von Beispielen für die Verwendung von AJAX zur Realisierung des Fortschrittsbalkens von Webseiten vorgestellt. Es ist eine beliebte Praxis, die Asynchronität von AJAX zu nutzen, um den Verarbeitungsfortschritt auf der Serverseite anzuzeigen dazu

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 Prozentzahl, die vom Fortschrittsbalken zurückgegeben wird. Verwenden Sie das unten stehende Anforderungsobjekt, um den Wert der vom Client gesendeten Variablenaufgabe abzurufen. 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, Client-Code
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 = &#39;blue&#39;; 
  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>

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 Antwort des Servers 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. Hierbei 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, um die beiden oben genannten JSP-Dateien in das JSP-Verzeichnis zu kopieren. Das Betriebseffektdiagramm lautet wie folgt:

201656165706542.jpg (518×153)

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Verwenden von Ajax, um ein einfaches Beispiel eines Fortschrittsbalkens mit einem Prozentsatz zu implementieren

Lösen Sie das Problem dass Ajax das Problem der Weiterleitung durch den Verlauf/Zurück/Aktualisierung nicht unterstützt (grafisches Tutorial)

Informationen zur sekundären Kapselung der JQuery-Ajax-Methode (mit Code)

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele für die Verwendung von AJAX zum Implementieren von Fortschrittsbalken auf Webseiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!