Javascript E Xml

Javascript e XML Il grande vantaggio introdotto dall'XML trovo consista nell'aver facilitato lo scambio di informazioni. Utilizzare questo formato ha risolto quasi tutti i problemi riguardo lo scambio di dati tra sistemi strutturalmente diversi e che altrimenti avrebbero avuto bisogno di complicate interfacce per comunicare. Non credo di sbagliare sostenendo che se AJAX è il cemento del Web 2.0 sicuramente XML è il mattone di questo nuovo modo di utilizzare e progettare il web. Un documento XML ovviamente, necessita di essere manipolato (spesso trasformato) affinchè le informazioni riportate al suo interno possano essere fruite. In questo articolo vedremo quindi come un file XML possa essere letto con Javascript , le differenze del DOM nella manipolazione tra HTML e XML e infine, come applicare un foglio XSLT ad un XML usando sempre Javascript. Leggere un file XML: un metodo alternativo a XMLHTTPRequest È noto, e direi piuttosto scontato, che leggere un file XML in remoto con Javascript può essere possibile usando XMLHTTPRequest. Non molti sanno però che all'oggetto su cui si fonda AJAX si affianca una valida alternativa che permette anch'essa di leggere file XML (e solo file di questo tipo). Al solito il metodo viene invocato nei due browser piu diffusi, Internet Explorer e Firefox, in maniera differente ma a fronte di alcuni svantaggi, si dimostra essere maggiormente adatto alla manipolazione di documenti XML. Vediamo allora come inizializzare i nostri oggetti e commentiamo insieme il codice che segue: if (document.implementation && document.implementation.createDocument) { xmlDoc = document.implementation.createDocument("", "", null); xmlDoc.onload = readXML(); } else (window.ActiveXObject) { xmlDoc = new ActiveXObject("MSXML2.DOMDocument"); xmlDoc.onreadystatechange = function () { if (xmlDoc.readyState == 4) readXML() }; } xmlDoc.load("fileXMLdacaricare"); Per Firefox, questo metodo alternativo si invoca usando document.implementation mentre per Explorer occorre creare una instanza ActiveX dell'oggetto MSXML2.DOMDocument. I metodi sono entrambi asincroni per default (ma possono essere resi sincroni ponendo la proprietà async a false): xmlDoc.async = false e mentre per document.implementation esiste una funzione onload che ci dice quando il documento XML è stato creato, per MSXML occorre fare un controllo sulla proprietà readyState i cui valori possono variare da 1 a 4: quando readyState è pari a 4 appunto, significa che il file XML è stato completamente caricato (un po come con XMLHTTPRequest). In particolare nella nostra funzione, controlliamo che il documento sia stato caricato e poi facciamo partire la funzione readXML() che nel nostro esempio ci servirà per studiare i vari metodi messi a disposizione per manipolare i dati del file XML. Torniamo brevemente al metodo usato con Firefox: come si vede dal codice, la funzione document.implementation.createDocument ha tre argomenti che nel nostro caso sono vuoti. In ordine essi sono: namespace, il tag root del documento e null perché le funzioni associate a questo parametro non sono state ancora implementate. Usandoli possiamo creare anche documenti XML vuoti che potremmo riempire con le API del DOM. Analogamente, ma in modo più macchinoso, anche Internet Explorer mette a disposizione le funzioni per creare documenti XML vuoti. A cosa può servire questo? Ad esempio a creare un output XML per una base di dati sui cui dati potremo lavorare manipolando poi l'XML salvato in locale, senza gravare ulteriormente sul nostro server. Ritorniamo a parlare delle differenze tra XMLHTTPRequest e il metodo alternativo che stiamo usando. XMLHTTPRequest può essere usato per qualsiasi tipo di documento di testo (non solo XML quindi) mentre il metodo alternativo funziona solamente con file XML. XMLHTTPRequest funziona solo con il protocollo HTTP e quindi qualsiasi altro protocollo non è utilizzabile per accedere ai file. Come avete intuito, il metodo alternativo non è invece legato a nessun protocollo in particolare e quindi può caricare anche file XML che si trovano sul file system del vostro server (oppure su un server ftp). Infine, quando usiamo il metodo alternativo, con HTTP possono essere generate solamente richieste di tipo GET e non di tipo POST.

