In questo suggerimento rapido, ti mostrerò come caricare i dati da un file XML su una pagina vuota. Lavoreremo con la funzione $ .get e implementeremo anche una gif di caricamento mentre le informazioni vengono recuperate. Presenteremo una semplice lista di libri di sviluppo web consigliati. Andiamo avanti e cominciamo.

Fase uno: rivedere lo script

Per prima cosa, diamo un'occhiata al nostro semplice file XML. Contiene solo alcuni libri con il titolo, l'immagine e la descrizione.

    le informazioni vanno qui.     le informazioni vanno qui.     le informazioni vanno qui.    

Successivamente, diamo un'occhiata al jQuery attuale.

 $ (document) .ready (function () $ .get ('myData.xml', function (d) $ ('body'). append ('
 Libri di sviluppo Web consigliati 
'); $ ( 'Body'). Append ('
'); $ (d) .find ('book'). each (function () var $ book = $ (this); var title = $ book.attr ("title"); var description = $ book.find ('descrizione ') .text (); var imageurl = $ book.attr (' imageurl '); var html ='
  
'; html + = '
 '; html + = '
'+ titolo +'
'; html + = '
 '+ descrizione +'
'; html + = '
'; $ ( 'Dl') aggiungere ($ (html)).; $ ( 'LoadingPic.') FadeOut (1400).; ); ); );

Fase due: decifrare il tempo

Poiché questo è un suggerimento, eseguirò la sceneggiatura un po 'più velocemente di quanto farei di solito. Quando il documento è pronto per essere manipolato, recupereremo il nostro file XML utilizzando la funzione "$ .get". Tra parentesi, passeremo nella posizione del file, quindi eseguiremo una funzione di callback. Userò la variabile "d" per rappresentare l'informazione che è stata estratta dal file XML. Successivamente, creeremo un tag di intestazione e un elenco di definizioni.

Continuando, cercheremo nel file XML (d) e troveremo il tag "libro". Facendo riferimento al mio documento, ci sono tre libri. Di conseguenza, avremo bisogno di eseguire il "ciascuno" metodo per eseguire un'operazione per ogni libro. Ricorda, "ognuno" è proprio come le dichiarazioni "per". È un modo per scorrere attraverso ogni elemento nel set avvolto.

Nel prossimo blocco di codice, sto definendo alcune variabili. Per ottenere il "titolo" e la "descrizione" dal nostro file XML, usiamo ".attr (valore)" - dove "valore" è uguale all'attributo all'interno del tag.

Infine, stiamo creando una variabile chiamata "html" che conterrà l'html che visualizzerà le informazioni dal nostro file XML. Assegnare semplicemente tali informazioni alla variabile non lo visualizzerà comunque sulla pagina. Per aggiungerlo alla pagina, prendiamo la lista delle definizioni e aggiungiamo la variabile. - $ ('dl'). append ($ (html));

Un'altra cosa che vale la pena ricordare è che, mentre le informazioni vengono recuperate dal file XML, verrà visualizzata una gif di caricamento standard (tramite un'immagine di sfondo). Quando i dati sono stati caricati, cattureremo l'immagine e la dissolveremo.

Hai finito

So di averlo attraversato un po 'in fretta; Quindi sentiti libero di lasciare un commento e fare tutte le domande che potresti avere. Va notato che questo script richiederà un po 'più di lavoro prima che sia pronto per un sito web reale. Devi compensare le persone con Javascript disattivato. In questo caso, se lo avessero spento, fisserebbero una pagina vuota. Devi compensare queste cose. Ma sto divagando.