Discussion :

[tryan]

Bonjour,

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

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

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

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

[NoSmoking]

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

[tryan]

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 :

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

[NoSmoking]

ta fonction gestion_erreur comporte une erreur d'accolade

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

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

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 :

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

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