Lecture d’un fichier XML avec jQuery AJAX

Lecture d’un fichier XML avec jQuery AJAX

  1. Objectifs

    • Etre capable de lire un fichier XML avec Jquery et AJAX
  2. Présentation

    • Dans ce tutoriel , nous récupérons les données présentes au format XML et affichons le contenu récupéré sur la page Web et le mettons à jour en temps réel, sans recharger la page html.
    • Javascript permet de manipuler le DOM, qui n’est rien d’autre qu’un document XML. On peut aussi utiliser Javascript pour lire des données XML, via l’AJAX.
    • Ce tutoriel peut être réalisé à l’aide d’un simple éditeur de texte. Il nécessite des connaissances de base en html, JavaScript, PHP et XML.



  3. Lire un fichier XML

    • Pour commencer, nous allons créer un fichier du nom de livre.xml. Ce fichier contiendra une liste des livres.
    • <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
      <reponse>
        <livres>
          <livre>
            <titre>AJAX et PHP : Comment construire des applications web réactives</titre>
            <isbn>978-2100506842</isbn>
          </livre>
          <livre>
            <titre>Pratique de MySQL et PHP</titre>
            <isbn>978-2100523368</isbn>
          </livre>
          <livre>
            <titre>Tout sur le web 2.0 et 3.0, 2e édition</titre>
            <isbn>978-2100543427</isbn>
          </livre>
        </livres>
      </reponse>
      
    • Pour lire un fichier XML, on utilise généralement la fonction $AJAX
    • $(document).ready(function(){
      });
    • Dans cette fonction, nous allons créer la requête Ajax. La requête$AJAX qui demande quatre paramètres
    • $.ajax({
         type: "GET",
         url: "livre.xml",
         dataType: "xml",
         success: function(xml) {
       }
      });
    • La méthode find()
      • La méthode find() renvoie les éléments descendants de l’élément sélectionné.
      • Un descendant est un enfant, un petit-enfant, un arrière-petit-enfant, etc.
      • Une fois le fichier chargé, il nous faut maintenant lire sont contenu. Nous allons donc utiliser la méthode find() afin de récupérer tous les éléments de notre arbre XML.
      • $(xml).find('livres').each(function(){
        });
    • La méthode attr()
      • La méthode attr() permet d’obtenir la valeur d’un attribut pour le premier élément de l’ensemble d’éléments correspondants ou définir un ou plusieurs attributs pour chaque élément correspondant.
      • La méthode jQuery attr() est utilisée pour définir ou renvoyer les attributs et les valeurs des éléments sélectionnés.
      • Pour renvoyer la valeur d’un attribut:
        • $ (sélecteur) .attr (attribut)
      • Pour définir un attribut et une valeur:
        • $ (sélecteur) .attr (attribut, valeur)
      • Pour définir un attribut et une valeur à l’aide d’une fonction:
        • $ (sélecteur) .attr (attribut, fonction (index, valeur actuelle))
      • Pour définir plusieurs attributs et valeurs:
        • $ (sélecteur) .attr ({attribut: valeur, attribut: valeur, ...})

          Paramètre La description
          Attribut Ce paramètre est utilisé pour spécifier le nom de l’attribut.
          Valeur Ce paramètre est utilisé pour spécifier la valeur de l’attribut.
          Fonction (index, valeur actuelle) Il s’agit d’un paramètre pour spécifier une fonction qui renvoie une valeur d’attribut à définir.

          • Index:Il est utilisé pour recevoir la position d’index de l’élément dans l’ensemble.
          • Currentvalue: Il est utilisé pour fournir la valeur d’attribut actuelle des éléments sélectionnés.
      • Une fois que tous les éléments sont récupérés, il nous faut alors récupérer les données de chaque élément grâce à la fonction attr() et la fonction find().
      • $(document).ready(function(){
          $.ajax({
            type: "GET",
            url: "livres.xml",
            dataType: "xml",
            success: function(data) {
              $(data).find('livre').each(function(){
        var info='<li><b>ISBN:</b> '
                +$(this).find("isbn").text()+'</li><li><b>Titre:</b> '
                +$(this).find("titre").text()+'</li>' ;     
        $("ul").append(info);
        });
            }
           });
         }); 
    • Le résultat obtenu sera :
    • Lecture d'un fichier XML avec jQuery AJAX

  4. Application 03

    1. Énoncé
      • Téléchargez le fichier cours.rar et placez-le dans votre dossier de projet.
      • Utilisez AJAX via jQuery pour récupérer le fichier dans la page.
      • Créez un groupe pour chaque <cours> dans le fichier XML, créez une ligne avec le nom de contenu et les divers descriptions.
      • Le schéma de la figure suivante décrit le résultat souhaité:
      • Lecture d'un fichier XML avec jQuery AJAX

    2. Solution
      • $(document).ready(function(){
          $.ajax( {
                   type: "GET",
                   url: "cours.xml",
                   dataType: "xml",
                   success: function(xml) 
                            {
                              $(xml).find('cour').each(function(){
                                   var id = $(this).attr('id');
                                   var titre = $(this).find('titre').text();
                                   var url = $(this).find('url').text();
                                   $('<div class="items" id="link_' + id + '"></div>').html('<a href="' + url + '">' + titre + '</a>').appendTo('#Div_XML');
                                   $(this).find('contenues').each(function(){
                                                       var chapitres = $(this).find('chapitres').text();
                                                       var tutoriel = $(this).find('tutoriel').text();
                                                       var application = $(this).find('application').text();
                                                      var tp = $(this).find('tp').text();
                                                       var serie = $(this).find('serie').text();
                                                       var examen = $(this).find('examen').text();
                                                        var qcm = $(this).find('qcm').text();                                               
                                                       var projet = $(this).find('projet').text();
                                                       $('<div class="left"></div>').html('Nombre de chapitres :<b>' +chapitres+'</b>').appendTo('#link_'+id);
                                                       $('<div class="left"></div>').html('Nombre de tutoriel :<b>' +tutoriel+'</b>').appendTo('#link_'+id);
                                                       $('<div class="left"></div>').html('Nombre d\'application :<b>' +application+'</b>').appendTo('#link_'+id);
                                                       $('<div class="left"></div>').html('Nombre de tp :<b>' +tp+'</b>').appendTo('#link_'+id);
                                                       $('<div class="left"></div>').html('Nombre de serie :<b>' +serie+'</b>').appendTo('#link_'+id);
                                                       $('<div class="left"></div>').html('Nombre d\'examen :<b>' +examen+'</b>').appendTo('#link_'+id);
                                                       $('<div class="left"></div>').html('Nombre de qcm  :<b>' +qcm+'</b>').appendTo('#link_'+id);
                                                       $('<div class="left"></div>').html('Nombre de projet :<b>' +projet+'</b>').appendTo('#link_'+id);
        
                                                   });
                                 });
                             }
               });
         });
        
        



Abonnez vous à notre chaîne YouTube gratuitement