Pagina inclusa Admin

LEZIONE III - Trasmissione dati XML

Eccoci alla terza parte del corso AJAX. Nella lezione precedente abbiamo visto come con questa tecnica di programmazione possiamo effettuare richieste generiche verso un server attraverso JS.
Altresì abbiamo visto come ricevere e gestire dei testi in formato ASCII standard.

In questa lezione, invece, sfrutteremo una delle grandi potenzialità di JS, ovvero quella di ricevere dati direttamente formattati in XML e gestirli come oggetti propri.

L'XML che andremo ad utilizzare è un sistema semplice di organizzazione degli elementi tramite marcatori, generalmente definiti TAG, con un utilizzo molto simile a quello che avviene per HTML. In questo corso non tratteremo la gestione evoluta di XML, ma solo come veicolo di trasporto dei dati.

Prima di procedere con l'analisi di gestione da parte di JS di questi dati, vediamo un attimino come viene composto un "documento" XML che utilizzeremo nei nostri programmi ed esempi.
L'XML ha una struttura gerarchica ad albero, volgarmente definita padre / figlio a infiniti livelli. Nell'esempio che segue vediamo come può essere composto un documento XML a più livelli:

<padre>
    <figlio1></figlio1>
    <figlio2></figlio2>
    ...
    <figlioN></figlioN>
    ...
    <figlioPadre>
        <figlioP1></figlioP1>
        ...
    </figlioPadre>
</padre>

Naturalmente all'interno dello stesso documento XML possono coesistere diverse strutture indipendenti anche con lo stesso nome, anche se deve sempre esiste un "padre" che racchiude tutto. La stessa cosa avviene con HTML, dove appunto il tag <HTML></HTML> racchiude tutta la struttura della nostra pagina che, guardacaso, è composta esattamente come l'esempio sopra. Infatti anche HTML è un "linguaggio a marcatori" e l'idea di XML deriva proprio da questo.

Dato che per questo corso XML sarà solamente utilizzato come documento veicolante dei dati tra server e JS, non vedremo approfondite altre possibilità d'uso del linguaggio.

La codifica standard con cui i dati verranno inviati con XML dal server e che JS gestisce nativamente è UTF-8; questo formato può codificare qualsiasi tipo di carattere e codice binario senza che tale codice influisca con i marcatori del nostro documento.
Detto questo, tutti i documenti che invieremo dovranno obbligatoriamente contenere come prima riga la seguente istruzione:

<?xml version="1.0" encoding="UTF-8" ?>

Questa riga funziona un po' come il "doctype" per le pagine HTML e indica al parser che riceverà il documento come è impostato e gestito il documento stesso. La mancanza di questa riga genera errore del parser.
Ora che abbiamo visto come verranno gestiti i documenti XML, vediamo di capire come comporre un documento XML con l'ausilio di PHP. La procedura è molto semplice, ma bisogna fare attenzione agli elementi che verranno codificati in UTF-8, che per noi saranno tutti gli elementi "alfanumerici" (stringhe) senza alcuna distinzione. Gli unici elementi che non necessitano di codifica sono i numeri.
Continuando con le stringhe, dobbiamo ricordarci che queste devono essere racchiuse sempre all'interno dell'elemento CDATA, altrimenti il parser considera il contenuto del tag XML come numerico generando quindi errore; messo in un contesto l'elemento si presenta:

<indirizzo><![CDATA[Via Mazzini, 35 - Segrate (Mi)]]></indirizzo>

Nell'esempio sopra abbiamo visto come dovrà essere inviata una stringa attraverso XML. Inoltre possiamo notare che ho utilizzato un tag <indirizzo></indirizzo> proprio per "passare" un indirizzo. Il bello della codifica XML è che siamo noi a decidere come debbano chiamarsi i vari marcatori con il vantaggio di avere del codice più leggibile e personale. L'unica cosa da dover porre attenzione è che, come per HTML, i tag XML devono essere formati da un unica parola senza spazi, al massimo per una maggiore leggibilità si possono usare le lettere maiuscole per il cambio parola. Se per esempio vogliamo scrivere il marcatore telefono ufficio, per restare nelle specifiche e allo stesso tempo avere a colpo d'occhio una maggiore leggibilità, possiamo scrivere <telefonoUfficio></telefonoUfficio>.

