ALL HTML - Tutoriel AJAX

retour

Tutoriel AJAX

Article publié le vendredi 26 janvier 2007 par Dr_von_scott.
Cet article est classé dans les catégories « Javascript, PHP, web 2.0 »

Un tutoriel léger ayant pour but de vous familiariser avec AJAX par l'exemple.<br /> Nous utiliserons 3 petites fonctions simple pour verifier les données d'un formulaire en temps reel.

Imaginons un formulaire permettant la saisie d'une garantie.
A quoi va bien pouvoir servir AJAX dans cette application :
- Verifier en direct le n° de serie de l'appareil
- Afficher des select selon le type de l'appareil
- Recuperer l'adresse complete du client

Voici l'architecture de l'exemple :
- index.php // le formulaire
- ajax.js // notre bibliotheque de scripts
- verifformu.php // ne sera pas traité dans ce tuto, il traite les $_POST de index.php et les integrent dans une base mysql

- le dossier ajax contenant :
- verifnserie.php
- ajaxrecupaddr.php
- ajaxiris.php

Commencons par créer notre formulaire

---index.php---


<html>
<head>
<title>Saisie</title>
<script src="ajax.js" type="text/javascript"></script>
</head>
<body>
<form method="post" action="verifformu.php">
<input type="hidden" name="fournisseur" value="<?php echo $_POST['fournisseur']; ?>" />
<table>
<tr>
 <th colspan="2">INFORMATIONS CLIENTS</th>
</tr>
<tr>
 <td>N° de code client</td>
 // Nous utilisons onchange car nous ne verifions pas chaque frappe mais la saisie complete
 <td><input type="text" size="6" name="cdcl" id="cdcl" onchange="ajaxcdcl()" /></td>
</tr>
<tr>
 <td>Nom du revendeur</td>
 <td><input type="text" size="20" name="revendeur" id="revendeur" /></td>
</tr>
<tr>
 <td>Adresse</td>
 <td><input type="text" size="30" name="adresserev" id="adresserev" /></td>
</tr>
<tr>
 <td>Code postal</td>
 <td><input id="coderev" type="text" size="5" maxlength="5" name="cdpostrev" id="cdpostrev" /></td>
</tr>
<tr>
 <th colspan="2">APPAREIL</th>
</tr>
<tr>
 <td>Reference de l'appareil</td>
 <td><input type="text" size="20" name="refapp" /></td>
</tr>
<tr>
 <td>N° de serie</td>
 <td><input type="text" size="20" name="nserie" id="nserie" onchange="verifnserie()"/><span id="affnserie"></span></td>
</tr>
<tr>
 <th colspan="2">CODE IRIS</th>
</tr>
<tr>
 <td colspan="2">
  <div id="iris">
  <input type="radio" onclick="ajaxiris('lavage')">&nbsp;Lavage
  <input type="radio" onclick="ajaxiris('froid')">&nbsp;Froid
  <input type="radio" onclick="ajaxiris('cuisson')">&nbsp;Cuisson
  </div>
 </td>
</tr>
<tr>
 <th colspan="2"><input type="submit" value="Valider" /></th>
</tr>
</table>
</form>
</body>
</html>

Creons maintenant la bibliotheque de scripts ajax

---ajax.js---


var xhr = null;
 
// Fonction de creation de l'objet XMLHttpRequest qui resservira pour chaques fonctions AJAX
function getXhr()
 {
  if(window.XMLHttpRequest) xhr = new XMLHttpRequest(); 
  else if(window.ActiveXObject)
   {  
    try
     {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
     }
    catch (e)
     {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
     }
   }
  else 
   { 
    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest, veuillez le mettre à jour"); 
    xhr = false; 
   } 
 }

// Premiere fonction : remplacer le contenu d'un div
// Sans recuperation de valeur
function ajaxiris(fam)
 {
  getXhr();
  xhr.onreadystatechange = function()
   {
    if(xhr.readyState == 4 && xhr.status == 200)
     {
      // Nous remplacons le contenu du div iris par le retour de "ajax/ajaxiris.php"
      document.getElementById('iris').innerHTML = xhr.responseText;
     }
   }
  xhr.open("POST",'ajax/ajaxiris.php',true);
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  xhr.send("type="+fam);
 }

