Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 12 di 24
  • livello principiante
Indice lezioni

Leggere l'RSS di edit

Vediamo in pratica come leggere un file XML servendoci dell'RSS di edit il blog di HTML.it
Vediamo in pratica come leggere un file XML servendoci dell'RSS di edit il blog di HTML.it
Link copiato negli appunti

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.

Ti consigliamo anche