Comment utiliser facilement les Bases du XML avec AJAX

fermer la fenetre

Des Applications Performantes Sans Vous Prendre La Tête !

Recevez la formation "Développement Facilte" GRATUITEMENT
Avec tous les Codes Sources Commentés
 
(Les événements, la programmation orientée objets, les modèles de conception, Les éditeurs, les outils, 
l'efficacité, CSS3, HTML5, JavaScript, jQuery, Dojo...)

Renseignez votre prénom et votre adresse email ci-dessous :

Pour utiliser la technologie AJAX, vous avez besoin de connaitre le fonctionnement du langage XML.

Dans la formation ci-dessous, retrouvez les bases pour commencer avec les fichiers XML.

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

Comment utiliser facilement les Bases du XML avec AJAX

Bonjour à tous et bienvenu sur Développement Facile.

Voici un nouveau cours dédié à la technologie Ajax, comme je vous le dit, il y aura plusieurs cours et on va monter crescendo ensemble, dans votre apprentissage et l’utilisation de la technologie Ajax qui justement, assemble trois technologies différentes, à savoir le JavaScript, le CSS3 et HTML 5 et là vous allez apprendre des bases du fonctionnement XML parce qu’avec Ajax, on va récupérer des informations de fichiers XML, donc je vais vous donner très rapidement les bases pour que vous sachiez utiliser XML.

Le XML

Si vous ne connaissez pas XML, il faut savoir que c’est un langage de balises, donc vous pouvez créer vos propres balises XML, c’est ça qui représente toute la puissance du langage XML, il faut savoir que les balises sont sensibles aux majuscules et aux minuscules, faites bien attention. Toutes les balises que vous ouvrez dans le fichier XML doit être obligatoirement fermée, et les balises doivent être correctement imbriquées, si vous mettez une balise1, ici, balise2 à l’intérieur, la fermeture de la balise2 se fait juste ici, à l’intérieur de la fermeture de la balise1.
Et un document XML doit obligatoirement comporter une racine, un nœud racine.

Document XML

Le document XML, il commence juste par la ligne que vous voyez sur votre écran, XML version, la version du XML et le type d’encodage. Vous verrez souvent de l’iso 9000 et quelques en encodage, moi je vous conseille d’utiliser de l’utf-8, c’est très pratique si vous communiquez en Ajax via JavaScript, ou avec du Flash, ou avec du PHP, utilisez toujours un encodage utf-8, au moins les accents passeront correctement.
Vous pouvez également utiliser du CSS, un fichier XML vous pouvez l’ouvrir avec votre navigateur Internet, si vous ouvrez sans fichiers CSS, il ne sera pas très lisible, pas très joli, vous pouvez associer votre fichier XML à un document CSS, pour créer un affichage très sympa.

Exemple balises XML

Voici là, sur votre écran, vous voyez un exemple de fichier XML tout simple avec la première ligne en codage utf-8, la deuxième ligne, on précise le fichier CSS qui sera utilisé, justement, pour mettre en forme ce document XML, quand vous allez l’afficher dans votre navigateur, ensuite vous avez le nœud racine, c’est annuaire et dans annuaire vous avez plusieurs nœuds personnes, des blocs personnes qui sont composés d’un nom, d’un prénom, d’un téléphone, et d’un mail, et vous en avez plusieurs, vous pouvez en mettre autant que vous voulez toujours.
Vous avez le nœud personne, le nœud nom, le noeud prénom, noeud téléphone, nœud mail, la classe, classe développeur dans le nœud personne c’est un attribut classe, c’est un attribut, c’est les termes que l’on utilise.
Voilà un peu un exemple très simple de fichier XML.

L’affichage avec CSS

Avec l’affichage CSS vous définissez les nœuds annuaires personnes, comme vous voyez sur votre écran, vous définissez padding-left à 10, font-family arial, font size 14, le nœud nom avec un display type block, la largeur de 250 pixels, la taille de la police, etc. Pour chaque nœud, vous définissez, dans votre document CSS, la mise en forme que vous souhaitez.

Exemple d’application

Je vous montre un exemple de code source, ce sera beaucoup plus parlant pour vous.
Alors, vous avez sur votre écran le résultat de l’affichage du fichier XML, si j’enlève le fichier CSS, regardez, et que je fais le rechargement, votre fichier XML s’affiche comme ça, avouez que ce n’est vraiment pas terrible.
Je remets le fichier CSS, je recharge la page, et donc, qu’est-ce qu’il se passe ?
Dans le fichier CSS vous avez annuaire personne, donc avec un planning left de 10, la taille de la police par défaut est de 14, et on utilise de la police Arial, le nom on l’affiche plus gros avec une couleur définie, vous voyez, tout simplement, une couleur de fond, excusez-moi, pardon, et une taille de la police plus grande, ensuite vous avez le prénom avec une couleur différente, le numéro de téléphone avec une couleur différente écrit en gras, et le mail écrit tout petit en italique, vous voyez, donc ça permet au fichier CSS d’afficher votre fichier XML, là il est beaucoup plus lisible votre fichier XML, et vous pouvez, bien évidemment, rajouter des éléments, donc qu’est-ce qu’on va mettre ?
On rajoute une nouvelle personne, tout simplement, donc la classe, c’est la fonction que je mets, un numéro de téléphone, voilà, et l’adresse mail et donc là vous avez rajouté un élément dans votre fichier XML, vous le rechargez, cet élément apparaît automatiquement avec l’affichage que vous avez défini.

Votre plan d’actions !

Maintenant vous saurez comment mieux utiliser les fichiers XML, vous saurez de quoi ça parle, c’est très utilisé avec Ajax, si vous avez des questions, posez-les directement sous ce cours vidéo, moi je vous dis à très bientôt sur Développement Facile.

 

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple XML

Et retrouvez l’exemple complet et commenté utilisé pendant le cours.

Downloads

Choisissez les prochains cours XML

Pour mieux répondre à vos besoins, profitez de la zone commentaire pour choisir les prochains cours dédiés au langage XML.

Créez des Applications Performantes avec la Formation Gratuite Développement Facile !

Recevez des Cours Vidéos avec les codes sources 
(Les événements, la POO, les modèles de conception, Les éditeurs, 
efficacité, CSS3, HTML5, JavaScript, jQuery, Dojo...)

1 Comment

  • Hariniaina

    22 septembre

    Bonjour,

    Est-ce que vous pouvez donner des informations sur comment récupérer des données via des liens xml pour afficher des données spécifiques mises à jour automatiquement dans un seul tableau (dans une page html).

    Je vous en remercie d’avance