1

Come lo leggo? Una volta compreso che la lettura del file XML può essere effettuata in due modi, passiamo a vedere come con il DOM sia possibile usare le informazioni contenute nel nostro file XML. La funzione che segue legge un qualsiasi file XML e ne mostra il nome del tag e il suo contenuto: function readXML(app) { var x = xmlDoc.getElementsByTagName('item'); var text = ''; for (i=0;i < x.length;i++) { for (j=0;j < x[i].childNodes.length;j++) { if (x[i].childNodes[j].nodeType != 1) continue; //text += x[i].childNodes[j].nodeName + ": " + x[i].childNodes[j].firstChild.nodeValue + ""; text += x[i].childNodes[j].nodeName + ": " + x[i].childNodes[j].firstChild.nodeValue + ""; } } alert(text); var app = document.getElementById('textAPP'); app.innerHTML = text; }

Analizziamo brevemente il codice: accedere ad un nodo dell'XML si riduce a navigare i suoi rami fino a raggiungere l'elemento desiderato. Nel nostro caso (ripeto, un RSS) vogliamo visualizzare tutti gli elementi figli di tutti gli elementi item. Quindi instanziamo un array di elementi item (var x = xmlDoc.getElementsByTagName('item')) dopodiché iteriamo su quest'array e per ogni figlio dell'elemento (x[i].ChildNodes[j]). L'esempio mostra le due caratteristiche principali di childNodes: NodeName, che ci permette di ottenere il nome del tag e firstChild.nodeValue, che invece restituisce il valore eventualmente contenuto tra i tag. Come avrete notato c'è una riga che non è stata commentata: if(x[i].childNodes[j].nodeType != 1). In realtà si tratta di un hack per Firefox. Il browser della Mozilla Foundation infatti, interpreta come firstChild il nodo tra item e description che, in questo caso però, non ha nessuno value da mostrare. Ciò causa un errore che blocca l'esecuzione dello script. È buona norma quindi (una volta individuato il nodo padre) inserire questo piccolo hack. HTML e XML: le differenze nel DOM (e non solo...) Abbiamo appena visto che per accedere i valori di un file XML usiamo un approccio che ricorda molto da vicino il DOM ben noto per le varie applicazioni Javascript tipiche del Web 2.0 (e non solo). In effetti quando il W3C progettò le API per DOM, l'idea era quella di renderle valide per ogni linguaggio compreso chiaramente XML: anzi, diciamo pure che XML ha inspirato la progettazione delle API tant'è che HTML viene gestito dal DOM grazie ad una estensione delle API originali. Ma qual è la differenza fondamentale tra il DOM usato per l'XML e quello usato per HTML? Facile: l'utilizzo della funzione getElementById. Infatti mentre in HTML questo è il metodo per accedere ad un elemento della pagina (ovviamente se identificato da un id univoco) in XML è probabile che il valore restituito usando questa funzione, sarà null. Questo perché in XML non è sufficiente dichiarare un attributo id in un tag e accedere poi a quel tag con getElementById: occorre anche "tipizzare" l'attributo, e per farlo va definito il DTD per il documento XML e poi dichiararlo nel DOCTYPE. Un'altra differenza tra HTML e XML è che HTML ha una proprietà body che si riferisce al tag mentre per XML solo la proprietà documentElement si riferisce al tag root del documento. Infine, per accedere al valore di un attributo di un tag in XML va utilizzato getAttribute(nomeAttributo) mentre per modificarlo si usa setAttribute(nomeAttributo). Quindi: se abbiamo il tag: <esempioTag attr="ciao"> e vogliamo accedere al valore dell'attributo attr, si scrive: getAttribute(attr). Ovviamente questa operazione non è permessa con documenti HTML.

2

Javascript, XML e XSLT La naturale estensione di XML per la trasformazione di un documento XML in formati fruibili all'utente finale è senz'altro XSL. In Javascript è possibile applicare un file XSL ad un file XML sia in Internet Explorer che in Firefox, con la solita discrepenza sui metodi di base e sulle modalità di inizializzazione. Occorre però precisare in questo caso, che il W3C non ha ancora definito nessuna API standard per le trasformazioni XSL con il DOM o con XML per Javascript e quindi per una volta, giustifichiamo scelte diverse a fronte di una poco matura situazione ad "alti livelli". Passiamo al concreto e partiamo con Firefox le cui API proprietarie per la trasformazione di documenti XML con XSL viene garantita dall'oggetto XSLTProcessor. In Internet Explorer invece l'oggetto predisposto è TransformNode(). Vediamo nel seguente esempio come creare una funzione cross browser per applicare un file XSL (che supponiamo di avere in remoto, cioè un URL) ad uno specifico nodo del nostro file XML (supponiamo di aver già riconosciuto quale browser stiamo utilizzando e riusiamo la funzione per caricare file XML che abbiamo visto in precedenza, ovvero l'oggetto ottenuto, XMLDoc che chiamiamo XSLDoc quando carichiamo il file XSL): XSLDoc.load(URLdelFileXSL); if (typeof XSLTProcessor != "undefined") { //stiamo usando Firefox var xsltProcessor = new XSLTProcessor(); xsltProcessor.importStylesheet(XSLDoc); var app = xsltProcessor.transformToFragment(nodoDelDOMDaTrasformare); } else { //stiamo usando Internet Explorer //quindi il nodo che vogliamo trasformare ha la funzione transformNode tra i suoi metodi var app = nodoDelDOMDaTrasformare.TransformNode(XSLDoc) } In Firefox è possibile usare anche un altro metodo al posto di transformToFragment (che come TransformNode per IE, restituisce un nodo) ed è transformToDocument: l'oggetto che se ne ricava è un document HTML se l'XSL produce come output un HTML oppure un documento XML se l'XSL produce un file XML. Javascript e XPath Chiudiamo con un accenno alle espressioni XPath e le relative API del W3C per la selezione dei nodi nel DOM usando questo approccio. Al solito anche qui, Firefox ha implementato le API usando il metodo evaluate() del document object, che compila una espressione XPath in modo che sia possibile valutarla diverse volte in modo efficiente. Internet Explorer invece, fornisce i due metodi selectSingleNode() e selectNodes() esclusivamente per documenti XML (e quindi non funzionano con documenti HTML!). XPath è ovviamente una parte che richiederebbe una serie di articoli per essere analizzata a fondo e per questo mi fermo qui, limitandomi all'introduzione degli strumenti che dovete usare se volete cercare nodi all'interno dei vostri documenti, usando appunto Javascript. Considerazioni Finali Abbiamo visto quindi come Javascript si sia ormai evoluto, in un linguaggio che permette sofisticate operazioni un tempo appannaggio esclusivamente dei linguaggi server side. Come già detto, molte di queste innovazioni hanno fatto si che nascesse il Web come lo conosciamo oggi, e ovviamente XML è una parte fondamentale per l'evoluzione (anche) futura della user experience durante la navigazione e la fruizione dei contenuto sul web. Javascript copre completamente ogni aspetto necessario a maneggiare le informazioni in questo formato e in questo articolo ho cercato di toccare un po' tutti gli aspetti. Come avrete notato inoltre, i browser che ho citato sono stati solamente Internet Explorer e Firefox: questo perché il resto dei browser non ha ancora un supporto Javascript ad XSLT né tanto meno ad XPath: in questi casi viene consigliato l'utilizzo di AJAXSLT una libreria sviluppata da Google. Questo è tutto. Alla prossima e buon divertimento!

3