Nella scrittura del documento XML con PHP, visto quello specificato sopra, dovremo utilizzare il comando utf8_encode per codificare tutte le nostre stringhe.
N.B. di norma se le stringhe contengono caratteri standard (A-Z 0-9) e la diteggiatura standard (.-_;:) non sarebbe necessario convertire tali stringhe in UTF-8, ma dato che la maggior parte delle volte i dati verranno estratti da DB, non possiamo sempre sapere cosa conterranno, quindi per sicurezza (cioè per evitare errori) codificheremo tutte le stringhe.

A questo punto se dovessimo utilizzare PHP per scrivere l'esempio sopra, verrebbe fuori:

$xml = "<indirizzo><![CDATA[" . utf8_encode("Via Mazzini, 35 - Segrate (Mi)") . "]]></indirizzo>";

Tenete sempre a mente queste cose dette sopra, poichè quando inizierete a fare i vostri programmi i primi errori che potreste fare sono proprio questi, ovvero sbagliare il modo di scrivere i dati!
Una volta generato il nostro documento XML, dovremo inviarlo al JS che ce lo ha richiesto, inviando prima di tutto una intestazione e poi stampando il nostro documento:

header("Content-type: text/xml");
print "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n";
print $xml;

Cosa fa il JS che ha richiesto i dati una volta ricevuti?
Senza rivedere tutta la procedura XMLHttpRequest per inviare la richiesta al server, dobbiamo solo ricordarci che per gestire i dati nel formato XML e convertirli automaticamente in oggetti JS da utilizzare, dobbiamo utilizzare il comando responseXML, quindi in un contesto reale avremo la riga di codice seguente var risultato = httpRequest.responseXML;.
Supponiamo di aver richiesto al server una lista di nomi presenti nel database "rubrica" e di voler stampare la lista dei risultati; il server ci ritornerà un documento XML simile a questo:

<?xml version="1.0" encoding="UTF-8" ?>
<rubrica>
    <record>
        <nome><![CDATA[Marco]]></nome>
        <indirizzo><![CDATA[Via Mazzini, 35 - Segrate (Mi)]]></indirizzo>
        <telefono>333999000</telefono>
    </record>
    <record>
        <nome><![CDATA[Maddalena]]></nome>
        <indirizzo><![CDATA[Via Asturie, 20 - Bologna (Bo)]]></indirizzo>
        <telefono>444888777</telefono>
    </record>
    <record>
        <nome><![CDATA[Francesco]]></nome>
        <indirizzo><![CDATA[Via Milano, 40 - Roma (Rm)]]></indirizzo>
        <telefono>0688889999</telefono>
    </record>
</rubrica>

Noterete che il documento sopra ha una struttura che viene ripetuta tante volte quanti sono i dati che vengono passati. Nell'esempio, il marcatore che fa da raccoglitore per ogni dato estratto l'ho chiamato record; questi contiene i marcatori "figli" che racchiudono i dati veri e propri. Ogni marcatore "record" è a se stante e non influisce con gli altri.
Gli oggetti JS presenti nel documento XML non sono altro che i marcatori stessi, quindi per estrarre i vari elementi procederemo come se il documento fosse una pagina HTML, quindi estraendo i vari tag con il comando getElementsByTagName(), di conseguenza uno script che potrebbe fare al caso nostro sarebbe:

   var risultato = httpRequest.responseXML;
    
   // Estraggo tutti gli elementi "padre" record presenti nel documento
   var record = risultato.getElementsByTagName('record');
  
   // Per ogni elemento record presente, estraggo i relativi dati
   for ( var i = 0; i < record.length; i++ ) {
      var nome      = record[i].getElementsByTagName('nome')[0].firstChild.nodeValue;
      var indirizzo = record[i].getElementsByTagName('indirizzo')[0].firstChild.nodeValue;
      var telefono  = record[i].getElementsByTagName('telefono')[0].firstChild.nodeValue;
   }

Il codice scritto sopra naturalmente è incompleto, ovvero manca la parte che deve utilizzare i dati ricevuti, ma questo sarà tema della prossima lezione, dove vedremo all'opera anche un programma vero e proprio con il codice completo.

Vi ricordo che se qualcosa non vi è chiaro o volete capire meglio qualche passaggio, non avete altro da fare che lasciare un messaggio nell'apposito forum!

Alla prossima lezione.