Au cours de l'installation et du téléchargement des applications, l'utilisation des barres de progression est devenue très courante. La barre de progression peut être utilisée pour identifier la progression de l'achèvement du projet, peut être représentée par des pourcentages ou des nombres et peut être placée horizontalement. En utilisant la technologie Ajax pour créer des barres de progrès, la fonction devient plus puissante et plus rapide.
Créez maintenant une instance pour démontrer la mise en œuvre des barres de progression à l'aide de la technologie Ajax. Cette instance peut également être divisée en code client et code serveur.
1. Code de serveur
Le code du serveur implémente principalement une phrase d'informations sur la demande du client et renvoie le numéro de 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; // Remarque: plusieurs utilisateurs partageront cette variable, et cette barre de progrès ne convient que pour les utilisateurs uniques%> <% string task = request.getParameter ("tâche"); String res = ""; if (task.equals ("create")) {res = "1"; compteur = 1; } else {String% = ""; Switch (compteur) {cas 1:% = "10"; casser; Cas 2:% = "23"; casser; Cas 3:% = "35"; casser; Cas 4:% = "51"; casser; Cas 5:% = "64"; casser; Cas 6:% = "73"; casser; Cas 7:% = "89"; casser; Cas 8:% = "100"; casser; } compteur ++; res = "<%>" + pour cent + "</ pourcentage>"; } // printwriter out = réponse.getWriter (); réponse.setContentType ("Text / Xml"); Response.sethEader ("Cache-Control", "No-cache"); out.println ("<spect>"); out.println (res); out.println ("</pistens>"); out.close (); %>Enregistrez le code ci-dessus avec le nom ProgressBar.jsp. Dans ce fichier, un compteur variable est déclaré et attribué une valeur de 1, ce qui est la base de la barre de progression pour retourner un numéro de pourcentage. Ci-dessous, utilisez l'objet de demande pour obtenir la valeur de la tâche variable transmise par le client. Si la valeur est créée, cela signifie que la barre de progression doit être recréée et que la valeur de comptoir est définie sur 1; Si la tâche n'est pas créée, le numéro de pourcentage sera retourné en fonction de la valeur de comptoir et l'opération sera terminée et la valeur de comptoir sera ajoutée à 1.
2. Code client
Le code client de cet exemple implémente principalement l'état de la barre de progression en fonction du numéro de pourcentage de retour. Ouvrez le bloc-notes et entrez le code suivant:
<html> <éad- head> <tight> jsp + ajax progress bar </ title> <script type = "text / javascript"> var xmlhttp; var bar_color = 'bleu'; var span_id = "jaune"; var clear = "" function createExmlHttpRequest () {if (window.activexObject) {xmlhttp = new activeXObject ("Microsoft.xmlhttp"); } else if (window.xmlhttprequest) {xmlhttp = new xmlhttprequest (); }} fonction go () {createExmlHttpRequest (); checkDiv (); var url = "ProgressBarjsp.jsp? Task = Create"; xmlhttp.open ("get", url, true); xmlhttp.onreadystateChange = gocallback; xmlhttp.send (null); } fonction gocallback () {if (xmlhttp.readystate == 4) {if (xmlhttp.status == 200) {setTimeout ("PollServer ()", 2000); }}} fonction PollServer () {createExmlHttpRequest (); var url = "ProgressBarjsp.jsp? Task = Poll"; xmlhttp.open ("get", url, true); xmlhttp.onreadystateChange = PollCallback; xmlhttp.send (null); } fonction PollCallback () {if (xmlhttp.readystate == 4) {if (xmlhttp.status == 200) {var %_complete = xmlhttp.responsexml.getElementsByTagname ("pour cent") [0] .FirstChild.data; var index = processResult (%_complete); pour (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 = %_complete + "%"; }} if (index <9) {setTimeout ("PollServer ()", 2000); } else {document.getElementById ("complet"). innerhtml = "Le site Web a été chargé!"; }}}}} fonction processResult (%_complete) {var ind; if (%_complete.length == 1) {ind = 1; } else if (%_complete.length == 2) {ind = %_compte.substring (0, 1); } else {ind = 9; } return ind; } fonction checkDiv () {var progress_bar = document.getElementById ("ProgressBar"); if (progress_bar.style.visibilité == "Visible") {clearbar (); document.getElementById ("complet"). innerHtml = ""; } else {progress_bar.style.visibilité = "visible"}} fonction clearbar () {for (var i = 1; i <10; i ++) {var elem = document.getElementById ("block" + i); elem.innerhtml = clear; elem.style.backgroundcolor = "blanc"; }} </ script> </ head> <body onload = "go ();"> <h1 align = Center> Le site Web charge, veuillez patienter </h1> <p> <table align = "Center"> <Tbody> <tr> <Td> <div id = "Progressbar" style = "Padding: 2px; Border: Solid Yellow 2px; Visibilité: Hidden"> <pander id = "> <pank 2px; Visibilité: Visibilité: Hidden"> <Spank Id = "Spank 2px; Visibilité" id = "Block2"> </ span> <spann id = "block3"> </ span> <spann id = "block4"> </ span> <span id = "block5"> </ span> <span san = "block6"> </ span> <span id = "block7"> </ span> <spann id = "block8"> </span> <span ID = "Block9"> </ spann <tr> <td align = "Center" id = "complet"> </td> </tr> </tbody> </ table> </ body> </html>Enregistrez le code ci-dessus avec le nom jspprogressbar.html. Dans ce fichier, la fonction JavaScript CreateExmlHttpRequest () est principalement utilisée pour créer un objet XMLHTTPRequest. La fonction go () souhaite envoyer une demande asynchrone sur le serveur. La fonction est appelée lorsque la page Web est chargée. Sa fonction principale est d'informer le serveur et de commencer à exécuter la barre de progression du client. La fonction GOCALLBACK () est principalement utilisée pour traiter la réponse du serveur et appelle la fonction PollServer () toutes les 2 secondes. Il est également utilisé pour envoyer des demandes asynchrones au serveur, demandant principalement le pourcentage de la réponse du serveur. La fonction PollCallback () est principalement utilisée pour traiter les réponses côté serveur, c'est-à-dire pour spécifier l'état d'affichage de la barre de progression en fonction du numéro 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, et les trois autres fonctions sont des fonctions auxiliaires qui implémentent la barre de progression.
3. RUN
Copiez les deux fichiers JSP ci-dessus dans le répertoire JSP. Les rendus d'opération sont les suivants: