[code inside] Petite utilisation ajax, qu'en pensez-vous ?

[i-liquid]

Avec plaisir, je divulgue tout cela demain sans faute

Là je vais dormir après ce bon DVD (spartan), j'suis muerto !

A demain

ok merci à toi,

ciao a demain

[DaMonkey]

Voilà comme promis les quelques lignes de codes (simplistes...) pour effectuer l'effet présenté sur le site :

La partie javascript :

Code: Tout sélectionner

var xhr = null;
function getXhr () {
   if (window.ActiveXObject) {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
   } else if (window.XMLHttpRequest) {
      xhr = new XMLHttpRequest ();
   }
}

function checkInscription (champ) {
   var datas = null;
   var response = 0;
   var errorMsg = '';
   
   // on prépare le message d'erreur s'il y a lieu de le présenter
   errorMsg = 'Attention, nom existant !<br />Veuillez ajouter des lettres et / ou chiffres, ou changer de nom afin de trouver un nom d\'utilisateur unique.';

   // on initialise la variable "xhr"
   getXhr();
   
   // on vérifie que xhr a pu être initialisé (ie & mozilla compatible) sinon on ne fait rien, et rien ne se passera, rien de bien grave donc, tanpis pour ceux qui ont un navigateur non-compatible avec ajax
   if (xhr != null) {
      // on prépare les données à envoyer
      datas = 'donnee='+champ.value;
      
      // on prépare l'ouverture / connexion en mode POST, avec le paramètre "true" pour fonctionner en mode asynchrone afin que l'utilisateur ne soit pas bloqué à chaque tape d'un caractère
      xhr.open ("POST", "checkNom.php", true);

      // on prépare la fonction à utiliser lorsque le transfert est terminé
      xhr.onreadystatechange = function () {
         if (xhr.readyState == 4) {
            response = parseInt (xhr.responseText);
            
            // si la réponse retournée est plus grande que 0 (enregistrement existant) on affiche l'erreur et on bloque le bouton d'envoi
            if (response > 0) {
               document.getElementById('alertUsernameExistant').innerHTML = '<div class="cadreImportant"><p class="pCentre">'+errorMsg+'</p></div>';
                  document.getElementById('alertUsernameExistant').display = 'block';
               document.getElementById('boutonInscription').disabled = true;
            } else {
               // sinon on cache le message d'erreur et on rétablit le bouton d'envoi
               
document.getElementById('alertUsernameExistant').innerHTML = '';
                  document.getElementById('alertUsernameExistant').display = 'none';
               document.getElementById('boutonInscription').disabled = false;
            }
         }
      }
      
      // on précise le type d'entête utilisé (formulaire)
      xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      
      // finalement on envoit les données
      xhr.send (datas);
   }
}

==> à mettre dans la page où se trouve le formulaire avec le champ à vérifier


Maintenant, voici la page à laquelle fait appel le script Javascript checkNom.php

Code: Tout sélectionner

<?PHP
   // on inclue la classe de connexion (ou votre système de connexion à vous de gérer
   include_once ("classes/Connexion.class.php");
   $connexion = new Connexion (false);
   
   // on vérifie que les données sont bien transmises et ce par la méthode POST
   if (isset ($_POST["donnee"])) {
      // on prépare les données pour la comparaison en BDD
      $donnee = addslashes ($_POST["donnee"]);
      
      // on effectue la requète
      $get = mysql_query ("   SELECT   count(*) as nb
                        FROM   utilisateurs u
                        WHERE   u.username = \"$donnee\"
                     ")   OR die ("Impossible de sélectionner le username : ".mysql_error ());
      $get = mysql_fetch_array ($get);
      
      // on renvoit le résultat par un simple echo
      echo $get["nb"];
   }
?>

==> ce fichier doit être placé dans le même répertoire que la page formulaire & javascript


Voici maintenant le formulaire :

Code: Tout sélectionner

<form name="monFormulaire" method="POST" target="unePage.php">
   <input type="text" id="username" name="username" onkeyup="checkInscription(this);" onchange="checkInscription(this);">
   <div id="alertUsernameExistant" style="display:none;"></div>
   
   <input type="submit" id="boutonInscription" name="boutonInscription" value="S'inscrire !">
</form>

Et voilà, j'espère que je n'ai pas fait d'erreur dans les code, étant donné que je les ai un peu modifié pour les rendre plus simple (faisant en réalité une utilisation pour plusieurs champs ensemble, je l'ai modifié pour gérer qu'un seul champ).

Petite précision :
- pourquoi mettre "onkeyup" et "onchange" ? Simplement parce que si le gars a déjà rempli un formulaire avec un champ du même nom et que son navigateur le garde en cache, en tapant les première lettre le navigateur va lui afficher les derniers noms tapé dans ce champ, il suffirait de faire faire descendre dans la liste jusqu'au nom voulu et de taper sur "Tab" pour passer au champ suivant... => le champ a été changer mais ne reconnait pas la touche "Tab" dans le "onkeyup", mais le champ a pourtant bien été changer, donc reconnu par "onchange"...
Vous pourriez dire "oui mais si on met juste "onchange", ca le fera d'office..." -> oui mais au moins avec le "onkeyup", au fur et à mesure qu'il tape un nom, ca vérifie petit à petit le contenu déjà entré...

Tenez-moi au courant s'il y a un soucis...
DaMonkey

EDIT : maintenant, tous les noms de variables, de fichier, champ, formulaires etc gérez les comme vous voulez...