jQuery: parsing rss

Questo tutorial è dedicato al parsing di un feed rss tramite jQuery.
Al caricamento del documento andremo a a caricare via ajax il file news.xml
e poi prepareremo la visualizzazione.

Trattandosi di una chiamata ajax useremo la tradizionale icona animata per avvisare del caricamento dati in corso.
Nell html predisponiamo un div nascosto via css:

<div id="loader"><img src=”http://www.lorenzodeambrosis.net/blog/tutorial/images/ajax_loader.gif” alt="" /></div>

Al document assegniamo la gestione della visualizzazione e della scompars del div in oggetto (che poi andrà posizionato al centro della pagina)

$(document)
.ajaxStart(function(){$(‘#loader’).show();})
.ajaxStop(function() {$(‘#loader’).hide();})

al caricamento invece inoltriamo la chiamata con il metodo .ajax():

$.ajax({
type:’GET’,
url:’data/news.xml’,
dataType:’xml’,
success:function(str_xml){

}
})

Per quanto riguarda la parte di visualizzaizone dei dati invece utilizzeremo le funzionalità tradizionali di jQuery di attraversamento del DOM.
Quindi come prima cosa andremo a cercare il tag “item” all’interno della stringa str_xml ottenuta in risposta e per ogni item andremo a caccia delle info contenute

$(str_xml).find(‘item’).each(function(){
…
})

Come prima cosa assegniamo delle variabili ottenute dall’estrazione del contenuto dai tag con il metodo .text(),
quindi $(this) rappresenta l’item sul quale ci troviamo, al suo interno andiamo alla ricerca del tag desisderato (.find())
e infine preleviamo il testo del tag

var titolo=$(this).find(‘title’).text();
var miolink=$(this).find(‘link’).text();
var description=$(this).find(‘description’).text();
var pubDate=$(this).find(‘pubDate’).text();
var category=$(this).find(‘category’).text();

A questo punto possiamo costruire la stringa html da appendere al contenitore target della visualizzazione:

var riga1=”+titolo+”;
var riga2=’<strong>‘+</strong>category<strong>+’</strong> – <em>‘+&lt;/em>pubDate&lt;em>+’</em>‘;
var riga3=”+description+”;

$(‘<div class=”item”></div>’).html(riga1+riga2+riga3).appendTo(‘#contenitore’)

Ecco l’esempio completo