Gestire file XML con AJAX

Articolo pubblicato sul n.12 ottobre/dicembre anno 2006 della rivista MyMedia

Nei precedenti articoli abbiamo detto che una delle caratteristiche peculiari delle tecnologie note come AJAX, è quella di spostare l’interazione tra l’utente ed il server, dal lato dell’utente.
Tutto ciò che convenzionalmente doveva essere fatto con una interazione client-server, e quindi con un ricaricamento completo della pagina, adesso può essere in buona parte eseguito direttamente dal browser dell’utente.

Nel precedente articolo avevamo visto come modificare in tempo reale il contenuto di una parte della pagina, eseguendo tutte le varie fasi dell’aggiornamento direttamente nel browser dell’utente: un clic su un collegamento faceva eseguire al browser una richiesta di dati tramite l’oggetto XMLHTTPREQUEST, il browser stesso riceveva in risposta i dati richiesti e si occupava di inserirli all’interno della pagina senza che nessun ricaricamento fosse necessario. Il metodo convenzionale di eseguire questa operazione sarebbe stato richiedere al web server il ricaricamento dell’intera pagina, con all’interno i dati desiderati.

Nell’esempio del precedente articolo, i dati arrivavano al browser sottoforma di codice HTML già formattato per essere inserito all’interno di un blocco DIV, per cui non c’era molto spazio per un utilizzo più flessibile e versatile dei dati in esso contenuti. In questo esempio vedremo invece come ricevere i dati sottoforma di file XML, quindi per definizione privi di qualsiasi formattazione, che dovrà quindi essere inserita dallo script che andremo a mostrare.

Il formato XML

Parlare di formato XML potrebbe sembrare una complicazione inutile, tuttavia non è un caso la presenza della X all’interno dell’acronimo AJAX, infatti è con dati in formato XML che si ottiene il massimo da questa tecnologia.

Nonostante una leggera complicazione addizionale nel gestire i dati in questo formato, l’utilizzo di XML porta molti vantaggi, ma soprattutto permette di fare cose che altrimenti non sarebbero possibili, se non a costo di implementare complesse soluzioni personalizzate. Ciò che si deve comprendere è che il formato XML è un modo di rappresentare dati in forma strutturata: in altre parole in un file XML sono presenti sia i dati, che le regole secondo cui è possibile identificarli e distinguerli.

Quanto detto sopra è molto più semplice e comprensibile con un esempio pratico. Si supponga di dover trasmettere con un file di testo, un insieme di articoli, composti da un titolo, un corpo del testo, un collegamento ad un’immagine e il nome della sezione di cui fa parte. Il metodo più istintivo di farlo sarebbe scrivere ciascuno di tali elementi su un rigo, uno dietro all’altro, così da avere una sequenza di dati di questo tipo:

• Articolo
  • Sezione
  • Titolo
  • Corpo
  • Immagine
• Articolo
  • Sezione
  • Titolo
  • Corpo
  • Immagine

In un file di testo di questo tipo, ci si affida implicitamente al concetto di nuova riga per distinguere i vari elementi, però se sostituiamo alle parole Sezione, Titolo, etc … il relativo contenuto dell’articolo, ci si accorge ben presto che non riusciamo ad identificare con facilità quale riga sia il titolo o la sezione. Se poi pensiamo ad una sequenza molto più complessa ed eterogenea dei dati, allora il caos diviene praticamente ingestibile.

Il problema della suddetta rappresentazione, è che nel file di testo manca la struttura dei dati. Una rappresentazione in formato XML ci consente invece di rappresentare allo stesso tempo la struttura ed il contenuto dei dati, così che un programma (nel nostro caso uno script), possa accedere in modo semplice ed univoco al dato necessario. Vediamo come si presenta la rappresentazione XML di una serie di 4 articoli:

