AJAX (Partie 3) - Traitement d'une réponse XML

Bonjour à tous et bienvenue dans cette nouvelle leçon d'AJAX où nous allons voir comment extraire les données d'une réponse XML. Dans la première vidéo de cette série, j'ai mentionné que suite à une requête passée via AJAX, le serveur peut envoyer une réponse non structurée comme du texte brut, du contenu HTML prêt à être intégré directement, ou une réponse structurée où les données sont bien organisées. Ce qui facilite à JavaScript leur extraction afin de les inclure dans des traitements ultérieurs. Les formats les plus connus pour ce type de réponses sont XML et JSON. La lettre X de l'acronyme AJAX fait référence à XML, ce qui signifie que dans ses débuts AJAX était destiné à accueillir la réponse du serveur sous forme de document XML. Bien que c'est un format de données de moins en moins utilisé avec AJAX, XML offre quand même une bonne présentation des données à l'aide de balises un peu comme du HTML. XML signifie Extensible Markup Language. Il a été créé afin de permettre l'échange de données entre des systèmes hétérogènes. Cependant, ce format célèbre permet aussi le stockage de données structurées et c'est dans ce contexte qu'il est utilisé en AJAX. Le document courant représente la réponse du serveur. Il contient des informations qui concernent certains langages utilisés en développement web. La première ligne contient le prologue avec le tag XML en spécifiant la version 1.0 et le jeu de caractères UTF-8. Ensuite nous avons la balise principale ou bien la balise racine suivie de différents éléments. Chacun d'entre eux a un nom et un rôle. Dans le code de la dernière fois, si vous vous rappelez bien, nous avons récupéré une réponse texte du serveur. Et quand on exécute, on aura ce comportement sur le navigateur. Ça affiche la réponse du serveur en guise de texte. Pour cette fois, notre réponse est stockée dans un fichier XML. Alors il est évident qu'on va changer la ressource. Contenu.txt par contenu.html. Si on ne change rien du tout, maintenant quand j'exécute, j'ai bien la réponse qui provient du serveur sous forme de texte. En fait, le document entier est affiché avec du JavaScript et puisque ces balises ne sont pas reconnues, c'est-à-dire la balise programmation, langage, nom, etc., le navigateur ne les reconnaît pas, du coup il les ignore. Alors on affiche que du texte brut. Mais ce n'est pas notre objectif. Ce que nous allons faire, c'est récupérer la réponse sous forme de XML plutôt que sous forme texte. Alors on va modifier ce bout de code. Dans un premier temps, nous allons commenter cette ligne. Là, je vais récupérer la réponse XML en faisant ceci. Je vais mettre objXML= xhr.responseText. Alors j'ai bien spécifié que la réponse attendue par le serveur est une réponse XML et non pas une réponse texte, que je vais affecter à la variable objXML. Maintenant je vais afficher objXML pour voir ce que ça va donner. Quand j'exécute, ça affiche Object XML Document, donc il est bien reconnu en tant que tel. Maintenant, il faut savoir que la réponse envoyée par le serveur est bien structurée, c'est-à-dire on va essayer de la parcourir en utilisant les méthodes du DOM qu'on a déjà vu en JavaScript, mais on va les appliquer sur le document XML et non pas sur le document courant. Alors je vais décommenter cette ligne. La première chose à faire, c'est que je vais afficher le nombre d'éléments que le document XML contient. Dans ce cas, j'ai 3 éléments, c'est-à-dire 3 balises langage. Et j'attends bien que sur navigateur j'aurai la valeur 3 qui sera affichée. Alors j'enlève ça et je mets obXml. Et on mettra la méthode qu'on a déjà vue avant, getElementsByTagName. Le nom de balise que je vais utiliser dans ce cas, c'est par exemple langage. Je mettrai .length. Vous vous rappelez bien que la méthode getElementsByTagName renvoie un tableau qui contient les différents éléments. Alors il suffit d'afficher sa longueur. J'exécute et ça m'affiche 3. L'idée maintenant c'est d'afficher les éléments, c'est-à-dire imaginez que je veux afficher la valeur HTML au sein du navigateur. Maintenant je vais cibler la balise nom comme ça. Voilà, alors je vais mettre ici la balise nom et comme il y en a 3 dans le document, donc il faut spécifier l'index de l'élément souhaité. Je mettrai .item pour dire le premier élément et ensuite j'affiche le texte qu'il contient à l'aide de l'attribut textContent. Exécutons. Et ça m'affiche HTML. Maintenant si je veux afficher CSS, il suffit de changer l'index. Je mettrai 1 pour dire le deuxième élément. Voilà. De la même manière si je veux afficher le rôle du troisième langage qui est JavaScript dans ce cas, alors je mettrai le tag role avec l'index 2 pour dire le troisième élément parce que ça commence à 0. Et ça m'affiche bien le rôle attendu. À la place de textContent, je peux mettre .firstChild pour dire le premier élément parce que je suis là. Maintenant je vais accéder au premier élément qui est le texte mais en tant qu'objet et je vais afficher sa valeur textuelle grâce à l'attribut nodeValue. J'exécute. Ça donne la même chose. Je peux remplacer notre value par data comme ça et ça donne le même résultat. Donc vous avez vraiment le choix entre plusieurs attributs à utiliser. C'est vrai qu'il y a une différence entre elles, mais dans ce contexte, c'est-à-dire que dans ce genre d'application, ils font pratiquement la même chose. Alors autant choisir la méthode la plus simple. Je mettrai .textContent. Alors là, c'était juste une démonstration de comment se servir de la réponse XML provenant du serveur. Bien entendu, vous pouvez adapter le traitement à votre besoin quand vous le souhaitez. Vous pouvez même programmer des boucles afin de parcourir le document XML d'une manière dynamique. Merci pour votre attention et à la vidéo prochaine.