Discussion :

[Chello]

Bonjour,

Je débute en Ajax et javascript. Mes résultats sont aléatoires, mais là, je tombe sur une énigme.

Le code suivant fonctionne. Mais si je retire la ligne d'"alert", la valeur est perdue (renvoie 0) !

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
var participantcount = 0 ;	// Nombre par défaut de participants, 
 
function groupe() {
		objRequete.open('get', 'participantcount.php', true)	;
		objRequete.onreadystatechange	= affectparticipantcount ;
		objRequete.send(null)	;
 
	alert("il y a "+participantcount+" participants") ;
	document.getElementById("participant").innerHTML = "/"+participantcount ;
	}
 
function affectparticipantcount() {
		if(objRequete.readyState == 4) {
		participantcount = objRequete.responseText ;
		}
	}

Ce n'est pas la première fois que j'observe ce comportement avec "alert". Quelqu'un peut-il m'expliquer ?

Merci d'avance,

Paul

[Bovino]

Salut et bienvenue sur developpez.com !

En fait, ce n'est pas que tu perds tes valeurs sans le alert, c'est surtout que comme ta requête est asynchrone (un des intérêts d'AJAX), le script n'attend pas la réponse de la requête pour continuer son exécution. Donc le alert permet juste de donner au serveur le temps de répondre... si tu le retire, tu passes aux instructions suivantes sans avoir eu le temps de récupérer les valeurs !

[Chello]

Ah... Merci pour la réponse.
Mais alors, je comprends doublement pas.

D'abord, si je modifie ma requête avec 'false' en argument, je n'obtiens toujours pas mon chiffre (en fait, c'est pire : même avec "alert", ça ne marche plus).

Ensuite, c'est le principe que je ne comprends pas. Il me semblait que obj.onreadystatechange "écoutait" les états de la réponse, et lorsque readyState == 4, alors il chope le résultat et on peut l'affecter.
C'est pas ça ?
Ça "marchait" pour les autres, mais avec des variations que ta réponse explique peut-être.

Comment faire pour récupérer ma valeur ?

Merci d'avance,

Paul

[Bovino]

Désolé de te le dire, mais ton plus gros souci est que tu veux faire une requête AJAX sans avoir d'abord essayé de comprendre au minimum comment ça fonctionne...
Dans la chronologie de ton code, en asynchrone :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function groupe() {
		// Tu ouvres la communication avec le serveur
		objRequete.open('get', 'participantcount.php', true;
		// Tu observes le changement d'état de la requête
		objRequete.onreadystatechange	= affectparticipantcount ;
		// Tu envoies la requête
		objRequete.send(null)	;
		// Avec le alert, tu figes le navigateur, pas la requête,
		// Celle-ci a donc le temps d'envoyer sa réponse avant l'instruction suivante
		alert("il y a "+participantcount+" participants") ;
		// Si tu as mis le alert, la requête a eu le temps d'envoyer sa réponse, le readyState est passé à 4 et le callback a été appelé.
		// Si tu n'as pas mis le alert, la requête vient juste de partir, elle n'est pas passée au readyState 4, la variable n'a pas été modifiée !
	        document.getElementById("participant").innerHTML = "/"+participantcount ;
	}

Quant au mode synchrone, c'est encore plus simple, il n'y a pas de changement du readyState (ça servirait à quoi d'ailleurs ?) donc tu ne passes jamais dans le callback.

Quelques liens qui devraient t'être utiles :
http://ajax.developpez.com/cours/
http://nicolaspied.developpez.com/ajax-premiers-pas/
http://siddh.developpez.com/articles/ajax/
http://dmouronval.developpez.com/tut...-requete-ajax/

[Chello]

Cassééééééééé !

Pourtant, j'avais pris un bouquin sur Ajax , et ça marchait cahin-caha, ça me paraissait donc plutôt simple (chouette !) mais... bon, allez, j'aggrave mon cas.

Merci pour les liens, je m'y plonge de suite !

[Chello]

Résolu, merci !

[Sebastien14]

Bonjour,

Pourrais tu me dire comment tu as résolu ton problème?

Merci.

[Chello]

Sure !

Ce que Bovino m'a fait indiqué en filigrane, c'est que j'avais mal compris l'ordre des opérations. La ligne d'affectation était placée au mauvais endroit : au lieu de se trouver dans le bloc d'envoi de la requête, elle devait se trouver dans le bloc de réception. Ça doit ressembler maintenant à ça :

Code :

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

1
2
3
if (objRequete.readystate ==4) {
 document.getElementById("participant").innerHTML = "/"+participantcount ;
	}

[Bovino]

Sure !

Ce que Bovino m'a fait indiqué en filigrane, c'est que j'avais mal compris l'ordre des opérations. La ligne d'affectation était placée au mauvais endroit : au lieu de se trouver dans le bloc d'envoi de la requête, elle devait se trouver dans le bloc de réception. Ça doit ressembler maintenant à ça :

Code :

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

1
2
3
if (objRequete.readystate ==4) {
 document.getElementById("participant").innerHTML = "/"+participantcount ;
	}