[AJAX] Message d'attente pendant chargement

Bonjour,
J'ai essayé l'exemple de la page suivante:
http://fr.wikibooks.org/wiki/Program.../Ajax/Sommaire

Je cherche simplement le moyen d'ajouter un gif animé et éventuellement un message pendant le chargement de la page (après avoir cliquer sur un lien).
Merci.

Bonjour,

Code:

1
2
3
4
5
6
7
8
xhr.onreadystatechange = function () {
  if(xhr.readyState!=4){
   // ici tu affiches le gif animé
} else{
   // ici la réponse est chargé
}
 
}

A+.

J'ai résolu mon problème. Voici mon code

Fichier css:

Code:

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
#page
{
	left : 240px;
	width:200px;
	height:20px;
}
 
.masquer
{
	visibility: hidden;
}
 
.terminer
{
	float: right;
	margin: 4px 470px 4px 0px;
	height: 16px;
	width: 16px;
	background-image:url(enabled.gif) ;
	visibility:visible;
}
 
.attente
{
	float: right;
	margin: 4px 470px 4px 0px;
	height: 16px;
	width: 16px;
	background-image:url(ajax-loader_2.gif) ;
	visibility:visible;
}

Fichier js:

Code:

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
var xhr = null; 
 
function getXhr()
{
     if(window.XMLHttpRequest)xhr = new XMLHttpRequest(); 
else if(window.ActiveXObject)
  { 
  try{
     xhr = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e) 
     {
     xhr = new ActiveXObject("Microsoft.XMLHTTP");
     }
  }
else 
  {
  alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
  xhr = false; 
  } 
}
 
 
 
function ShowPage(page)
{
getXhr();
xhr.onreadystatechange = function()
    {
     if(xhr.readyState == 4 && xhr.status == 200)
     {
     document.getElementById("page").innerHTML=xhr.responseText;
     document.getElementById("message_1").className="terminer";
	 document.getElementById("message_2").className="masquer";
     }
    }
document.getElementById("message_1").className="attente";
document.getElementById("message_2").className="masquer";
xhr.open("GET","fichier.php",true);
xhr.send(null);
 
}

Fichier php:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
echo
'<link rel = "stylesheet" href = "style.css" type = "text/css"/>
<script type= "text/javascript" src="ajax1.js"></script>
Url du fichier :
<input type="text" size="30" maxlength="100"/>
<div class="masquer" id="message_1"></div>
<div class="masquer" id="message_2"></div>
</div>

<div class="margin-form">
<div id="page">
</div>
<input type="submit" onClick="ShowPage()" class="button" name="submitUpdate" value="Envoyer">
</div>';
?>

Est-il possible de mettre un boucle pour faire en sorte que la fonction ShowPage s’exécute 3 fois de suite, pour avoir quelque chose comme:

Code:

xhr.open("GET","fichier"+n+".php",true);