Dans un projet récent, il existait une fonction de téléchargement : télécharger un fichier CVS, puis analyser le fichier et l'écrire dans la base de données. Étant donné que les fichiers volumineux doivent souvent être téléchargés, les clients mettent souvent 40 minutes pour effectuer cette fonction. processus, la page également Il n'y a pas d'invite et l'expérience utilisateur est très mauvaise ?
Pourquoi ne pas utiliser ajax pour créer une barre de progression ?
Remplissez cette exigence en deux étapes :
Un : écrivez un simple ajax pour implémenter la fonction de barre de progression la plus simple.
Deux : Transformez cette barre de progression en une barre de progression disponible pour le projet.
1 : La barre de progression la plus simple
1. Le client envoie une requête createXMLHttpRequest au serveur toutes les 2 secondes et obtient les données de progression renvoyées par le serveur. En fonction des données renvoyées par le serveur, utilisez javascript pour mettre à jour la largeur d'une table.
Cela simule une barre de progression.
progressBar.html.Le contenu est le suivant :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<tête>
<title>Barre de progression Ajax</title>
<script type="text/javascript">...
var xmlHttp;
clé var ;
fonction createXMLHttpRequest() ...{
si (window.ActiveXObject) ...{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
sinon si (window.XMLHttpRequest) ...{
xmlHttp = nouveau XMLHttpRequest();
}
}
fonction go() ...{
createXMLHttpRequest();
clearBar();
var url = "ProgressBarServlet?task=create";
var bouton = document.getElementById("go");
bouton.disabled = true ;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = goCallback ;
xmlHttp.send(null);
}
fonction goCallback() ...{
si (xmlHttp.readyState == 4) ...{
si (xmlHttp.status == 200) ...{
setTimeout("pollServer()", 2000);
}
}
}
fonction pollServer() ...{
createXMLHttpRequest();
var url = "ProgressBarServlet?task=poll&key=" + clé ;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = pollCallback ;
xmlHttp.send(null);
}
fonction pollCallback() ...{
si (xmlHttp.readyState == 4) ...{
si (xmlHttp.status == 200) ...{
var percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data;
var progress = document.getElementById("progress");
var progressPersent = document.getElementById("progressPersent");
progress.width = percent_complete + "%" ;
progressPersent.innerHTML = percent_complete + "%";
si (percent_complete < 100) ...{
setTimeout("pollServer()", 2000);
} autre ...{
document.getElementById("complete").innerHTML = "Complet!";
//document.getElementById("go").disabled = false;
}
}
}
}
fonction clearBar() ...{
var progress_bar = document.getElementById("progressBar");
var progressPersent = document.getElementById("progressPersent");
var complete = document.getElementById("complete");
progress_bar.style.visibility = "visible"
progressPersent.innerHTML = " ";
complete.innerHTML = "Commencer à télécharger ce fichier...";
}
</script>
</tête>
<corps>
<div id="progressBar" style="padding:0px;border:solid black 0px;visibility:hidden">
<table width="300" border="0" Cellpacing="0" cellpadding="0" align="center">
<tr>
<td align="center" id="progressPersent">86 %</td>
</tr>
<tr>
<td>
<table width="100%" border="1" Cellpacing="0" cellpadding="0" bordercolor="#000000">
<tr>
<td>
<table width="1%" border="0" Cellpacing="0" cellpadding="0" bgcolor="#FF0000" id="progress">
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" id="complete">terminé</td>
</tr>
</table>
</div>
<input id = "go" name="run" type="button" value="run" onClick="go();">
</body>
</html>
2 : Une servlet simulée : ProgressBarServlet1. java, le contenu est le suivant :
package com.cyberobject.lcl.ajax ;
importer java.io.* ;
importer javax.servlet.* ;
importer javax.servlet.http.*
/**
*
* @auteur Nate
* @version
*/
la classe publique ProgressBarServlet étend HttpServlet {
compteur int privé = 1 ;
/** Gère la méthode HTTP <code>GET</code>.
* @param demande une demande de servlet
* Réponse du servlet @param
*/
protected void doGet (demande HttpServletRequest, réponse HttpServletResponse)
lance ServletException, IOException {
Chaîne task = request.getParameter("task");
Chaîne res = "" ;
if (task.equals("create")) {
res = "<clé>1</clé>";
compteur = 1 ;
}
autre {
Chaîne pour cent = "" ;
interrupteur (compteur) {
cas 1 : pourcentage = "10" ; pause ;
cas 2 : pourcentage = "23" ;
cas 3 : pourcentage = "35" ;
cas 4 : pourcentage = « 51 » ;
cas 5 : pourcentage = "64" ;
cas 6 : pourcentage = "73" ;
cas 7 : pourcentage = « 89 » ;
cas 8 : pourcentage = « 100 » ;
}
compteur++;
res = "<pourcentage>" + pourcent + "</pourcentage>";
}
PrintWriter out = réponse.getWriter();
réponse.setContentType("text/xml");
réponse.setHeader("Cache-Control", "no-cache");
out.println("<réponse>");
out.println(res);
out.println("</response>");
out.close();
}
/** Gère la méthode HTTP <code>POST</code>.
* @param demande une demande de servlet
* Réponse du servlet @param
*/
protected void doPost (demande HttpServletRequest, réponse HttpServletResponse)
lance ServletException, IOException {
doGet(demande, réponse);
}
/** Renvoie une brève description du servlet.
*/
chaîne publique getServletInfo() {
renvoyer « Brève description » ;
}
}
3 : Sur le Web. Configurez le mappage du servlet en XML :
<!-- Mappage des servlets d'actions -->
<servlet>
<servlet-name>ProgressBarServlet</servlet-name>
<display-name>ProgressBarServlet</display-name>
<servlet-class>com.cyberobject.lcl.ajax.ProgressBarServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ProgressBarServlet</servlet-name>
<url-pattern>/ProgressBarServlet</url-pattern>
</servlet-mapping>
À ce stade, la barre de progression est prête à fonctionner. La prochaine étape consiste à le porter sur notre système.
deux:
1 : Dans la classe DbOperater qui écrit la base de données, ajoutez un attribut progress
private int progress;
2 : Dans la classe qui écrit la base de données, ajoutez une méthode getProgress() :
public int getProgress()
{
retourner les progrès ;
}
3 : Dans la boucle for d’écriture de la bibliothèque, progress++;
4 : Appelez la méthode getProgress() de DbOperater dans le servlet qui appelle DbOperater, fournissant ainsi des données en temps réel pour la barre de progression.
5 : De plus : doGet() du servlet est utilisé pour obtenir des données de progression, et doPost() est utilisé pour télécharger des fichiers et écrire des opérations de bibliothèque. La division du travail entre eux est claire.
Ceci est archivé.