Maison > Article > interface Web > Partager des exemples d'utilisation d'AJAX pour implémenter des barres de progression sur des pages Web

Partager des exemples d'utilisation d'AJAX pour implémenter des barres de progression sur des pages Web

亚连original: 2018-05-22 10:53:061752parcourir

Cet article présente principalement le partage d'exemples d'utilisation d'AJAX pour implémenter des barres de progression sur les pages Web. Il est courant d'utiliser AJAX de manière asynchrone pour afficher la progression du traitement côté serveur. Les amis qui en ont besoin peuvent s'y référer. 🎜>

Lors du processus d'installation et de téléchargement des applications, l'utilisation de barres de progression est devenue très courante. La barre de progression peut être utilisée pour indiquer l'avancement du projet. Elle peut être exprimée en pourcentage ou en nombre et peut être placée horizontalement. Utilisez la technologie Ajax pour créer une barre de progression, ce qui rend la fonction plus puissante et plus rapide.

Créez maintenant un exemple pour démontrer l'utilisation de la technologie Ajax pour implémenter une barre de progression. Cet exemple peut également être divisé en code client et code serveur.

1. Code du serveur
Le code du serveur implémente principalement les informations de demande d'un client et renvoie le pourcentage correspondant. Ouvrez le Bloc-notes et entrez le code suivant :

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

Enregistrez le code ci-dessus sous ProgressBar.jsp. Dans ce fichier, un compteur de variable est déclaré et reçoit la valeur 1. Cette variable constitue la base du pourcentage renvoyé par la barre de progression. Utilisez l'objet de requête ci-dessous pour obtenir la valeur de la tâche variable envoyée par le client. Si la valeur est créée, cela signifie que la barre de progression doit être recréée et la valeur du compteur est définie sur 1 si la tâche est créée. pas créé, le pourcentage sera renvoyé en fonction de la valeur du compteur, après avoir terminé une opération, la valeur du compteur est augmentée de 1.

2, code client
Le code client de cet exemple affiche principalement l'état de la barre de progression en fonction du pourcentage renvoyé. Ouvrez le Bloc-notes et entrez le code suivant :

<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>

Enregistrez le code ci-dessus sous JspprogressBar.html. Dans ce fichier, la fonction JavaScript createXMLHttpRequest() est principalement utilisée pour créer un objet XMLHttpRequest. La fonction go() termine l'envoi d'une requête asynchrone au serveur. Cette fonction est appelée lors du chargement de la page web. le serveur et démarrez sur le client. Exécutez la barre de progression. La fonction GoCallback() est principalement utilisée pour traiter la réponse du serveur, et la fonction pollServer() est appelée toutes les 2 secondes. Elle est également utilisée pour envoyer des requêtes asynchrones au serveur, demandant principalement le pourcentage de la réponse du serveur. La fonction PollCallback() est principalement utilisée pour traiter la réponse côté serveur, c'est-à-dire pour spécifier l'état d'affichage de la barre de progression en fonction du nombre renvoyé par le côté serveur. Il convient de noter ici que la fonction goCallback() n'est exécutée qu'une seule fois, tandis que la fonction PollCallback() peut être exécutée plusieurs fois. Les trois fonctions restantes sont des fonctions auxiliaires pour implémenter la barre de progression.

3. Exécutez
pour copier les deux fichiers Jsp ci-dessus dans le répertoire JSP. Le diagramme des effets de fonctionnement est le suivant :

201656165706542.jpg (518×153)

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles Liés

Voir plus