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

**identifiant_bidon** · 13/03/2011, 00h57

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 :

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
<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+

**Nesmontou** · 13/03/2011, 11h27

Bonjour,

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

Bon développement

**identifiant_bidon** · 13/03/2011, 12h04

Yeeees, merci beaucoup Nesmontou !!

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

)

**identifiant_bidon** · 13/03/2011, 17h23

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 :

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
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

**Bovino** · 14/03/2011, 12h08

Code :

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

document.getElementById("test_refresh",true)

c'est quoi ce paramètre true ?

**identifiant_bidon** · 14/03/2011, 14h25

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

**andry.aime** · 14/03/2011, 16h25

Bonsoir,

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

.

A+.

**identifiant_bidon** · 15/03/2011, 06h29

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 :

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
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é...

**andry.aime** · 18/03/2011, 18h22

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

A+.

**identifiant_bidon** · 19/03/2011, 19h03

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

Merci

**Billy KiT** · 19/03/2011, 21h23

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 :

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

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 :

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

1
2
3
4
5
6
7
<?php 
        $nb_min = 1;
        $nb_max = 100;
        $nombre = mt_rand($nb_min,$nb_max);
        
        echo $nombre;
?>

**identifiant_bidon** · 19/03/2011, 21h41

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

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).

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

**Billy KiT** · 19/03/2011, 22h02

Je crois que tu as brûlé beaucoup d'étapes !

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

.

**identifiant_bidon** · 20/03/2011, 08h18

Merci beaucoup Billy KiT. Tout marche nickel !!

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

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

AJAX

Discussions similaires

Partager

Partager