[AJAX] Rafraichir une partie de la page toutes les secondes

Version imprimable

Bonjour,

Voici mon problème.
Je dispose d'une page avec une table dans laquelle j'affiche un nombre aléatoire. Je voudrais faire en sorte que la cellule dans laquelle est affiché ce nombre se recharge toutes les secondes. Ne connaissant pas Ajax pour le moment, je ne sais pas du tout comment faire ça.

Voici mon code pour l'instant:

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
<html>
<head>
	<script language="javascript" type="text/javascript">
		URL = "http://localhost/Test/test_Ajax/test.php";
		function rafraichir() {
				if (window.XMLHttpRequest) xhr = new XMLHttpRequest();
				else if (window.ActiveXObject) xhr = new ActiveXObject('Microsoft.XMLHTTP');
				else alert('JavaScript : votre navigateur ne supporte pas les objets XMLHttpRequest...');
				xhr.open('GET',URL,true);
				xhr.onreadystatechange = ajaxReponse;
				xhr.send(null);
		}
 
		function ajaxReponse() {
				if (xhr.readyState == 4) {
						document.getElementById("test_refresh",true).innerHTML=xhr.responseText; 
						var timer=setTimeout("rafraichir()",1000); 
				}
		}
</script>
 
 
 
</head>
<body onLoad="javascript:rafraichir();">
<table>
	<tr>
		<td id="test_refresh">
			<?php 
                        $nb_min = 1;
                        $nb_max = 100;
                        $nombre = mt_rand($nb_min,$nb_max);
                        
                        echo $nombre;
                        ?>
		</td>
	</tr>
</table>			
</body>
</html>

Merci à toute personne qui pourra m'indiquer comment régler mon problème.

A+

13/03/2011, 11h27
Nesmontou

Bonjour,

Tu peux utiliser la fonction setInterval : http://javascript.developpez.com/faq...e=date#Horloge

Bon développement ;)
13/03/2011, 12h04
identifiant_bidon

Yeeees, merci beaucoup Nesmontou !!

Ça marche bien comme je veux !!!!
(et dire que mon problème se trouvait seulement là !!! :mouarf:)

J'crois que j'ai parlé un peu trop vite en fait. Le comportement est vraiment bizarre au bout de quelques secondes. Une partie de la page est "doublée".

Cette page est une page de test (je découvre Ajax) mais lorsque je la met dans ma "vraie" page, le rafraichissement ne se fait plus.

Voici mon code, si quelqu'un pouvait m'expliquer ce qui se passe, ce serait sympa.

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
42
43
44
45
<html>
<head>
	<script language="javascript" type="text/javascript">
		URL = "http://localhost/Test/test_Ajax/test.php";
		function rafraichir() {
				if (window.XMLHttpRequest) xhr = new XMLHttpRequest();
				else if (window.ActiveXObject) xhr = new ActiveXObject('Microsoft.XMLHTTP');
				else alert('JavaScript : votre navigateur ne supporte pas les objets XMLHttpRequest...');
				xhr.open('GET',URL,true);
				xhr.onreadystatechange = ajaxReponse;
				xhr.send(null);
		}
 
		function ajaxReponse() {
				if (xhr.readyState == 4) {
						document.getElementById("test_refresh",true).innerHTML=xhr.responseText; 
 
 
 
 
						var timer=setInterval("rafraichir()",1000); 
				}
		}
</script>
</head>
<body onLoad="javascript:rafraichir();">
<table>
	<tr>
		<td id="test_refresh">
			<?php 
                        $nb_min = 1;
                        $nb_max = 100;
                        $nombre = mt_rand($nb_min,$nb_max);
                        
                        echo $nombre;
                        ?>
		</td>
	</tr>
</table>	
ceci est une première phrase<br/>ceci est une seconde phrase
<div style="position:absolute; top:100px; left:200px; height:100px; width:200px; border:1px solid #000000">
div test
</div>
</body>
</html>

Merci beaucoup :ccool:

14/03/2011, 12h08
Bovino

Code:

document.getElementById("test_refresh",true)

c'est quoi ce paramètre true ? :?
14/03/2011, 14h25
identifiant_bidon

Ben je t'avouerai que je sais pas trop Bovino. C'est un code que j'ai récupéré à la base sur le net. C'est peut-être ça qui fait que cela fait n'importe quoi. Je vais essayer ce soir.