<?xml version="1.0" ?>
<root>
   <articolo sezione="EDITORIALE" titolo="Le molte reti dell'Africa" immagine="anziana_masai.jpg">
      Un'antica leggenda comune in molte zone dell'Africa asserisce che le streghe si radunano di notte sui grandi alberi isolati in mezzo ai campi. E' inutile pero' tentare di spiarle perche' sono riparate da una grande ragnatela con la quale ogni notte avvolgono la terra: un capo lo tengono in mano e gli altri passano su tutti gli alberi del mondo. Ecco perche' la mattina si possono talvolta trovare brandelli di ragnatele penzolanti dai rami o dai pali delle staccionate.
   </articolo>
   <articolo sezione="ARCHITETTURA" titolo="Citta'. Architettura e societa'" immagine="piano_rogers.jpg">
      Renzo Piano conferisce il Leone d'oro alla carriera a Richard Rogers: un evento forte e decisamente emozionante per aprire questa edizione della Biennale. Il mio primo viaggio “autonomo” fuori degli italici confini ha attraversato Parigi e proprio nel Centre Pompidou è nata contemporaneamente la mia fervente passione per l’architettura e l’arte contemporanea.
   </articolo>
   <articolo sezione="ARTE" titolo="Studio Azzurro ha fatto splash" immagine="pozzanghera_pic.jpg">
      Dal 21 Ottobre al 30 Novembre a Palazzo dell'Arengario a Monza Studio Azzurro presenta una installazione dedicata ai piu' piccoli e concepita per divenire itinerante. Il micropaesaggio interattivo per bambini, nato dalla collaborazione di Studio Azzurro con l'Assessorato alla Cultura del Comune di Monza e Babygella - marchio del gruppo farmaceutico Rottapharm -e' il risultato di un esperimento volto al dialogo con i piu' piccoli per consentire loro un approccio ludico e creativo all'arte.
</articolo>
   <articolo sezione="ARTE E SOCIETA" titolo="La metafora indelebile del digitale" immagine="linz06_pic.jpg">
      Oltre ad essere innegabilmente divertente, l'installazione-workshop Random screen di Aram Bartholl mi pare sintetizzare almeno uno degli aspetti salienti della presente edizione del Festival di Arte. Tecnologia e Societa', dedicata al tema della Semplicita'. Il quadro di 4x4 pixels visualizzati nello stato 'on-off in modalita' random' denuncia il pregiudizio sempre piu' imperversante del 'digitale' nella Societa' dell'Informazione e della Conoscenza.
   </articolo>
</root>

Si nota subito che il formato XML consente di identificare facilmente i vari articoli, perché racchiusi all’interno di una coppia di marcatori <articolo></articolo>.
Il nome della SEZIONE, il TITOLO, ed il collegamento all’IMMAGINE sono gestiti come attributi dell’elemento ARTICOLO. Mentre il corpo dell’articolo stesso è gestito come testo delimitato dai due marcatori di inizio e fine. Ovviamente non c’è un unico metodo per la rappresentazione di certi dati, il formato è flessibile al punto da lasciare all’utente la scelta di come organizzare i propri dati. Per esempio avremmo potuto rappresentare la sezione, il titolo e l’immagine come elementi all’interno di ARTICOLO, avendo quindi una oggetto di questo tipo: <titolo>mio titolo</titolo>.

Poiché non sono oggetto di questo articolo, si tralasciano tutti i vari discorsi che dovrebbero essere fatti sul formato XML e sulle metodologie di rappresentazione dei dati. Per l’esempio che andremo a vedere, utilizzeremo il file XML sopra riportato, che non è sicuramente la scelta ottimale, ma si presta più che bene allo scopo dell’articolo.

Dando una rapida scorsa al testo XML, è facile convincersi che esso contiene sia i dati che ci servono, sia la loro struttura. Per ora basti sapere che il vantaggio di usare un formato standard come XML, è che per estrarre i dati dalla struttura, ci vengono fornite funzioni standard molto semplici da utilizzare.

La pagina web

Per l’esempio di questo articolo, useremo la struttura della pagina del precedente articolo, così da rendere più semplice la comprensione e al tempo stesso mettere più in evidenza i cambiamenti alla tecnica utilizzata.

Abbiamo ancora un collegamento ipertestuale, e facendo clic su di esso eseguiamo una funzione JavaScript che effettua la vera e propria richiesta dati al server, usando l’oggetto XMLHTTPREQUEST.

<div style="font: 12px Verdana;">
<span style="cursor: pointer; text-decoration: underline" onclick="esegui_richiesta('mymedia.xml')">Carica dati XML</span>
</div><br />

La funzione ESEGUI_RICHIESTA è praticamente identica a quella del precedente articolo, con la differenza che questa volta avremo in risposta una struttura dati XML.

    var http_request = false;
    function esegui_richiesta(indirizzo) {
        http_request = false;
        if (window.XMLHttpRequest) { // browser Mozilla
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) http_request.overrideMimeType('text/xml');
        } else if (window.ActiveXObject) { // browser Microsoft InternetExplorer
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {                     http_request = new ActiveXObject("Microsoft.XMLHTTP");                 } catch (e) {}
            }
        }
        if (!http_request) {
            alert('ERRORE : Impossibile inizializzare AJAX');
            return false;
       }
        http_request.onreadystatechange = processa_risposta;
        http_request.open('GET', indirizzo, true);
        http_request.send(null);
    }

