Apprenez à utiliser des données provenant d’un fichier xml pour renseigner le contenu de votre page HTML.
Et tout cela grâce à la technologie AJAX, sans recharger la page 😉
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment utiliser la puissance du XML avec AJAX
Bonjour à tous et bienvenu sur Développement Facile.
On continu ensemble à passer directement à la partie pratique pour utiliser les fonctionnalités Ajax dans vos sites Internet. Cette fois, vous allez apprendre à charger des fichiers XML, rappelez-vous dans le cours précédent vous avez appris à utiliser des fichiers texte et même à stocker une commande JavaScript dans le fichier texte, charger le fichier texte, et exécuter la commande JavaScript. Si vous ne l’avez pas vu je vous renvoie au cours précédent, je rajouterai un lien sous ce cours, comme ça vous pourrez y accéder directement, donc là le but c’est d’utiliser les fichiers XML. Récupération et analyse XML
Il y a une page HTML, votre site Internet, l’utilisateur interagit et on va charger des données qui proviennent d’un fichier XML, tout ça en arrière-plan sans que l’utilisateur, on ne va pas dire, s’en rende compte, parce qu’il sait que quand il clique, il va se passer quelque chose, mais en tout cas d’une façon transparente pour lui, on passe tout de suite à la pratique et au code source.
Alors c’est comme le cours dernier, vous avez un bouton pour charger un fichier XML, on va afficher. Le fichier XML, vous connaissez par cœur maintenant, avec l’encodage des données, le fichier HTML vous commencez à le connaitre par cœur, un bouton de l’URL du fichier, et je vous montre une astuce qui va vous servir, si vous n’avez pas vu dans les cours précédents, j’ai rajouté ça, à quoi ça sert ?
Si vous utilisez Ajax, vous chargez des fichiers XML ou des fichiers textes, le navigateur va les mettre en cache, et si vous faites des modifs, le navigateur va utiliser la version en cache au lieu de charger la dernière version et donc, vos internautes ne verront pas les modifications, problèmes de cache, c’est courant, ça arrive, on est tous tombé dans ce piège-là, moi le premier. J’envoie une valeur random avec mat.random, ça fait que l’URL est aléatoire, navigateur il recharge à chaque fois le fichier, vous pouvez le modifier en direct, vos visiteurs, vos internautes verront les modifications direct, vous n’avez plus aucun problème de cache avec cette technique. C’est une technique utilisée par les professionnels, je vous la donne c’est cadeau. Qu’est-ce qu’on fait ?
Ça vous connaissez, on va charger un fichier XML, le fichier transmis, ici, on récupère la réponse, le document, et on affiche le contenu du fichier XML. Qu’est-ce qu’on fait pour afficher le contenu ?
Ici, on ouvre, on demande au serveur, envoie moi le fichier XML, il n’y a pas de mise en cache, send null on récupère les données en direct. Là pour affichage qu’est-ce qu’on fait ?
Elle est ou cette fonction d’affichage ? Elle est ici, on a bien notre objet XML, on récupère ByTagName, tag name personne et tag name personne tout simplement on les récupère, et ensuite on va parcourir tous nos items, on a un tableau item en fait, on va récupérer tous les tag name personne, ça nous a créé un tableau, on va parcourir ce tableau, et afficher tous les éléments, là on aura 1, 2, 3, 4, 5 valeurs dans notre tableau. Et à chaque fois, i donc index 0, index 1, jusqu’à 4, on récupère ByTagName le nom, on récupère dans personne le nom, le prénom, le téléphone et le mail, donc nom, prénom, téléphone mail, et sur l’attribut de l’item, on récupère l’attribut qui s’appelle classe, attribut classe, getNameItem.nodeValue la valeur, on récupère la valeur que l’on va afficher.
Vous avez un XML vraiment très simple, avec un attribut, des nœuds, et ici comment les récupérer, donc là on récupère tous les nœuds personnes, ont créé un tableau, on va parcourir notre tableau, et dans chaque élément de notre tableau, on récupère nœud prénom, la première valeur forChild, les données.
Pareil, la première valeur, le premier fils, les données, l’attribut qui s’appelle classe, la valeur et en créer notre contenu de la div, ce qui donne chargement du fichier XML et voilà l’affichage.
Simple comme bonjour, on a bien chargé le fichier XML avec la valeur aléatoire pour éviter le cache, je refais un chargement, ce n’est pas la même valeur, il n’y a pas eu de mise en cache, le navigateur à rechargé encore l’élément et donc ça c’est le document ça contient toutes les données XML. Vraiment très simple, on peut parcourir également tous le DOM avec les données que vous avez.
Maintenant avec Ajax et XML, le fichier texte ce n’est pas très simple à analyser avec JavaScript, alors qu’un fichier XML, vous avez vu avec les méthodes getElementByTagName.attribut pour récupérer les attributs, node value forChild, avec ces méthodes JavaScript, vous accédez directement aux données XML qui vous intéressent, une seule boucle et vous avez parcouru vos fichiers XML et vous l’avez affiché dans votre navigateur, très rapidement. A votre tour d’utiliser Ajax, XML, les fichiers textes, pour créer des sites très sympas, très interactifs avec vos internautes. Si vous avez des questions, comme d’habitude voulez les posez sous ce cours vidéo, moi je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple AJAX / XML du cours
Retrouvez le code source commenté de l’exemple du cours.
Téléchargement du code source Utilisez les fichiers XML avec AJAX