Merci
14/03/2011, 16h25
andry.aime

Bonsoir,

+1 Bovino
Utilise un setTimeout à la place de setInterval. Fait un recherche, il y a plusieurs discussion résolue ;).

A+.

Bonjour à tous

D'abord merci pour vos conseils. Je procède par petites touches. Voici ce que donne mon code. J'ai viré le true, et remplacé setInterval par setTimeout. Ca marche pas mal.

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
42
43
44
45
<html>
<head>
	<script language="javascript" type="text/javascript">
		URL = "http://localhost/Test/test_Ajax/test.php";
		function rafraichir() {
				if (window.XMLHttpRequest) xhr = new XMLHttpRequest();
				else if (window.ActiveXObject) xhr = new ActiveXObject('Microsoft.XMLHTTP');
				else alert('JavaScript : votre navigateur ne supporte pas les objets XMLHttpRequest...');
				xhr.open('GET',URL,true);
				xhr.onreadystatechange = ajaxReponse;
				xhr.send(null);
		}
 
		function ajaxReponse() {
				if (xhr.readyState == 4) {
						document.getElementById("test_refresh").innerHTML=xhr.responseText; 
 
 
 
 
						var timer=setTimeout("rafraichir()",1000); 
				}
		}
</script>
</head>
<body onLoad="javascript:rafraichir();">
<table>
	<tr>
		<td id="test_refresh">
			<?php 
                        $nb_min = 1;
                        $nb_max = 100;
                        $nombre = mt_rand($nb_min,$nb_max);
                        
                        echo $nombre;
                        ?>
		</td>
	</tr>
</table>	
ceci est une première phrase<br/>ceci est une seconde phrase
<div style="position:absolute; top:100px; left:200px; height:100px; width:200px; border:1px solid #000000">
div test
</div>
</body>
</html>

Maintenant, j'ai 2 questions :
- Pourquoi le texte "ceci est une première phrase / ceci est une seconde phrase" est il affiché 2 fois ??
- La rafraichissement de ma cellule ne marche pas sous IE. Pourquoi ??

Aime, j'ai déjà cherché mais j'ai pas trouvé. Peut être mal cherché... :cry:

18/03/2011, 18h22
andry.aime

Bonsoir,
Déclare xhr en variable globale ou passe le en paramètre de la fonction ajaxReponse().

A+.
19/03/2011, 19h03
identifiant_bidon

Merci Aimé pour ta réponse.
Est-ce que tu peux juste m'expliquer le but de cette manip' ?

Merci
19/03/2011, 21h23
Billy KiT
Salut,
Le fait de ne pas mettre le mot clef var rend xhr global. Donc ça fonctionne.
Le soucis sur IE est certainement dû au fait qu'il charge les pages depuis le cache et donc que le chiffre ne change pas.
Pour éviter ça, il faut ajouter une astuce "anti-cache" :

Code:

xhr.open('GET',URL+"?anticache="+new Date().getTime(),true);

Pour les phrases en double, qu'y a-t-il dans test.php ? Il suffit qu'il y ait :
Code:

1 2 3 4 5 6 7 <?php $nb_min = 1; $nb_max = 100; $nombre = mt_rand($nb_min,$nb_max); echo $nombre; ?>
19/03/2011, 21h41
identifiant_bidon

Aaaah super merci Billy KiT. Je vais regarder ce que ta solution donne. :ccool:

Alors par contre, je suis complètement novice avec Ajax, je dois dire. Ma page test.php, c'est la page dont j'ai fourni le code (oui, tout ça. Du coup, je vois mieux d'ou vient mon erreur). :oops: J'ai l'impression que j'ai fait une petite bêtise alors...

Du coup, pour que les choses soient vraiment claires dans mon esprit, que dois-je mettre dans ma variable URL ?

Merci encore
19/03/2011, 22h02
Billy KiT

Je crois que tu as brûlé beaucoup d'étapes ! :bebe: C'est pas très bon.
Si ta page s'appelle test.php, tu dois créer un autre fichier test2.php qui contient seulement le code comme noté dans le précédent message.
Donc : URL = "test2.php" si dans le même répertoire.
Il faut quand même absolument revoir les principes fondamentaux de AJAX avec les tutos ;).
20/03/2011, 08h18
identifiant_bidon

Merci beaucoup Billy KiT. Tout marche nickel !!

Je m'en vais de ce pas lire quelques tutos ... :oops: