Dans cette astuce, je vais vous montrer comment charger des données d'un fichier XML sur une page vierge. Nous allons travailler avec la fonction $ .get et implémenter un gif de chargement pendant la récupération des informations. Nous afficherons une simple liste de livres de développement Web recommandés. Allons-y et commençons.

Première étape: réviser le script

Voyons d’abord notre fichier XML simple. Il ne contient que quelques livres avec leur titre, leur image et leur description..

    info va ici.     info va ici.     info va ici.    

Ensuite, jetons un coup d'oeil à la réelle jQuery.

 $ (document) .ready (function () $ .get ('myData.xml', fonction (d) $ ('body').. append ('
 Livres de développement Web recommandés 
'); $ ('body'). append ('
'); $ (d) .find ('book'). each (fonction () var $ book = $ (ceci); var title = $ book.attr ("titre"); var description = $ book.find ('description ') .text (); var imageurl = $ book.attr (' imageurl '); var html ='
  
'; html + = '
 '; html + = '
'+ titre +'
'; html + = '
 '+ description +'
'; html + = '
'; $ ('dl'). append ($ (html)); $ ('. loadingPic'). fadeOut (1400); ); ); );

Deuxième étape: le temps de déchiffrement

Comme il s'agit d'un conseil rapide, je vais parcourir le script un peu plus rapidement que d'habitude. Lorsque le document est prêt à être manipulé, nous allons récupérer notre fichier XML à l'aide de la fonction "$ .get". Entre parenthèses, nous indiquerons l'emplacement du fichier, puis nous exécuterons une fonction de rappel. J'utiliserai la variable "d" pour représenter les informations extraites du fichier XML. Ensuite, nous allons créer une balise de titre et une liste de définitions.

En continuant, nous allons rechercher dans le fichier XML (d) et trouver la balise intitulée "livre". En revenant à mon document, il y a trois livres. Par conséquent, nous devrons exécuter la méthode "each" afin d'effectuer une opération pour chaque livre.. Rappelez-vous que "chaque" est comme les déclarations "pour". C'est un moyen de parcourir chaque élément de l'ensemble emballé.

Dans le bloc de code suivant, je définis quelques variables. Pour obtenir le "titre" et la "description" de notre fichier XML, nous utilisons ".attr (valeur)" - où "valeur" est égal à l'attribut dans la balise.

Enfin, nous créons une variable appelée "html" qui contiendra le html qui affichera les informations de notre fichier XML. Le simple fait d'attribuer cette information à la variable ne l'affichera cependant pas sur la page. Pour l'ajouter à la page, nous saisissons la liste de définitions et ajoutons la variable. - $ ('dl'). append ($ (html));

Une autre chose à noter est que, pendant que les informations sont extraites du fichier XML, nous afficherons un gif de chargement standard (via une image d’arrière-plan). Une fois les données chargées, nous allons saisir l'image et la faire disparaître..

Vous avez terminé

Je sais que j'ai traversé cela assez rapidement; Alors n'hésitez pas à laisser un commentaire et poser toutes les questions que vous pourriez avoir. Il convient de noter que ce script nécessitera un peu plus de travail avant de devenir prêt pour un site Web réel. Vous devez compenser pour les personnes qui ont Javascript désactivé. Dans ce cas, s'ils l'avaient, ils regarderaient une page blanche. Vous devez compenser de telles choses. Mais je m'égare.