//Deuxieme fonction : Vérifier que le numéro de série a le bon format
// Affichage dans un span en ayant recupéré une valeur
function verifnserie()
 {
  getXhr();
  xhr.onreadystatechange = function()
   {
    if(xhr.readyState == 4 && xhr.status == 200)
     {
      // On affiche dans le span affnserie le retour de verifnserie.php
      document.getElementById('affnserie').innerHTML = xhr.responseText;
     }
   }
  // On envoie la requete a "ajax/verifnserie.php"
  xhr.open("POST",'ajax/verifnserie.php',true);
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  // On recupere la valeur de l'input ayant pour id: nserie
  nserie = document.getElementById('nserie').value;
  // On envoie a verifnserie le nserie recupéré
  xhr.send("nserie="+nserie);
 }

// Troisieme fonction : 
//Compliquons maintenant un petit peu
// D'apres une valeur, nous voulons en afficher 3
// revendeur, adresserev, cdpostrev
// nous aurons besoin de nous connecter à une base pour recuperer les valeurs
function ajaxcdcl()
 {
  getXhr();
  xhr.onreadystatechange = function()
   {
    if(xhr.readyState == 4 && xhr.status == 200)
     {
      // Nous recuperons ce coup ci le retour dans une variable
      var chaine = xhr.responseText;
      // Nous decoupons la reponse selon le caractere choisi
      var tableau = chaine.split('£');
      // Nous appliquons les valeurs récupérées au element correspondant
      document.getElementById('revendeur').value = tableau[0];
      document.getElementById('adresserev').value = tableau[1];
      document.getElementById('coderev').value = tableau[2];
     }
   }
  xhr.open("POST",'ajax/ajaxrecupaddr.php',true);
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  cdcl = document.getElementById('cdcl').value;
  xhr.send("cdcl="+cdcl);
 }

---ajax/ajaxiris.php---


// Cet partie du code va etre inséré dans le tableau
// Ne pas oublier de garder le format du tableau
<?php
if($_POST['type'] == 'lavage')
 {
  echo '<tr>';
   echo '<td>Code iris lavage</td>';
   echo '<td>';
    echo '<select name='codiris' size="1">';
    echo '<option value="1">1</option>';
    echo '<option value="2">2</option>';
    echo '</select>';
   echo '</td>';
  echo '</tr>';
 }
if($_POST['type'] == 'froid')
 {
  echo '<tr>';
   echo '<td>Code iris froid</td>';
   echo '<td>';
    echo '<select name='codiris' size="1">';
    echo '<option value="3">3</option>';
    echo '<option value="4">4</option>';
    echo '</select>';
   echo '</td>';
  echo '</tr>';
 }
if($_POST['type'] == 'cuisson')
 {
  echo '<tr>';
   echo '<td>Code iris cuisson</td>';
   echo '<td>';
    echo '<select name='codiris' size="1">';
    echo '<option value="5">5</option>';
    echo '<option value="6">6</option>';
    echo '</select>';
   echo '</td>';
  echo '</tr>';
 }

---ajax/verifnserie.php---
// Je ne commente pas beaucoup ce script car il me parait tres simple
// Affiche juste une phrase


if(strlen($_POST['nserie']) != 9 AND $_POST['fournisseur'] == 'TRUC')
 {
  echo '<img src="images/actionko.gif" alt="Incorrect" border="0" width="20"><font color="#FF0000">Incorrect : 9 chiffres necessaires</font>';
echo '<input type="hidden" name="errnserie" value="erreur">';
 }
else if(strlen($_POST['nserie']) != 12 AND $_POST['fournisseur'] == 'MACHIN')
 {
  echo '<img src="images/actionko.gif" alt="Incorrect" border="0" width="20"><font color="#FF0000">Incorrect : 12 chiffres necessaires</font>';
echo '<input type="hidden" name="errnserie" value="erreur">';
 }
else
 {
  echo '<img src="images/actionok.gif" alt="Correct" border="0" width="20">Nombre de  chiffres correct';
 }
// Si le n° n'est pas bon, nous creons
// <input type="hidden" name="errnserie" value="erreur">
// Nous pouvons donc creer un if(isset($_POST['errnserie'])) { exit; // ou tout autre traitement }
// Pour interdire l'enregistrement des données dans verifformu.php

---ajax/ajaxrecupaddr.php---


<?php
include('connexion.php'); // connexion à la base, non expliqué ici

