[AJAX] AJAX ASYNCHRONE incompréhensible

**doubi_dim** · 20/03/2008, 03h18

Bonjour à tous, felicitations pour ce forum plein de bonnes choses..

Je vous explique mon problème, un vrai casse tête...

Je souhaite effectuer en Ajax une vérification de mon formulaire. Jusqu'a aujourd'hui tout allait bien, mais j'avais définit la requête en false, donc, synchrone.
Comme le script va chercher dans ma BDD tous les pseudos des visiteurs, pour verifier que le pseudo entré n'est pas déjà utilisé, pareil pour les emails, l'écran reste figé, ce qui risque de faire fuir tout le monde..

J'aimerai donc mettre le script en mode asynchrone, mais là .. PLUS RIEN..
Je suis resté 24 h d'affilée dessus (je suis insomniaque

), et je n'ai toujours pas trouvé la solution, pourtant je suis bon en Google...

Je vais donc vous donner simplement le script javascript correspondant au champ "pseudo" qui me pose problème, et je vous donnerai ensuite la version synchrone fonctionnelle.

Si vous ne me répondez pas tout de suite, c'est pas grave, j'ai préparé une corde

Voici le code qui ne fonctionne 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
48
49
50
 
 
function writediv(texte)
 
{
document.getElementById('validpseudo').innerHTML = texte;
}
 
function verifPseudo(pseudo)
{
	if(pseudo != '')
	{
		if(texte = file('inc/verifpseudo.php?pseudo='+escape(pseudo)))
		{
			if(pseudo.length<3)
				writediv('<img src="style/images/gif/invalide.gif"/><div style="color:red;text-align:center;">Ce Pseudonyme semble trop court. Veuillez entrer au moins 3 caractères svp.</div>');
			else if(texte == 0)
				writediv('<img src="style/images/gif/valide.gif"/>');
			else if(texte == 1)
				writediv('<img src="style/images/gif/invalide.gif"/><div style="color:red;text-align:center;">Pseudo indisponible</div>');
			else if(texte == 2)
				writediv('<img src="style/images/gif/invalide.gif"/><div style="color:red;text-align:center;">Ce Pseudonyme ne semble pas valide, seuls ces caractères spéciaux: "<strong> _ - . </strong>" sont acceptés.</div>');
 
		}
	}
 
}
 
 
 
function file(fichier)
{
if(window.XMLHttpRequest) // FIREFOX
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // IE
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else
return(false);
 
xhr_object.open('GET',fichier,true);
xhr_object.send(null);
    xhr_object.onreadystatechange = function()
        {
        if (xhr_object.readyState == 4)
            {
			return(xhr_object.responseText);
			}
 
		}
}

Je vous explique rapidement le principe :

La valeur du champs "pseudo" est récupérée par javascript, envoyée par GET à verifpseudo.php?pseudo=... ,

La page verifpseudo.php traite la valeur avec une regex pour verifier que le format est valide, puis va chercher dans la bdd les pseudos similaires.

Elle renvoie en echo "0" si le pseudo est valide et qu'il n'existe pas, "1" s'il est valide mais qu'elle existe, "2" s'il est syntaxiquement incorrect.

Le script javascript verifie egalement que le pseudo n'est pas trop court, et enfin il ecrit dans une div de la page un message d'erreur correspondant, ou une petite icone pour montrer qu'il est valide.

J'espere que vous avez tout compris.

Voici enfin le code qui fonctionnait mais qui fige l'écran :

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
 
function writediv(texte)
{
document.getElementById('validpseudo').innerHTML = texte;
}
 
function verifPseudo(pseudo)
{
	if(pseudo != '')
	{
		if(texte = file('inc/verifpseudo.php?pseudo='+escape(pseudo)))
		{
			if(pseudo.length<3)
				writediv('<img src="style/images/gif/invalide.gif"/><div style="color:red;text-align:center;">Ce Pseudonyme semble trop court. Veuillez entrer au moins 3 caractères svp.</div>');
			else if(texte == 0)
				writediv('<img src="style/images/gif/valide.gif"/>');
			else if(texte == 1)
				writediv('<img src="style/images/gif/invalide.gif"/><div style="color:red;text-align:center;">Pseudo indisponible</div>');
			else if(texte == 2)
				writediv('<img src="style/images/gif/invalide.gif"/><div style="color:red;text-align:center;">Ce Pseudonyme ne semble pas valide, seuls ces caractères spéciaux: "<strong> _ - . </strong>" sont acceptés.</div>');
 
		}
	}
 
}
 
 
 
function file(fichier)
{
if(window.XMLHttpRequest) // FIREFOX
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // IE
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else
return(false);
xhr_object.open("GET", fichier, false);
xhr_object.send(null);
if(xhr_object.readyState == 4) return(xhr_object.responseText);
	else 
	return(false);
}

Voila. Après de (très) nombreux essais, j'ai remarqué par exemple qu'en faisant :

Code :

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

alert(xhr_object.responseText);

au lieu de return() , j'obtenais dans la fenetre d'erreur la réponse PHP (0,1,2).

Le script va donc correctement chercher les infos... mais ne veut plus les afficher dans la div...

Tiens ça me donne envie de pleurer tout ça...

Bon bah euh... Bon courage

Dim.

**DoubleU** · 20/03/2008, 09h09

C'est normal, tu ne peux pas faire de return dans ton handler onreadystatechange.

Faut que tu mettes ton traitement dans la fonction, donc ca, c'est impossible ^^

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
		if(texte = file('inc/verifpseudo.php?pseudo='+escape(pseudo)))
		{
			if(pseudo.length<3)
				writediv('<img src="style/images/gif/invalide.gif"/><div style="color:red;text-align:center;">Ce Pseudonyme semble trop court. Veuillez entrer au moins 3 caractères svp.</div>');
			else if(texte == 0)
				writediv('<img src="style/images/gif/valide.gif"/>');
			else if(texte == 1)
				writediv('<img src="style/images/gif/invalide.gif"/><div style="color:red;text-align:center;">Pseudo indisponible</div>');
			else if(texte == 2)
				writediv('<img src="style/images/gif/invalide.gif"/><div style="color:red;text-align:center;">Ce Pseudonyme ne semble pas valide, seuls ces caractères spéciaux: "<strong> _ - . </strong>" sont acceptés.</div>');
 
		}

La bonne méthode:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
if(xhr_object.readyState == 4){
     var texte = xhr.responseText;
     if(texte == 0)
 	 writediv('<img src="style/images/gif/valide.gif"/>');
     else if(texte == 1)
	 writediv('<img src="style/images/gif/invalide.gif"/><div style="color:red;text-align:center;">Pseudo indisponible</div>');
     else if(texte == 2)
	writediv('<img src="style/images/gif/invalide.gif"/><div style="color:red;text-align:center;">Ce Pseudonyme ne semble pas valide, seuls ces caractères spéciaux: "<strong> _ - . </strong>" sont acceptés.</div>');
}

**doubi_dim** · 20/03/2008, 11h44

T'es mon idole !!

Bon bah voilà j'avais dejà essayé cette solution (j'avais gardé la copie de tous mes scripts) sauf que j'avais fait une faute de frappe... la même que toi : mon objet xhr s'appelle xhr_object

Conclusion : ne luttez pas contre le sommeil

Merci DoubleU !

[AJAX] AJAX ASYNCHRONE incompréhensible

JavaScript

Discussions similaires

Partager

Partager