Discussion :

[verbose]

Bonjour, avant d'afficher une jsp, je dois faire un traitement qui peut durer une minute. Je souhaiterais donc afficher une image type sablier pour informer que le traitement est en cours.

Je ne sais pas du tout comment faire, pouvez-vous m'indiquer comment procéder ? Faut-il recourir à JavaScript ou bien est-ce que le contrôle se fait côté serveur ?

[link256]

Salut,

Je dois faire un petit tuto à ce sujet depuis un petit bout de temps ^^

Il y a peut être d'autre solution mais je l'applique pour des traitement ou pour l'upload de document.

Le formulaire comprend :
- une div caché contenant un message et un petit gif animé d'un sablier qui apparait à la validation du formulaire.
- un target vers une autre div caché vide
- la validation du formulaire par sur le post d'une servlet
- le formulaire est validé via javascript

Dans le doPost de la servlet je fais le traitement et je marque en session l'état d'avancement du traitement.

Dans le doGet je génère un flux xml en fonction de la valeur récupérer en session sur l'avancement du traitement.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

response.setContentType("text/xml");

Le doGet est appelé via XMLRequest à partir du formulaire avec un appel toutes les X secondes en fonction de la taille du traitement (le paramètre X pouvant être passé dans le flux XML)

lorsque le traitement est fini supression de la target et changement de l'action du formulaire pour passé à l'écran suivant.

Un bout de code AJAX

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
var req;
 
			function ajaxFunction()
			{		
			    var url = "<%=request.getContextPath()%>/ServletDoGet";
 
			    if (window.XMLHttpRequest) // Non-IE browsers
			    { 	    	
			        req = new XMLHttpRequest();
 
					try 
			        {
			            req.open("GET", url, true);
			            req.onreadystatechange = function()
			            {
				    		if (req.readyState == 4)
				    		{
						      processStateChange();
				    		}
				  		}
				 	} 
			        catch (e) 
			        {
			            alert(e);
			        }
			        req.send(null);
 
			    } 
			    else if (window.ActiveXObject) // IE Browsers
			    { 
			        req = new ActiveXObject("Microsoft.XMLHTTP");
 
			        if (req) 
			        {
			            req.onReadyStateChange = processStateChange;
			            req.open("GET", url, true);
			            req.send();
			        }
			    }	    
			}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
function processStateChange()
{
	/**
	*  State    Description
	*    0      The request is not initialized
	*    1      The request has been set up
	*    2      The request has been sent
	*    3      The request is in process
	*    4      The request is complete
	*/
 
	if (req.readyState == 4)
	{
		if (req.status == 200) // OK response
		{
			var xml = req.responseXML;
 
			var etatTraitement = xml.getElementsByTagName("traitement")[0];	
			var raffraichissement = xml.getElementsByTagName("rafraichissement%>")[0];
 
			if (etatTraitement == null)//étape initialisation
				{			            	
					if(raffraichissement==null)
						window.setTimeout("ajaxFunction();", 2000);			            	
					else
						window.setTimeout("ajaxFunction();", raffraichissement.firstChild.data);			            	
 
				}
				else
				{
					var etatDuTraitement = etatTraitement.firstChild.data;
					if(etatDuTraitement=="terminer")
					{
						document.monForm.action = "actionAffichage.do";
						document.monForm.target="";				
						document.monForm.submit();
					}		
				}
		}	
	}
}

En esperant que cela te mette sur la voix si tu as d'autre question hésite pas

[verbose]

Je ne suis pas une bête en html, mais si on utilise un div caché, est-ce qu'on va pouvoir obtenir une superposition de l'animation sur la page de fond lorsqu'elle s'affichera ?

[Mengué georges]

Bonjour

Exactement, tu mets ton sablier dans un div caché et avant de lancer le traitement tu affiches le div.

[link256]

Tu mets la div caché contenant le sablier en position:absolute tu peux aussi jouer sur le z-index ainsi que sur l'opacité des élément de ta page en diminuant celle des éléments qui sont en arrière plan.

[OButterlin]

Il faut tout de même préciser que le "sablier" doit être afficher par la page appelante (phase request) pas dans la page cible (après response), il sera trop tard...

[link256]

Nous sommes d'accord c'est à la validation du formulaire qu'il faut afficher la div cachée contenant le sablier

[verbose]

Je progresse un peu, mais je n'arrive toujours pas à obtenir le résultat que je veux.

En fait, je ne maîtrise pas très bien javascript, or si j'ai bien compris, il faut utiliser l'objet XMLHttpRequest.

J'aurais besoin de comprendre toute la séquence d'appel, en partant du formulaire d'origine jusqu'à la page de résultat.

[link256]

Je ne peux pas te répondre pour le moment,
mais promis demain matin de m'y colle à moins que quelqu'un me devance ^^

[verbose]

Merci link pour ta sollicitude

J'ai à nouveau progressé. Maintenant j'arrive bien à afficher et masquer mon message d'attente. Par contre je n'arrive pas à faire la redirection vers la page de résultat. Je pense que je n'utilise pas correctement l'objet XMLHttpRequest.

Voici ma fonction javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function attendre(reponse) {
    var xhr=null;
    
    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.onreadystatechange = function() { terminer(xhr); };
    
    document.getElementById("attente").style.visibility="visible";
    
    xhr.open("GET", reponse, true);
    xhr.send(null); //pas de redirection
}

function terminer(xhr) {
    if (xhr.readyState == 4) {
    	document.getElementById("attente").style.visibility="hidden";
    }
}

[OButterlin]

Pourquoi utiliser ajax ? A priori, je n'en vois pas l'utilité...

Peux-tu faire un petit diagramme de l'échange souhaité ?

[verbose]

La séquence d'appel est très simple. Je pars d'un formulaire que je soumets, et j'affiche le résultat.

Seulement la page de résultat est une jsp qui affiche des données en provenance d'un serveur de données avec un temps de latence qui peut être de plusieurs dizaines de secondes.

Au départ, j'ai essayé sans XMLHttpRequest, je ne me rappelle plus trop le code, mais le résultat ne correspondait pas à ce que je cherchais. Le message s'affichait pendant un laps de temps très court car la redirection en soit est très rapide. Ce qui prend du temps, c'est la génération de la jsp qui contient les scriptlets d'accès à la base de données (pas de framework).

Donc je dois recevoir une notification que la page est entièrement chargée avant de masquer le message d'attente.

[verbose]

J'ai trouvé une astuce :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
document.write(xhr.responseText);
xhr.close();

Le problème, c'est que la connexion ouverte par XMLHttpRequest ne se ferme pas, même en appelant la fonction close().

[verbose]

Suis-je donc bête, il fallait appeler la fonction close() sur le document et non sur l'objet XMLHttpRequest