Aller au contenu

Comment utiliser le potentiel du XSL avec AJAX

Apprenez à utiliser les données d’un fichier XSL pour la mise en forme du contenu XML. Et utilisez ce contenu dans une page HTML via AJAX.

Il n’y a aucune liaison entre le fichier XML et le fichier XSL.

Il y a toujours 3 étapes :

  • Le chargement du fichier XML.
  • Le chargement du fichier XSL.
  • Le traitement pour associer le fichier XSL au fichier XML.

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Comment utiliser le potentiel du XSL avec AJAX

Bonjour à tous et bienvenu sur Développement Facile.

Cette fois vous allez apprendre à utiliser les fichiers XSL dans vos sites avec la technologie Ajax. Dans les cours précédents vous avez appris à utiliser d’un côté XML, de l’autre côté les fichiers textes, je vous ai également donné les bases XML, les bases XSL, cette fois, il est temps de passer à l’action, à la pratique et d’utiliser les fichiers XSL pour construire vos sites Internet avec la technologie Ajax.

Récupération et analyse XSL

On va utiliser les données du fichier XSL, pour la mise en forme du contenu XML, dans le cours précédent, vous avez vu, on chargeait le fichier XML, on l’affichait, mais ce n’est pas très agréable à l’écran pour l’utilisateur, pas très joli, là, rappelez-vous le fichier XSL c’est la feuille de style CSS du fichier XML, pour résumer. Là on va effectuer des tris de données avec XSL, et en même temps de l’affichage graphique pour que tout soit très agréable à regarder pour l’utilisateur.
Il faut savoir qu’il n’y a aucune liaison entre le fichier XML et le fichier XSL, il y a toujours trois étapes, on charge le fichier XML en premier, après le fichier XSL, et on effectue un traitement pour associer le fichier XSL avec le fichier XML.
Je vous montre le code source, ce sera beaucoup plus parlant. Alors on a une page HTML très simple en chargement le fichier XSL avec tri ou sans tri. Le code source, je vous montre le fichier XSL pour afficher le contenu, on parcourt chaque élément, on fait un tri par ordre alphabétique, il y a une condition pour mettre en valeur le prénom Alice, voilà c’est des fonctionnalités XSL que je vous ai présentées dans le cours précédent, je vous renvoie au cours consacré à XSL, concernant tout ça. Le fichier XML classique qui contient toutes les données, et ça c’est le fichier XSL sans tri, là avec le tri, il est ici, tri automatique la, il n’y a pas de tri.
On effectue un chargement, on charge un fichier XSL différents à chaque fois avec le tri et sans le tri ici, c’est juste URL qui change, tout ça vous connaissez je passe assez vite. Qu’est-ce qu’on fait ?
On récupère la réponse XML, ici, voilà, et qu’est-ce qu’on fait ?
On retourne oXhr. Là on le retourne ici, en fait ici qu’est-ce qu’on appelle ? On appelle get Data dans get data, on charge le fichier XML, on charge le fichier XSL donc c’est ce que je viens de montrer, on retourne un objet XMLHttpRequest, que l’on a ici, on fait afficher le contenu XML on passe l’objet XML, l’objet XSL et le nom de la div, qui est ici.
Qu’est-ce qu’il se passe ?
On a les deux, pour les navigateurs récents, on utilise l’objet XMTprocessor, avec le XML d’un côté le XSL de l’autre, on importe le stylesheet et après on fait affichage, on récupère la div, on fait un innerHTML, sinon on fait directement getElementById, transformNode oXsl, et ça nous affiche le contenu XML. Voilà, c’est super simple, on a associé un fichier XML à XSL, dans les deux cas, je vous montre, avec d’un côté l’objet XLTProcessor, importStyleSheet et de l’autre avec transformNode.

On charge XSL avec un tri, tri par ordre alphabétique, on a bien fait ressortir le prénom Alice, comme vous voyez sur votre écran, et sans tri, voyez, c’est dans l’ordre du fichier XML, ici, Adeline, Mathieu, Alice, Marine, et Aurélia, là c’est sans tri et avec le tri, chargement direct, donc on change uniquement cette zone-là, grâce à Ajax, c’est très puissant, et franchement en code, rien de très compliqué, getData on récupère les deux objets, ça c’est toujours la même chose, on renvoie les données, et après on les associe ici, voilà, rien de bien compliqué.

Votre plan d’actions !

Maintenant c’est à vous de jouer, c’est-à-dire vous allez pouvoir utiliser Ajax en combinant les fichiers XSL, les fichiers XML, c’est vraiment très puissant pour créer des site très interactif avec les utilisateurs et à la fois magnifique dans l’affichage des données, ne prenez pas exemple sur moi, je vous montre juste le code comment ça fonctionne, je ne suis pas graphiste donc ce n’est pas très joli, en tout cas vous avez un code qui fonctionne sur la majorité des navigateurs récents, que ce soit sur un smartphone, tablette, PC portable, PC, Apple, Safari, Mac etc. Si vous avez les questions posez-les directement sous ce cours vidéo et moi je vous dis à très bientôt sur Développement Facile.

 

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple XSL / AJAX

Et voici le code source commentés de l’exemple de chargement de fichiers XSL, XML avec la technologie AJAX.

Téléchargement du code source Exemple d'application avec des fichiers XSL et XML via AJAX

Cliquez ici pour télécharger le code source Exemple d'application avec des fichiers XSL et XML via AJAX

Choisissez vos prochains cours AJAX

Utilisez la zone commentaires, pour choisir les cours que vous souhaitez sur la technologie AJAX.

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Développer des Applications JavaScript Performantes — dès la semaine prochaine ?

TÉLÉCHARGEZ : Les codes sources du livre « JavaScript Facile » pour Créer VOS Applications — dès la semaine prochaine !

Cliquez ici pour tout recevoir >>