Ce n'est pas une chose très gênante de réaliser l'affichage de la barre de progression sans actualisation de la page dans la page Web, mais si la barre de progression peut refléter avec précision la transaction en cours ou la progression de l'exécution d'une logique complexe, alors ce n'est pas une tâche facile. Technologie AJAX Populaire, l'auteur de cet article essaie donc d'utiliser AJAX pour réaliser la barre de progression précise de la page Web afin d'attirer les lecteurs.
Tout d'abord, vous devez réfléchir à un problème : si les transactions complexes ou la logique métier ne sont pas exécutées de manière threadée, il est impossible d'ignorer les transactions complexes pour traiter l'affichage de la progression lors de l'exécution en JAVA. penser à utiliser le multi-threading pour des transactions complexes ou pour accomplir une logique métier.
En pensant à une autre question, le traitement des transactions devrait nécessiter une série d'informations sur les paramètres sur la page Web, alors comment obtenir ces paramètres Cela semble facile à imaginer, il suffit de passer une HttpServletRequest ?
Afin de partager la barre de progression, tous les traitements de transactions complexes doivent implémenter la même interface ou classe abstraite. J'ai utilisé une interface ici, comme suit :
interface publique IprogressBar {
public void perform(HttpServletRequest req,String pbid);//Exécuter des transactions complexes
}
Utilisez une classe abstraite pour implémenter le multithreading, comme suit :
la classe abstraite publique AbstractProgressBar étend TimerTask implémente IprogressBar {
requête privée HttpServletRequest ;
chaîne privée pbid ;
public AbstractProgressBar(){
}
//Les sous-classes doivent remplacer cette fonction
public abstract void perform (HttpServletRequest req, String pbid);
public void run() {
exécuter (requête, pbid);
}
public void setRequest (requête HttpServletRequest) {
this.request=req;
}
public void setPbid(String pbid){
this.pbid=pbid;
}
}
Il n'est pas pratique de fournir le code pour un projet spécifique. Ici, j'ai écrit une autre classe de test, qui est une classe qui effectue un traitement de transactions complexes, comme suit :
la classe publique TestPB étend AbstractProgressBar{
public void perform (HttpServletRequest req, String pbid) {
String sql="insérer dans temp_table(idx)values(?)";
int pid=Integer.parseInt(pbid);
ProgressBar pb=nouveau ProgressBar(pid,300,0,1);
//Simuler des transactions volumineuses
pour(int i=0;i<300;i++){
DbUtils.executeUpdate(sql,new Object[]{new Integer(i)});
//Contrôle de la progression
pb.stepIt();
}
}
}
Utilisez ensuite la technologie AJAX pour réaliser la barre de progression sans rafraîchissement de la page web. Le code est le suivant :
<%@ page contentType="text/html;charset=UTF-8"%>
<title>Aucun test de la barre de progression de la page d'actualisation</title>
<TYPE DE STYLE="texte/css">
<!--
CORPS {OVERFLOW : scroll ;OVERFLOW-X :masqué}
.DEK {POSITION : absolue ; VISIBILITÉ : cachée ; Z-INDEX : 200 ;}
//-->
</STYLE>
<script type="text/javascript">
var xmlHttp;
var pbid;//ID de la barre de progression
fonction createXMLHttpRequest(){
si (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
sinon si (window.XMLHttpRequest) {
xmlHttp = nouveau XMLHttpRequest();
}
}
fonction checkDiv() {
var progress_bar = document.getElementById("progressBar");
if (progress_bar.style.visibility != "visible") {
progress_bar.style.visibility = "visible";
}autre
{
progress_bar.style.visibility = "caché" ;
}
}
fonction aller() {
createXMLHttpRequest();
checkDiv();
var url = "../servlet/ProgressBarServlet?task=create&impcls=blogcn.pb.imp.TestPB";//où blogcn.pb.imp.TestPB est la classe d'implémentation des transactions complexes
var bouton = document.getElementById("go");
bouton.disabled = true ;
xmlHttp.open("GET", url, true);
xmlHttp.setRequestHeader("Content-Type", "text/xml;charset=gb2312");
xmlHttp.onreadystatechange = goCallback ;
xmlHttp.send(null);
}
fonction goCallback(){
si (xmlHttp.readyState==4)
{
si (xmlHttp.status==200) {
pbid=xmlHttp.responseXML.getElementsByTagName("pbid")[0].firstChild.data;
setTimeout("pollServer()", 2000);
}
}
}
fonction pollServer() {
createXMLHttpRequest();
var url = "../servlet/ProgressBarServlet?task=poll&pbid="+pbid;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = pollCallback ;
xmlHttp.send(null);
}
fonction pollCallback(){
si (xmlHttp.readyState == 4) {
si (xmlHttp.status == 200) {
var pourcentage_complet =
xmlHttp.responseXML
.getElementsByTagName("pourcent")[0].firstChild.data;
si (percent_complete < 100) {
PB1.pos=percent_complete;
PB1.Update();
setTimeout("pollServer()", 2000);
} autre {
PB1.pos=100 ;
PB1.Update();
document.getElementById("go").disabled = false;
}
}
}
}
<input type="button" value="Exécuter des transactions volumineuses" id="go" onclick="go();"/>
<DIV id="progressBar">
<langage de script="javascript">
var PB1=nouveau TProgressBar("monPB1",220,180,375,20);
PB1.Create();
PirateCount=100 ;
PID=PirateCount-2 ;
PB1.Reposition();
PB1.max=PID ;