RSS è un formato XML utilizzato per pubblicare notizie, post di blog e altri contenuti che hanno la caratteristica di cambiare frequentemente. Migliaia di siti web mettono a disposizione un canale RSS permettendovi di abbonarvi ai vari canali disponibili e verificare periodicamente ed automaticamente la presenza di nuovi contenuti visualizzandoli all'interno del proprio browser o di un'applicazione desktop.
Poiché i canali RSS non sono altro che collezioni di file XML, essi sono facili da gestire da un'applicazione Ajax. In questo articolo verrà mostrato come sia possibile leggere un canale RSS già memorizzato sul server dove risiede l'applicazione e come analizzare i dati XML formattandoli per la successiva visualizzazione all'interno del browser.
Vediamo subito il codice di uno dei canali RSS che andremo ad utilizzare:
<?xml version="1.0"?>
<rss version="2.0">
<channel>
<title>Esempio Aggregatore RSS - Canale 1</title>
<link>https://www.html.it/</link>
<description>Come recuperare i contenuti RSS con l'ausilio della tecnologia Ajax</description>
<item>
<title>Titolo 1 - Canale 1</title>
<link>http://www.esempio1.it</link>
<description>Lorem ipsum dolor sit amet...</description>
<author>Alvin Laini</author>
</item>
<item>
<title>Titolo 2 - Canale 1</title>
<link>http://www.esempio2.it</link>
<description>Lorem ipsum dolor sit amet...</description>
<author>Alvin Laini</author>
</item>
<item>
<title>Titolo 3 - Canale 1</title>
<link>http://www.esempio1.it</link>
<description>Lorem ipsum dolor sit amet...</description>
<author>Alvin Laini</author>
</item>
<item>
<title>Titolo 4 - Canale 1</title>
<link>http://www.esempio1.it</link>
<description>Lorem ipsum dolor sit amet...</description>
<author>Alvin Laini</author>
</item>
</channel>
</rss>
La maggior parte dei canali RSS contiene un singolo elemento "channel". Nei file RSS relativi alle notizie e ai blog l'elemento "channel" contiene solitamente molti sottoelementi "item" (uno per ogni articolo).
I file RSS utilizzati in questo esempio (sono presenti nel pacchetto zip allegato all'articolo) risiederanno all'interno dello stesso domino dove girerà la nostra applicazione. Ciò è stato fatto per ragioni di sicurezza, siccome la maggior parte dei browser non permette alle applicazioni di recuperare dati provenienti da domini esterni a quello dell'applicazione. Tutto ciò, ci fa dormire sonni più tranquilli, ma limita sotto certi punti di vista le funzionalità che sarà possibile implementare.
Un semplice aggregatore RSS
Partiamo dando per scontato che esista già un qualche meccanismo che memorizzi periodicamente sul nostro server dei file RSS e concentriamo la nostra attenzione sulla struttura dell'applicazione.
L'interfaccia della nostra applicazione sarà molto banale: consisterà in un campo select per la scelta dei canali RSS e in un campo checkbox che imposterà il livello di dettaglio durante la lettura del file XML contenente le informazioni.
Quando selezionerete un canale tramite la select box, l'applicazione andrà a caricare dal vostro server il corrispondente file RSS, dopodiché, sempre tramite l'ausilio di Javascript, i dati verranno formattati e resi disponibili a video.
Per capire meglio il funzionamento addentriamoci nel codice, analizzando inanzitutto l'interfaccia utente in formato HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>esempio aggregatore RSS</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/stile.css" media='screen'>
</head>
<body>
<h1>Aggregatore RSS</h1>
<div id='form'>
<select id='rssFile'>
<option value="#" selected>-- Seleziona Un Canale --</option>
<option value="rss/canale1.rss.xml">Canale 1</option>
<option value="rss/canale2.rss.xml">Canale 2</option>
</select>
<img src="immagini/gif/ajax-loader.gif" border="0" id='loader' title="Loader Ajax" alt="Loader Ajax" class="displayNone">
<input type="checkbox" value="1" name="dettagli" id='dettagli'>Visualizza dettagli
</div>
<div id="feedData"></div>
<script src="javascript/prototype.js" type="text/javascript"></script>
<script src="javascript/parser.js" type="text/javascript"></script>
</body>
</html>
Non c'è molto da dire riguardo a questo codice, come potete vedere è del banale codice HTML che permetterà all'utente di fruire, tramite delle funzioni Javascript, delle informazioni contenute nei nostri canali RSS.
Come potete notare, la lista dei canali disponibili all'utente sarà presentata all'interno di una select box, a questa verrà associato un "osservatore" di eventi lato Javascript che intercetterà la richiesta dell'utente; la stessa cosa avverrà anche per la visualizzazione dei dettagli.
Questo sistema permetterà al codice di essere più pulito separando il workflow del programma dalla sua presentazione.
Questo sarà possibile grazie alle due librerie Javascript incluse:
- Prototype (imposta il framework Javascript);
- Parser (definirà le funzione atte ad implementare il nostro aggregatore e non solo)
Come funziona in pillole
//Variabile globale che conterrà l'ultimo flusso xml caricato
var xml=null;
/* Imposto gli observer per intercettare
* i vari eventi che l'utente effettuerà
*/
//Select per il cambio di canale RSS
Event.observe($('rssFile'),"change", function(event) {
if($F('rssFile')!='#')
new Ajax.Request($F('rssFile'),{onCreate:function(){$('loader').toggleClassName('displayNone');},
onComplete:function(transport){$('loader').toggleClassName('displayNone');
xml=transport.responseXML;
visualData();}});
});
//Checkbox per visualizzare i dettagli
Event.observe($('dettagli'), 'click', function(event) {
if(xml!=null)
visualData();
});
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.documentElementricava il nodo radice del flusso RSS; - tramite un ciclo
forvengono iterati tutti i nodiitemcontenuti all'interno del documento RSS, il metodo JavascriptgetElementsByTagName()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.
