Forum Clubic

[AJAX]Souci lors d'une vérification

Salut à tous ! Après avoir lu differents tutos et testé des scripts, jai essayé moi meme AJAX. Mais ça passe pas trop

J’ai 3 scripts; le premier est le formulaire que voici :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml?quot; xml:lang="fr" lang="fr">
 <head>
    <meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-15" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="Content-Language" content="fr" />

    <title>Identification avec XmlHttpRequest?</title>
    <script type="text/javascript" src="verif.js"></script>
 </head>

 <body>
    <form action="prout.php" method="POST" id="frmIdentification">
        <fieldset>
            <legend>Connexion</legend>

            <label for="txtLogin">Login</label>
            <input type="text" value="" name="login" id="txtLogin" />

            <label for="txtPassword">Mot de passe</label>
            <input type="text" value="" name="password" id="txtPassword" />

            <input type="submit" value="Connexion" />
  	
  	<div id="pseudobox"></div><div id="pseudobox2"></div><div id="pseudobox3"></div>
        </fieldset>
    </form>
 </body>
 </html?gt;

le deuxième est le script .js pour faire les controles;

// JavaScript Document
function writediv(texte)
     {
     document.getElementById('pseudobox').innerHTML = texte;
     }
function writediv2(texte)
     {
     document.getElementById('pseudobox2').innerHTML = texte;
     }
function writediv3(texte)
 {
 document.getElementById('pseudobox3').innerHTML = texte;
 }
 
window.onload = function()
 {
    //on associe la fonction verif à
    //l'événénement onsubmit du formulaire
    document.getElementById('frmIdentification').onsubmit = verif;
 }
 
 function verif()
 {
    
       nberreur=0;
       login=document.getElementById('txtLogin').value;
      
       password=document.getElementById('txtPassword').value;
    
    if (login=="")
    {
     writediv("pas de login !<br />");
     nberreur++;
    }
    else
    {
  	
  /* On crée l'instance de l'objet XMLHTTPRequest */
  var mon_objet = new Object;
  
  /* Si c'est Mozilla/Firefox/Nescape/opera/safari */
  if(window.XMLHttpRequest) 
     mon_objet = new XMLHttpRequest();  
     
  /* Si c'est [Internet Explorer](http://www.clubic.com/telecharger-fiche18706-internet-explorer.html) */
  else if(window.ActiveXObject) 
    mon_objet = new ActiveXObject("Microsoft.XMLHTTP");
  /* Si aucun navigateur compatible avec XMLHttpRequest, on le signale */
  else
    { 
    writediv("Votre navigateur ne supporte pas les objets XMLHTTPRequest... Veuillez mettre à jour votre navigateur");   
    }
    	/* on spécifie la méthode, l'URL et le type de transmission  */
    	mon_objet.open("POST","test.php",true); 
      
    	/* On spécifie la fonction à exécuter */
    	mon_objet.onreadystatechange = function()
      {
      	/* si on a reçu la réponse */
      	if(mon_objet.readyState == 4)
      	{  
        /* on reçoit les données et on les affiche*/
        writediv(mon_objet.responseText);
      	}
      }
      
    	
    	/* On précise l'encodage en spécifiant l'en-tête adéquat (seulement avec POST) */
    	mon_objet.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    	
    	/* on crée les données à transmettre */
    	
    	/* On envoie la requête avec les données */
    	var donnee = document.getElementById('txtLogin').value;
    	alert(donnee);
    	mon_objet.send(donnee);  
      	
  	
     
    }

    
    
    
    if (password=="")
    {
     writediv2("pas de password !");
     nberreur++;
    }
  
    
    
	
    
    
    if(nberreur==0)
    {
     return true;
    }
    else
    {
     return false;
    }
    
 }

Enfin le 3eme est le script php pour faire la vérification du pseudo (voir si il est deja pris)

<?php

	/* On définit le type de fichier */
	header("Content-type: text/html; charset=iso-8859-1");
	if($_POST['login']=='ludo')
	{  
  echo "Cest pas libre pour<br /> ".$_POST['login']."";  
	}
	else
	{
  echo "Cest libre pour <br /> ".$_POST['login']."";
	}

?>

le 3eme script est très simpliste; c’est juste pour un test, et je ferai la vérification avec une base de donnée plus tard; C’est la que ça ne marche pas comme je veux; il n’arrive pas à m’envoyée le contenu de la variable et je ne sais comment concaténer.

Alors si qqn pouvait m’aider, ce serait gentil; Et aussi est ce que je m’y prends bien dans mon script .js ??

Merci d’avance

Il faut envoyer tes données de POST (C’est pareil pour GET d’ailleurs) sous la forme cle1=valeur1&cle2=valeur2&…

var donnee = 'login=' + escape(document.getElementById('txtLogin').value);
alert(donnee);
mon_objet.send(donnee);

N.B.: escape -> passer ta variable au format que tu indiques (application/x-www-form-urlencoded)

Quelques détails :

  • A quoi sert d’utiliser un objet XmlHttpRequest, si au final tu fais quand même un submit à la fin? A priori, il y a submit si login et password sont renseignés, donc, tu n’auras jamais le retour de ton appel (Le submit va recharger la page -> ton objet est détruit)

Au passage, tu as mis

if(nberreur==0)
{
    return true;
}
else
{
    return false;
}

et pouquoi pas

return nberreur==0;

je te remercie, ca marche maintenant, la verification marche !
Sinon je debute en ajax, c’est normal qu’il y ait des erreurs !
J’ai un formulaire avec 2 champs, j’aimerai que les 2 champs soient obligatoirement remplie et que le pseudo ne soit pas deja pris. C’est avec l’objet XmlHttpRequest que je fais cette verification (car j’aimerais testé en AJAX), et j’utilise submit pour qu’ensuite sur une autre page, je puisse récupérer les données pour les traiter;
si ce n’est pas la bonne méthode, comment procéder ?

Non, ça, c’est ceinture et bretelles :wink:

Ce n’est pas très utile à cet endroit, mais si tu veux vraiment jouer avec AJAX… Vire le submit, remplace-le par un simple bouton, et ne fait pas recharger ta page…

Analyse le XML retourné et affiche le résultat à l’utilisateur en modifiant directement ta page (Comme tu le fais pour un cas d’erreur)… ‘Vérification en cours…’ puis ‘Login valide’…

Un autre truc… Tu peux agir sur la sortie du champ login (onblur?) et vérifier à ce moment là si le login est valide, pendant que l’utilisateur continue à remplir son formulaire

La vérif. du submit se contente de voir si le login a été validé (i.e. login envoyé au serveur, retour OK)