AJAX (Asynchronous Javascript And XML)

Auteur: Mohamed CHINY Durée necessaire pour le cours de AJAX (Asynchronous Javascript And XML) Niveau recommandé pour le cours de AJAX (Asynchronous Javascript And XML) Supports vidéo disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz non disponibles pour ce cours

Page 7: Exemple d'application: réponse en XML

Toutes les pages

Exemple d'une réponse en XML

Si vous n'avez jamais manipulé de documents XML auparavant, ne vous inquiétez pas. En AJAX on va se contenter de parcourir le document à l'aide des méthodes du DOM comme on l'a déjà fait en Javascript sur des documents HTML. Mais sachez tout de même que le XML est un langage à balises comme le HTML, sauf qu'en XML nous sommes libres de créer nos propres balises.

Le plus important encore, essayez de retaper le contenu XML tel que c'est décrit dans cet exemple, car à l'inverse du HTML, les erreurs en XML ne sont pas tolérées et le document risque de ne pas fonctionner.

Créer une liste déroulante en AJAX

Dans cet exemple on va essayer de remplir une liste de sélection en AJAX. Le contenu de la liste proviendra d'un fichier XML.

La fonction qui exécute AJAX sera appelée suite au clic sur un bouton classique. Comme pour l'exemple précédent, la page qui contient le script Javascript/AJAX s'appelle AJAX_ex3.html et le document XML qui contient la réponse est nommé AJAX_ex3.xml.

Voilà le résultat escompté:



  • Code source de la page AJAX_ex3.xml:
    • <?xml version="1.0" encoding="UTF-8" ?>
    <cours>
       <chapitre>
          <nom>HTML</nom>
          <nbr_heures>20</nbr_heures>
       </chapitre>
       <chapitre>
          <nom>HTML5</nom>
          <nbr_heures>12</nbr_heures>
       </chapitre>
       <chapitre>
          <nom>CSS</nom>
          <nbr_heures>20</nbr_heures>
       </chapitre>
    </cours>
  • Code source de la page AJAX_ex3.html:
    • <!DOCTYPE html>
    <html>
       <head>
          <style>
             body{
                text-align:center;
                font:10pt arial;
             }
             input{
                padding:10px;
                border:none;
                background-color:#CCC;
                color:#000;
                width:160px;
                border-radius:6px;
                outline:none;
                cursor:pointer;
             }
             select{
                padding:10px;
                border:solid 1px #AAA;
                color:#000;
                border-radius:6px;
                outline:none;
                width:200px;
                margin:20px;
             }
          </style>
          
          <script language="javascript">
          
             function getxhr(){
                try{xhr=new XMLHttpRequest();}
                catch(e){
                   try {xhr=new ActiveXObject("Microsoft.XMLHTTP");}
                   catch(e1){
                      try{xhr=new ActiveXObject("Msxml2.XMLHTTP");}
                      catch(e2){
                            alert("AJAX non supporté!");
                      }
                   }
                }
                return xhr;
             }
             
             function ajaxing(){
                xhr=getxhr();
                xhr.onreadystatechange=function(){
                   if(xhr.readyState==4){
                      objetXML=xhr.responseXML;
                      for(i=0;i<objetXML.getElementsByTagName("chapitre").length;i++)
                         document.getElementById("cours").options[i]=new Option(
                         objetXML.getElementsByTagName("nom").item(i).firstChild.data+
                         " : "+
                         objetXML.getElementsByTagName("nbr_heures").item(i).firstChild.data+
                         " heures"
                         );   
                   }
                }
                xhr.open("get","AJAX_ex3.xml",true);
                xhr.send("null");
             }
             
          </script>
       </head>
       <body>   
          <input type="button" value="AJAX" onclick="ajaxing()" /><br />
          <select id="cours"></select>
       </body>
    </html>
    Vous avez constaté que l'on parcourt le document XML comme si on parcourait un document HTML grâce aux méthodes de DOM.

    Par exemple, pour afficher (dans une boite de dialogue alert())le contenu de la première balise <nom> du document XML on fait ceci:
    objetXML=xhr.responseXML;
    alert(objetXML.getElementsByTagName("nom").item(0).firstChild.data);
    L'objet firstChild permet d'accéder au premier élément enfant de la balise en question (balise <nom> dans ce cas). L'attribut data permet de retourner la valeur de cet enfant en tant que chaîne de caractères.

    On peut remplacer data par nodeValue. Le code précédent devient alors:
    objetXML=xhr.responseXML;
    alert(objetXML.getElementsByTagName("nom").item(0).firstChild.nodeValue);

    Traitement d'une réponse XML en vidéo