Aggiungere elementi dinamici alle nostre pagine è sempre più semplice dall'arrivo di jQuery. In questo articolo vedremo come trattare feed RSS e, in genere, dati strutturati in XML.
Analizzeremo la tecnica di base per caricare un documento XML, vedremo poi come utilizzare documenti già presenti nel Web sfruttando anche servizi e applicazioni di terze parti.
La tecnica di base
Per iniziare esaminiamo la tecnica di base per la lettura di un file XML. Per farlo utilizziamo un documento molto semplice e assumiamo che sia la pagina che ospita i dati, sia il file XML siano sullo stesso dominio.
Ecco il documento XML da importare:
<?xml version="1.0" encoding="UTF-8"?>
<guide>
<guida>
<titolo>Guida jQuery</titolo>
<link>http://javascript.html.it/guide/leggi/168/guida-jquery/</link>
</guida>
<guida>
<titolo>Guida Zend Framework</titolo>
<link>hhttp://php.html.it/guide/leggi/195/guida-zend-framework/</link>
</guida>
</guide>Di seguito il codice necessario all'importazione, diamogli uno sguardo, poi lo commentiamo:
$(document).ready(function() {
$.ajax({ type: "GET", url: "guide.xml", dataType: "xml",
success: function(xml) {
$(xml).find('guida').each(function() {
var titolo = $(this).find('titolo').text();
var link = $(this).find('link').text();
var link_markup = '<li><a href="'+link+'" title="'+titolo+' - HTML.it">'+titolo+'</a></li>';
$(link_markup).appendTo('#guide');
});
},
error: function(request, error, tipo_errore) { alert(error+': '+ tipo_errore); }
});
});Per completare il quadro occorre inserire nel markup un elenco puntato con id="guide" e questo è molto semplice:
<ul #id="guide"></ul>A questo punto cominciamo ad esaminare gli elementi cardine dello script: quando viene invocato, come avviene la richiesta , come gestire i dati.
