[AJAX] Refresh automatique tchat

Version imprimable

Bonjour à tous,

je débute en ajax et j'ai suivi quelques tutos, je souhaite créer un tchat en ajax sur mon site perso. J'ai réussi à écrire dans un fichier et à le lire (ne marche que sous firefox d'ailleurs...).

Le problème c'est lors de l'actualisation du tchat, pour le moment je suis obligé d'appuyer sur un bouton pour actualiser la partie "ajax", c'est assez fastidieux :s.

Pouvez vous me donner un coup de main svp ?
voici mon code :

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
46
 
<script language="JavaScript">
	function actualiser() //en fait je lis le fichier dans lequel les utilisateurs tapent leur texte, tout simplement ..
	{ 
		var xhr = null; 
 
		document.form_1.textarea1.value="Démarré...";
 
			if(window.XMLHttpRequest) // Firefox et autres
			   xhr = new XMLHttpRequest(); 
			else if(window.ActiveXObject){ // Internet Explorer 
			   try {
						xhr = new ActiveXObject("Msxml2.XMLHTTP");
					} catch (e) {
						xhr = new ActiveXObject("Microsoft.XMLHTTP");
					}
			}
			else { // XMLHttpRequest non supporté par le navigateur 
			   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
			   xhr = false; 
			}
 
		xhr.onreadystatechange = function()
		{ 
			document.form_1.textarea1.value="Attente du serveur...";
			if(xhr.readyState == 4)
			{
				if(xhr.status == 200)
				{					
					document.form_1.textarea1.value= xhr.responseText;
				}	
				else	
				{
					document.form_1.textarea1.value="Error: returned status code " + xhr.status + " " + xhr.statusText;
				}	
			} 
			else
			{
			}
		}; 
		xhr.open("GET", "./tchat.xml", true); 
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
		xhr.setRequestHeader("Cache-Control","no-cache");   //résoudre le probleme de chache sous IE ? marche pas :s
		xhr.send(null); 
		document.setInterval(actualiser(), 10000);  //ici je voulais tester en relançant ma fonction, mais ça fait une boucle infinie... :s
	}

merci d'avance

15/12/2008, 11h12
RomainVALERI

Pour le problème du cache, vois éventuellement la solution évoquée ici aujourd'hui même pour un autre souci.

Sinon, quand tu dis :

Citation:

Envoyé par "shreck

Le problème c'est lors de l'actualisation du tchat, pour le moment je suis obligé d'appuyer sur un bouton pour actualiser la partie "ajax", c'est assez fastidieux :s

Heu... que veux-tu dire ? oO
Le principe même de l'ajax, c'est bien de ne pas devoir actualiser... ^^
15/12/2008, 11h18
shreck

en fait, je ne souhaite pas actualiser toute la page, mais uniquement mettre à jour mon <textarea> , celui dans lequel sont écris les messages.
15/12/2008, 11h25
RomainVALERI

D'accord, c'est donc bien le principe de l'ajax :P
Par contre :

Citation:

Envoyé par shreck

pour le moment je suis obligé d'appuyer sur un bouton pour actualiser la partie "ajax"

... du coup de quel bouton parles-tu ?

j'ai créé un input spécialement pour actualiser, il me lance la fonction que j'ai posté au dessus
Code:

1 2 3 <INPUT type="BUTTON" value="Envoyer" ONCLICK="submitform()" /> //permet d'envoyer un message <INPUT type="BUTTON" value="Actualiser" ONCLICK="actualiser()" /> //permet d'actualiser la partie "tchat"
en gros il me faudrait juste arriver à faire un "document.SetInterval(actualiser(), 10000)"
mais cela ne fonctionne pas, là ou je l'ai placée ça boucle à l'infini :(

15/12/2008, 15h17
marcha

setInterval(actualiser, 10000); // window. pas nécessaire en général

actualiser sans les (), car setInterval attend une fonction en paramètre,
donc il faut juste donner le nom sans les ().

si tu mets les () tu provoque un appel à la fonction et c'est son résultat
qui est transmis comme paramètre à setInterval et non la référence à
la fonction.
16/12/2008, 09h51
shreck

merci bien pour l'info je ne savais pas la différence entre les deux.
Malheureusement, cela ne fonctionne toujours pas :s.

Je ne comprends vraiment pas, normalement, la fonction SetInterval est censée relancer la fonction "actualiser" toutes les 10secs :(

est-ce que SetInterval lance la fonction, puis attend 10sec avant de la relancer ? ou est-ce que SetInterval attend 10sec et lance la fonction ?
16/12/2008, 10h18
marcha

tu mets un alert dans la fonction et tu test :) tu aura ta réponse
16/12/2008, 10h30
RomainVALERI

Citation:

Envoyé par shreck

est-ce que SetInterval lance la fonction, puis attend 10sec avant de la relancer ? ou est-ce que SetInterval attend 10sec et lance la fonction ?

- La fonction sera appelée la première fois au bout du délai choisi, puis périodiquement à chaque fois toutes les n millisecondes.

Citation:

Envoyé par shreck

... SetInterval ...

- Attention : c'est window.setInterval(), et même si "window" n'est pas indispensable ici (je crois), en tout cas ce n'est pas "document.setInterval()"...

- Les noms de fonctions sont sensibles à la casse, donc setInterval != SetInterval

effectivement...

mon probleme c'est que la fonction se lance au chargement de la page, mais plus par la suite :s

voici comment je procede :
Code:

1 2 3 4 5 6 7 8 9 10 <body onload= "actualiser();"> //appel de la fonction au chargement de la page. function actualiser() { alert("on rentre dans la fonction actualiser"); ... ... ... //bla bla bla mon code (voir au dessus) document.setInterval(actualiser, 10000); }
Faut-il placer le "document.setInterval(actualiser, 10000);" au début de la fonction ? sachant qu'en 10sec elle aura totalement le temps de se finir..

16/12/2008, 10h47
RomainVALERI
Au fait : il est possible que tu rencontres des problèmes avec setInterval sous IE (si jamais tu avais besoin de passer des paramètres à ta fonction notamment, mais je crois qu'il y a d'autres cas). Si c'était le cas, essaie de passer par une fonction anonyme :
Code:

1 2 window.setInterval(function() { actualiser(); }, 1000);

Citation:
Envoyé par shreck
Code:

1 2 3 4 5 6 7 8 <body onload= "actualiser();"> //appel de la fonction au chargement de la page. function actualiser() { alert("on rentre dans la fonction actualiser"); ... ... ... //bla bla bla mon code (voir au dessus) document.setInterval(actualiser, 10000); }
:arf:

Non, non ! si setInterval() est placé à l'intérieur, la fonction va créer non pas une nouvelle exécution à chaque fois, mais une nouvelle "périodicité" à chaque fois, et ça va boucler catastrophiquement :aie:

A la rigueur, si tu veux placer quelquechose à l'intérieur de la fonction, ça serait un setTimeout(), qui exécute une seule fois la fonction passée en argument, après le temps donné. Mais à mon avis, setInterval fait parfaitement le boulot ici, à condition de le sortir de ta fonction, le body.onload suffit ^^

(et enlève ce "document" avant setInterval(), ils n'ont rien à faire ensemble 8-))

16/12/2008, 10h57
shreck

Citation:

Envoyé par RomainVALERI

Au fait : il est possible que tu rencontres des problèmes avec setInterval sous IE

IE... ça me dit quelque chose, mais c'est vraiment très très vague... ;)

Effectivement, avec window.setInterval au lieu de document.setinterval c'est déjà mieux.. merci :)

j'ai encore quelques petits problèmes (actualisation de façon aléatoire..)

mais bon je vais essayer de me débrouiller seul..

merci beaucoup pour votre aide :)

edit : j'ai vu ton post que après :), vais jeter un coup d'oeil, merci... je vous tiens au courant !

Nikel !

J'ai créé une fonction intermédiaire (ne vous moquez pas du nom..)
Code:

1 2 3 4 5 6 7 8 9 function automatisation_actualisation() { window.setInterval(actualiser, 10000); } <body onload= "automatisation_actualisation();">
ça marche très bien...

merci beaucoup !!:yaisse2:

16/12/2008, 11h18
Bovino

Code:

<body onload="setInterval(actualiser, 10000);">

Fonctionne aussi ! Sans utiliser de fonction intermédiaire.
16/12/2008, 11h24
shreck
C'est vrai, mais cela n'actualisera pas la page à la fin de son chargement, mais uniquement au bout du temps défini non ?

C'est à dire que les utilisateurs sont obligés d'attendre 10 sec avant de pouvoir lire les derniers posts..

du coup j'ai fait ça :
Code:

1 2 3 4 5 6 function automatisation_actualisation() { actualiser(); window.setInterval(actualiser, 5000); }
16/12/2008, 12h21
RomainVALERI
Ton raisonnement est juste. Et en appliquant le conseil de Bovino ça donnerait (toujours sans fonction intermédiaire) :
Code:

1 2 <body onload="setInterval(actualiser, 10000); actualiser();">
(Mais bon ^^ moi je l'aimais bien ton nom de fonction... ça me donnait l'impression de ne pas être le seul à donner des noms à rallonge à mes fonctions :aie:)
16/12/2008, 13h12
shreck

cool ! j'apprends pas mal de nouveaux trucs c'est simpa !

pour les noms de fonctions, bah faut bien que ca reste explicite non ? :p