$req = mysql_query("SELECT nom,adresse,cdpost FROM clients WHERE cdcl = '$_POST[cdcl]'");
while($res = mysql_fetch_array($req))
 {
  // Concatenation des resultats dans une chaine
  // Utilisation d'un caractere séparateur ( £ ) que nous avons peu de chance de retrouver dans une chaine de caracteres francais.
  echo "$res[nom]£$res[adresse]£$res[cdpost]";
 }
?>

Voila, j'espere n'avoir fais aucune faute/oubli car cela m'as pris pas mal de temps pour faire ce tuto.
J'espere que ces 3 mini scripts vous aideront à mieux comprendre le fonctionnement d'AJAX.

Bon devellopement à tous :)

VOS COMMENTAIRES ...

Commenter cette publication

Commentaire publié le mercredi 07 février 2007 à 14 h 09 par Dr_von_scott: Salut à tous,

La mise en forme des parties CODE n'est pas passée.
Désolé pour la presentation en 1 ligne.
Si les validateurs peuvent modifier ca ?
Commentaire publié le lundi 19 février 2007 à 13 h 32 par Dr_von_scott: Merci :) :) :)
C'est deja largement plus lisible
Commentaire publié le vendredi 06 avril 2007 à 14 h 33 par witchgunn: ajax m'intéresse comme beaucoup d'autres langages, désormais indispensables pour les développeur. J'ai hate de terminer ce tuto, merci Dr_von_scott !
Commentaire publié le jeudi 12 avril 2007 à 00 h 35 par Liko: Attention AJAX n'est en aucun cas un language à part entière, ce n'est qu'une association de languages.

L'exemple présent démontre très bien ce principe en associant du javascript et du php. Le résultat donne sans contestation possible une application qui fonctionnera de manière asynchrone et quand on parle d'AJAX on doit évidement passer par là (AJAX = Asynchronous JavaScript And XML) mais cet exemple n'est qu'une possibilité d'AJAX.
Commentaire publié le mercredi 03 octobre 2007 à 00 h 13 par esskamal: salut merci pour ce tuto d'abord je suis un debutant, je fais mes test avec le easyphp j'ai stocker ces fichiers pour tester l'application mais je me trouve bloquer qu'on il m'a donner un problem cé la manquage du fichier verifformu.php comment je peu faire un test sans ce fichier !!!!????? ca me nerve et merci une autre fois
Commentaire publié le jeudi 04 octobre 2007 à 11 h 37 par Dr_von_scott: @esskamal

Pour te tester le script, tu peux te créer un fichier verifformu.php ainsi :

<?php foreach($_POST as $indice=>$valeur) { echo "$indice <==> $valeur<br />'; } ?>
Commentaire publié le mardi 04 décembre 2007 à 10 h 42 par bascyr: Bonjour,

J'ai du mal à identifier clairement le contenu de "tes" xhr.responseText !

Peux-tu m'éclairer?
Merci
Commentaire publié le mardi 04 décembre 2007 à 10 h 46 par bascyr: Pourrais-tu me faire partvenir l'ensemble des fichiers via un mail?
Commentaire publié le jeudi 13 décembre 2007 à 09 h 38 par Dr_von_scott: Salut,

Je n'ai pas ces fichiers, j'avais directement ecrit ceux ci pour le tutorial.

Par contre, tu peux reecrire ces lignes dans ton editeur favoris pour voir comment marche l'exemple.

Bonne journée
Commentaire publié le mardi 10 novembre 2009 à 20 h 28 par plarts: Je démarre sur Ajax,
dans cete exemple, (hors Ajax), je ne comprend pas comment
on peut avoir la variable : $_POST['fournisseur']
d'entrée de jeu par l'index.php ?
dans : <input type="hidden" name="fournisseur" ...etc...
Pierre.

Commenter cette publication

Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.

Forums de discussions associés

Discutez et échangez sur ce thème dans nos forums Javascript - DHTML - VBScript, PHP - SQL.

31/08/2010 à 18 h 09 Vérifier et boucler (3 réponses)
31/08/2010 à 12 h 30 PHP : écrire en fin de fichier (1 réponse)
30/08/2010 à 10 h 29 Redimensionnement d’image proportionnellement (0 réponse)
25/08/2010 à 15 h 06 [JS] Balise canvas sur un pocket PC (9 réponses)
24/08/2010 à 01 h 11 Problème de temps javascript (11 réponses)

all html : Le portail des webmaster

Tutoriel AJAX

VOS COMMENTAIRES ...

Forums de discussions associés

Liens sponsorisés