[AJAX] Besoin d'une explication svp

Version imprimable

Bonjour,

Je tente de comprendre comment fonctionne Ajax et je bug sur un truc...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
function ajax()
{
    var xhr=null;
 
    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
 
	//récupération des données
	var pseudo = encodeURIComponent(document.getElementById("pseudo").value);
	var msg = encodeURIComponent(document.getElementById("msg").value);	
 
    //on envoie les données
    xhr.open("GET", "essai.php?pseudo=" + pseudo + "&msg=" + msg, false);
    xhr.send(null);
    alert(xhr.status);
}

En synchrone comme ci-dessus, l'alerte fonctionne. Si je passe en asynchrone ça ne fonctionne plus ... pourquoi ?

Une explication à ma portée (gros débutant) serait sympa.

Merci

15/06/2012, 16h47
Bovino

Tout simplement parce qu'en mode asynchrone, JavaScript n'attend pas la réponse du serveur pour exécuter les instructions suivantes, du coup ton alert est lancé avant d'avoir reçu la réponse.

Ceci dit, la notion de requête asynchrone, c'est quand même le B.A.BA d'AJAX...
15/06/2012, 17h14
tryan

Le "B.A.BA" ... quand on débute ce n'est pas aussi simple pour tout le monde.
Du coup, en mode asynchrone, comment procéder pour que l'alerte soit pris en considération? Il faut utiliser "onreadystatechange"?
15/06/2012, 18h24
NoSmoking

Bonjour,
:fleche: Comprendre les mécanismes d'AJAX
et ce notamment passage
:fleche: Asynchrone ou synchrone ?

Bonjour,

J'ai lus et je dois avoué que j'ai du mal mais je persiste. J'ai finis par parvenir à ce que je souhaitais et j'aimerais savoir si ce que je fais est correcte ou pas.

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
47
 
function ajax()
{
	//---------------------Instance pour vérifier la compatibilité avec les navigateurs------------------------------//
	var xhr=null;
 
	if (window.XMLHttpRequest) { 
		xhr = new XMLHttpRequest();
	}
	else if (window.ActiveXObject) 
	{
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
	//---------------------Fin de l'instance------------------------------//
 
	//récupération des données
	pseudo = encodeURIComponent(document.getElementById("pseudo").value);
	msg = encodeURIComponent(document.getElementById("msg").value);	
 
	//on définit l'appel de la fonction au retour serveur
	xhr.onreadystatechange = function() { 
		gestion_erreur(xhr); 
	}
	//on ouvre le fichier et on envoie les données
	xhr.open("GET", "essai.php?pseudo=" + pseudo + "&msg=" + msg, true);
	xhr.send(null);
}
 
function gestion_erreur(xhr)
{
    //si état et statut ok
	if(xhr.readyState == 4 && xhr.status == 200)
	{
	    //on contrôle les champs + autres actions si besoin
		}
		else{
			//Aucune erreur dans le contrôle précédent, on lance éventuellement d'autres actions
		}	
	}
	//si erreur dans l'état ou le statut
	else{
	    //on contrôle le statut. Si 404, le fichier ouvert par "open" n'existe pas
		if(xhr.status == 404){
			alert('Erreur ' +xhr.status);
		}
	}
}

Verdict?

ta fonction gestion_erreur comporte une erreur d'accolade

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function gestion_erreur(xhr) {
  //si état et statut ok
  if (xhr.readyState == 4 && xhr.status == 200) {
    //on contrôle les champs + autres actions si besoin
  } else {
    //Aucune erreur dans le contrôle précédent, on lance éventuellement d'autres actions
  }
} // CELLE CI EST VISIBLEMENT EN TROP
//si erreur dans l'état ou le statut
else {
  //on contrôle le statut. Si 404, le fichier ouvert par "open" n'existe pas
  if (xhr.status == 404) {
    alert('Erreur ' + xhr.status);
  }
}
}

problème d'indentation ;)

dans la définition de la fonction sur le onreadystatechange

Code:

1
2
3
4
  //on définit l'appel de la fonction au retour serveur
  xhr.onreadystatechange = function () {
    gestion_erreur(xhr);
  }

tu peux lui indiquer simplement l'adresse de la fonction à exécuter

Code:

1
2
  //on définit l'appel de la fonction au retour serveur
  xhr.onreadystatechange =  gestion_erreur;

Bonjour,

Dans la définition de la fonction sur le onreadystatechange et si je fais ce que vous m'indiquez, plus aucun contrôle n'est effectué ...

Voici ma fonction (mode gros débutant :D ):

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
 
function gestion_erreur(xhr)
{
    //si du côté d'ajax c'est ok
	if(xhr.readyState == 4 && xhr.status == 200)
	{
	    //on contrôle les champs
		if(msg == '' || pseudo == ''){
			//erreur affiché dans le div
			document.getElementById("message").innerHTML='Veuillez remplir tout les champs!';
			//on passe la couleur du texte en rouge
			document.getElementById("message").style.color='red';
			//on arrête ajax
			xhr_object.abort();
		}
		else{
			//Aucune erreur dans le contrôle précédent
			//on passe la couleur du texte en vert
			document.getElementById("message").style.color='green';	
			//on indique que le message est envoyé		
			document.getElementById("message").innerHTML='Message envoyé avec succès :)!';	
			//on vide le champ msg
			document.getElementById("msg").value='';
			//on lance la fonction vide()
			setTimeout("vide_champ()",3000);
		}	
	}
	//côté ajax ça merde
	else{
	    //on contrôle le statut. Si 404, le fichier ouvert par "open" n'existe pas
		if(xhr.status == 404){
			alert('Erreur ' +xhr.status);
		}
	}
}

16/06/2012, 17h23
NoSmoking

Citation:

Envoyé par tryan

Dans la définition de la fonction sur le onreadystatechange et si je fais ce que vous m'indiquez, plus aucun contrôle n'est effectué ...

:oops: effectivement la variable xhr n'est pas globale donc il te faut faire comme tu l'as mentionné dans ta première source, donc oublies ma deuxième remarque.

Encore un lien qui devrait t'intéresser :fleche: Un classique AJAX : utiliser les données au bon moment !
16/06/2012, 18h50
tryan

Merci pour le lien :).

Dans l'exemple (du lien), le traitement en mode asynchrone est placé entre le mode d'ouverture (open) et l'envoie (send). Il doit toujours en être ainsi ou le traitement peut être placé avant l'ouverture comme j'ai fais?
16/06/2012, 23h35
NoSmoking

Suivant ce que tu trouveras sur la toile tu verras que l'on a l'initialisation de la fonction exécutée en retour de requête soit avant soit après l'ouverture de la connexion.

Après c'est une affaire de "goût" et d'habitude.

- création de l'instance XMLHttRequest.
- création de la chaîne des paramètres à envoyer.
- ouverture de la connexion ( open()).
- définition action en retour ( onreadystatechange).
- lancement de la requête (send()).

Seule la première et la dernière resteront à leur place, pour la récupération de la chaîne des paramètres c'est avant son utilisation il va de soit.

Même au sein de developer.mozilla.org tu trouveras les deux façons d'écrire
- https://developer.mozilla.org/fr/XML...ion_asynchrone
- https://developer.mozilla.org/fr/AJA...exemple_simple
...bon c'est vrai je pinaille et j'ai mis un peu de temps à te trouver cet exemple de mixité
17/06/2012, 09h10
tryan

Merci bien pour ces exemples :) et je pense que je vais garder l'architecture que vous présentez ci-dessus.

Je passe le sujet en résolu et je vous remercie d'avoir consacré un peut de votre temps au gros débutant que je suis ;).