Discussion :

[shreck]

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 :

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

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

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

[shreck]

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

[RomainVALERI]

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

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

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

[shreck]

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

Code :

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

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

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

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

[marcha]

tu mets un alert dans la fonction et tu test tu aura ta réponse

[RomainVALERI]

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.

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

[shreck]

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 :

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

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

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

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

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

[RomainVALERI]

Code :

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

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);
	}

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

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 )

[shreck]

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 !

[shreck]

Nikel !

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

Code :

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

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

[Bovino]

Code :

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

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

Fonctionne aussi ! Sans utiliser de fonction intermédiaire.

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

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

1
2
3
4
5
6
 
function automatisation_actualisation()
	{
		actualiser();
		window.setInterval(actualiser, 5000);
	}

[RomainVALERI]

Ton raisonnement est juste. Et en appliquant le conseil de Bovino ça donnerait (toujours sans fonction intermédiaire) :

Code :

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

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 )

[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