E anche in questo caso, alla ricezione dei dati, sarà eseguita la funzione JavaScript PROCESSA_RISPOSTA, che si occuperà di estrarre i dati desiderati, formattarli ed inserirli all’interno della pagina web. In particolare, la collocazione predefinita sarà un blocco DIV con identificatore CONTENUTO, che al caricamento della pagina conterrà il modello dei dati che saranno caricati:

   <div class="sezione" class="sezione">--sezione--</div>
   <div class="titolo" class="titolo">--titolo--</div>
   <div class="corpo" class="sezione">--corpo--</div>
</div>

Lettura dei dati XML, formattazione e inserimento

Come precedentemente accennato, la rappresentazione XML dei dati si presta particolarmente bene all’uso in ambito web, perché permette di estrarre, formattare e posizionare i dati come meglio si desidera. Nell’articolo dove i dati arrivavano già formattati in forma di testo ASCII, non avevamo molta scelta, potevamo solamente copiare tutto il testo arrivato, senza metodi semplici per formattare o togliere dati.

Ciò che vogliamo fare invece è poter estrarre per ciascun articolo, titolo, sezione, corpo e immagine separatamente, per applicare la formattazione desiderata. L’enumerazione degli elementi ARTICOLO, e l’estrazione selettiva dei dati di ciascuno di essi, viene fatta con speciali funzioni che consentono di esplorare e accedere alla gerarchia del file XML.

Vediamo la funzione nel suo complesso e spieghiamo i vari passaggi:

   function processa_risposta() {
        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                txt = '';
                var xmldoc = http_request.responseXML;
                var artlist = xmldoc.getElementsByTagName('articolo');
                for (i=0;i<artlist.length;i++) {
                   art = artlist.item(i);
                   txt += '<div class="sezione">'+art.getAttribute('sezione')+'</div>';
                   txt += '<div class="titolo">'+art.getAttribute('titolo')+'</div>';
                   txt += '<img style="margin: 8px;" width="100" height="70"
                                src="'+art.getAttribute('immagine')+'" align="right" />';
                   txt += '<div class="corpo">'+art.firstChild.data+'</div>';
                   txt += '<br />';
                }
                
                elemento = document.getElementById('contenuto');
                elemento.innerHTML = txt;
            } else {
               alert('Si è verificato un problema con la risposta AJAX');
            }
        }
    }

A parte la struttura di base della funzione, che controlla il giusto ritorno della richiesta dati AJAX, in poche righe si estraggono, formattano e inseriscono i dati all’interno della pagina HTML:

• La variabile txt ci serve come variabile di appoggio nella quale accumulare il testo formattato da inserire nella pagina.
• La funzione getElementsByTagName esplora tutto il file XML e ci restituisce la lista degli elementi che si chiamano in un certo modo, nel nostro caso ARTICOLO.
• Il successivo ciclo for ci consente di ripetere le operazioni di estrazione dati e formattazione per ciascun articolo, infatti viene ripetuto per un numero di volte pari alla lunghezza della lista: artlist.length.
• Per estrarre gli attributi di ciascun ARTICOLO, come il TITOLO, la SEZIONE e l’IMMAGINE, si utilizza altrettante volte la funzione getAttribute.
• Mentre il CORPO si estrae come testo usando la dicitura
  art.firstChild.data.
• L’inserimento nella pagina viene effettuata recuperando il riferimento all’ELEMENTO chiamato CONTENUTO, e copiando la variabile TXT all’interno:
  elemento.innerHTML = txt.

In conclusione, cliccando sul collegamento il browser effettua una richiesta di dati XML al server web, dopo di che una volta ricevuti i dati, estrae quelli che gli servono, li formatta come richiesto e li copia all’interno della pagina HTML, il tutto senza ricaricare la pagina stessa.

Rispetto all’esempio del precedente articolo, è evidente come la scelta, la formattazione e l’inserimento dei dati sia completamente personalizzabile dallo sviluppatore, senza toccare la base di dati (il file XML originario). Basterà infatti modificare la costruzione del codice HTML formattato, nella funzione PROCESSA_RISPOSTA.
Potrete in questo modo usare lo stesso file XML per presentare dati con diversi gradi di dettaglio, con diverse formattazioni e addirittura su siti completamente diversi.

Guarda il risultato ottenuto.
Scarica l'esempio completo.

Importante: il codice anche se trasferisce alcune funzionalità dal server al browser client viene eseguito correttamente solo se visualizzato attraverso un server.

1. attraverso un sito web http://www.tuosito.com/tua_pagina.htm
2. attraverso il tuo web server locale http://localhost/tua_pagina.htm

L'apertura in locale della pagina restituisce l'errore "Si è verificato un problema con la risposta AJAX".