In questa lezione presentiamo due funzioni grazie alle quali possiamo leggere e mostrare un feed RSS, in particolare useremo per l'esempio il feed di "edit", il blog di HTML.it .
In questa pagina vediamo il risultato finale che raggiungiamo con questa lezione.
La prima funzione è molto semplice: restituisce il contenuto presente in un nodo di un documento XML.
Listato 18. Funzione leggiContenuto()
// funzione per leggere il contenuto presente
// all'interno di un nodo XML, ad esempio
// su <guida>ajax</guida> restituisce solo ajax
function leggiContenuto(item, nomeNodo) {
return item.getElementsByTagName(nomeNodo).item(0).firstChild.nodeValue;
};
Non è una funzione complessa ma è utile a far rimanere leggibile il codice di parsaXml() vera aggiunta di rilievo per l'interazione XML. Questa funzione genera una lista XHTML con gli elementi presi dal file RSS. Soffermarci ad esaminarne il codice, i commenti ci aiuteranno a comprenderne il funzionamento.
Listato 19. Parsare l'XML di edit, il blog di HTML.it
function parsaXml(xml) {
// variabili di funzione
var
// Otteniamo la lista degli item dall'RSS 2.0 di edit
items = xml.getElementsByTagName("item"),
// la variabile di ritorno, in questo esempio, è testuale
risultato = "",
// questa variabile conterrà tutti gli item raggruppati
// per categoria
nodoItem = new Object(),
// questa variabile verrà utilizzata come stringa temporanea
// durante le operazioni di parsing
categoria;
// ciclo di lettura degli elementi
for(var a = 0, b = items.length; a < b; a++) {
// peculiarità dell'RSS 2.0 di edit è la presenza del tag
// author per ogni item. Non presente invece negli item
// di feedburner ed in questo caso non viene considerato
if(items[a].getElementsByTagName("author").length === 1) {
// assegnamo la categoria alla stringa temporanea
categoria = leggiContenuto(items[a], "category");
// se l'oggetto nodoItem non ha ancora alcun elemento
// per la categoria appena letta
if(!nodoItem[categoria])
// si istanzia l'oggetto.categoria come nuovo array
nodoItem[categoria] = new Array();
// aggiunta di un item alla categoria assegnata
// [length al posto di push serve per evitare errori con vecchi browser]
nodoItem[categoria][nodoItem[categoria].length] = ({
titolo: leggiContenuto(items[a], "title"),
link: leggiContenuto(items[a], "guid"),
data: leggiContenuto(items[a], "pubDate"),
autore: leggiContenuto(items[a], "author")
});
};
};
// una volta popolato l'oggetto nodoItem con categorie
// ed una lista di post per ogni categoria
// non resta che popolare la variabile di ritorno
// con una lista non ordinata di informazioni
risultato = "<ul>";
for(categoria in nodoItem) {
// per ogni categoria si aggiunge un punto alla lista non ordinata
risultato += "<li><strong>" + categoria +
"</strong><ul>";
// per ogni elemento dell'array si aggiungono
// le informazioni alla lista
for(var a = 0, b = nodoItem[categoria].length; a < b; a++) {
risultato +=
"<li><a href=\"" +
nodoItem[categoria][a].link +
"\">" +
nodoItem[categoria][a].titolo +
"</a>, di " +
nodoItem[categoria][a].autore +
"<br /><span>" +
nodoItem[categoria][a].data + "</span></li>";
};
// chiudiamo la lista creata
risultato += "</ul></li>";
};
// chiusura della lista non ordinata di categorie
risultato += "</ul>";
return risultato;
};
Aggiungendo queste 2 funzioni la pagina sarà in grado di leggere il feed e di mostare una lista non ordinata e suddivisa per categorie delle ultime novità inserite all'interno del blog.
L'ultima cosa da fare è salvare l'RSS come testo.txt nella stessa cartella della pagina, oppure salvarlo come "edit.xml" assicurandosi di aver cambiato l'href del link.
Listato 20. Il codice XHTML
<body>
<div>
<h1>Request XML</h1>
<div id="contenuto-dinamico">
Per leggere il feed RSS 2.0 di edit, clicka su
<a
href="edit.xml"
onclick="return caricaXML(this.href);"
onkeypress="return this.onclick();"
tabindex="1"
>
questo link
</a> .
</div>
</div>
</body>
Ora che si è in grado di effettuare richieste in lettura sia testuali sia XML, gli orizzonti delle pagine sviluppate potrebbero già allargarsi ma prima di fantasticare è necessario fare alcune considerazioni su quanto appreso fino ad ora. Ecco quindi il momento di presentare la prossima lezione inerente le problematiche tipiche dello sviluppo in AJAX.
Ultimi articoli JavaScript
PhantomJS, headless browser per test con JavascriptIl tool ideale per realizzare, da terminale, operazioni in remoto su... |
Creare e leggere QR Code in JavaScriptApplicazioni 'QR Code enabled' per il Web e per il mobile,... |
Jquery UI Map: web-mapping con Google Maps e jQueryUn plugin di jQuery UI per intefacciare applicaizoni Web/mobile con... |
Scrollorama e Scrolldeck, slideshow d'effetto con jQueryPlugin jQuery per ottenere Slideshow con diversi effetti di scrolling |
jCanvas, un primo semplice graficoAlla scoperta della libreria jCanvas, per semplificare il disegno e... |
Guide JavaScript
Guida Node.jsIl framework che permette di per usare V8, l'interprete JavaScript... |
Canvas, guida ai frameworkCanvas, tra gli elementi di HTML5 è forse quello di maggior impatto.... |
Guida Javascript: tecniche avanzateUna guida dal taglio pratico per approfondire la programmazione a... |
Newsletter @JavaScript
Ogni martedì, direttamente nella tua e-mail: guide, articoli, script, novità e approfondimenti tecnici su JavaScript.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso JQuery e Ajax per Webmaster03 Luglio 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |