Configuration de la barre de progression AJAX

Question

Ok im new to AJAX. Type de savoir sur le cycle de vie d'une demande, IE utilise des trucs ActiveXObject comme ça.

Cependant maintenant je suis confronté à un problème du monde réel. J'ai une servlet en arrière-plan qui effectue un certain nombre de tâches et je voudrais afficher une barre de progression pour montrer où le processus est en place et aussi montrer que quelque chose se passe réellement. Jusqu'à présent, du côté serveur, je peux calculer le nombre de processus qui vont avoir lieu avant de commencer, et ajouter facilement un compteur à incrémenter après chaque processus, ce qui me permet de trouver le pourcentage que je souhaite afficher.

En termes d'où je devrais sortir les données rassemblées de l'incrémentation etc. je ne suis pas sûr jusqu'ici il est dormant en tant que 2 nombres entiers dans la classe de traitement Java.

Toute aide serait grandement appréciée. Jusqu'à présent, j'ai jeté un coup d'oeil à this et je suppose que c'est ce que je vise.

Cheers.

Answer 1

Fondamentalement, vous souhaitez stocker une référence à la tâche et, de manière inhérente, sa progression dans la session HTTP (ou dans le contexte Servlet s'il s'agit d'une tâche au niveau de l'application). De cette façon, vous devez être capable de récupérer des informations à ce sujet sur chaque requête HTTP.

En JavaScript, vous pouvez utiliser setTimeout() ou setInterval() pour exécuter une fonction après un certain délai ou à certains intervalles. Vous pouvez l'utiliser pour envoyer à plusieurs reprises des requêtes Ajax pour demander l'état actuel de la progression. Une fois le statut récupéré, par ex. dans la saveur d'un nombre entier avec une valeur maximale de 100 (le pourcentage), mettez juste à jour certaines div représentant une barre de progression et/ou le pourcentage de texte en conséquence dans l'arborescence DOM HTML.

jQuery est très utile pour déclencher des requêtes ajaxical et traverser/manipuler l'arborescence DOM HTML comme ça. Il minimise la verbosité du code et les problèmes de compatibilité avec les navigateurs croisés.

Imaginez que le doGet() du regard de servlet comme ceci:

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
    String processId = "longProcess_" + request.getParameter("processId"); 
    LongProcess longProcess = (LongProcess) request.getSession().getAttribute(processId); 
    int progress = longProcess.getProgress(); 

    response.setContentType("application/json"); 
    response.setCharacterEncoding("UTF-8"); 
    response.getWriter().write(String.valueOf(progress)); 
} 

Ensuite, vous pouvez l'utiliser comme suit:

function checkProgress() { 
    $.getJSON('progressServlet?processId=someid', function(progress) { 
     $('#progress').text(progress + "%"); 
     $('#progress .bar').width(progress); 

     if (parseInt(progress) < 100) { 
      setTimeout(checkProgress, 1000); // Checks again after one second. 
     } 
    }); 
}