Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » Effetti e controlli Javascript

Pagine:

RSS

Gestire file RSS con Prototype

di: Alvin Laini 29 Dicembre 2008

Come si diceva poco fa, all'elemento HTML select, tramite l'ausilo del metodo Event.observe della libreria Prototype, verrà associato il gestore di eventi onChange in modo tale che quando l'utente selezionerà un canale, tramite il costrutto Ajax.Request sempre del framework Prototype, verrà caricato in memoria l'URL del canale selezionato e al completamento della richiesta, la risposta sarà salvata formato XML in una variabile globale di nome "xml" (xml=transport.responseXML;).

Una volta che il nostro file RSS sarà stato caricato in memoria non ci resta che analizzarlo! Questo compito sarà affidato alla funzione Javascript visualData, che effettuerà il lavoro di estrazione dei vari item. Nel nostro caso sarà estratto da ciascun elemento item i relativi sottonodi title, link e description, contenenti rispettivamente il titolo, il link e la descrizione del nostro ipotetico articolo. Ma non perdiamoci troppo in chiacchere ed analizziamo insieme passo per passo il codice:

//Formatterà l'RSS per mostrarlo a video
function visualData()
{
//Inizializzo il mio contenuto
var html="";
//Imposto in doc il mio elemento radice
var doc=xml.documentElement;
//Estraggo i vari nodi 'item' che compongono il mio file
var items=doc.getElementsByTagName('item');

for(var i=0; i < items.length; i++)
{
var title=items[i].getElementsByTagName('title')[0].firstChild.data;
var link=items[i].getElementsByTagName('link')[0].firstChild.data;

html +="<a href='" + link + "'>" + title + "</a><br>";

//Se la checkbox per i dettagli è selezionata visualizzo a video ulteriori info
if($('dettagli').checked)
{
var description=items[i].getElementsByTagName('description')[0].firstChild.data;
html +="<span class='description'>"+ description +"</span><br>";
}
}
//Scrivo i dati precedentemente ciclati nel mio contenitore
$('feedData').innerHTML=html;

}

xml.documentElement ricava il nodo radice del flusso RSS;
tramite un ciclo for vengono iterati tutti i nodi item contenuti all'interno del documento RSS, il metodo Javascript getElementsByTagName() ci permetterà di prelevare all'interno del flusso XML il nodo che ci interessa;
una volta all'interno dei vari nodi item sarà possibile prelevare il contenuto dei relativi sottonodi utilizzando il costrutto getElementsByTagName('nodo')[0].firstChild.data;
verrà poi preparata una stringa in formato HTML che sarà scritta nel contenitore adibito a contenere il risultato ($('feedData').innerHTML=html;)
se l'utente selezionerà o deselezionerà la checkbox "Visualizza Dettagli", i dati RSS verranno di nuovo riformattati tramite una nuova chiamata, senza però bisogno di inviare una nuova richiesta al server, ma analizzando l'ultimo flusso XML residente in memoria.

Considerazioni finali

L'esempio presentato in questo articolo non visualizza tutte le informazioni disponibili per ogni item: l'autore e la data vengono omessi, cosi come le informazioni generali sul canale. Se volete rendere il codice di uso più generale sentitevi liberi di farlo, espandendo la funzione visualData in modo da farle visualizzare quello che desiderate.