Il codice XML (eXtensible Markup Language) è un linguaggio di markup che serve a descrivere la struttura e il significato dei dati in modo standard e indipendente dalla piattaforma. Il codice XML si basa sull’uso di tag, ovvero etichette che racchiudono i dati tra parentesi angolari. I tag XML possono essere definiti dall’utente in base alle proprie esigenze e possono rappresentare qualsiasi tipo di informazione, come ad esempio dati di vendita, informazioni sugli animali domestici, documenti di testo, immagini e così via.
Il codice XML ha diversi vantaggi rispetto ad altri linguaggi di programmazione, come ad esempio:
- È facile da leggere e scrivere sia per gli umani che per i computer.
- È estendibile e personalizzabile, in quanto permette di creare nuovi tag e attributi senza limitazioni.
- È interoperabile e portabile, in quanto può essere trasferito e processato da diversi sistemi e applicazioni senza perdere informazioni o qualità.
- È valido e verificabile, in quanto può essere controllato da regole sintattiche e semantiche definite da schemi o grammatiche.
Per usare il codice XML è necessario seguire alcune regole di base, come ad esempio:
- Ogni documento XML deve avere un tag radice che racchiude tutti gli altri tag.
- Ogni tag aperto deve essere chiuso con un tag corrispondente o con una barra alla fine del tag stesso.
- I tag devono essere annidati correttamente, ovvero non devono sovrapporsi o intersecarsi tra loro.
- I nomi dei tag devono rispettare la distinzione tra maiuscole e minuscole e non devono contenere spazi o caratteri speciali.
- I valori degli attributi devono essere racchiusi tra virgolette doppie o singole.
- I commenti devono essere inseriti tra e non devono contenere il carattere — al loro interno.
Esempio di codice XML:
<?xml version="1.0" encoding="UTF-8"?>
<animali>
<animale tipo="cane">
<nome>Fido</nome>
<razza>Labrador</razza>
<colore>Marrone</colore>
</animale>
<animale tipo="gatto">
<nome>Micio</nome>
<razza>Siamese</razza>
<colore>Grigio</colore>
</animale>
</animali>In questo esempio si può vedere come il codice XML descriva la struttura e il significato dei dati relativi agli animali domestici. Il tag radice è e contiene due tag figli , ognuno con un attributo tipo che specifica la specie dell’animale. Ogni tag contiene a sua volta tre tag figli , e , che indicano le caratteristiche dell’animale. Tutti i tag sono chiusi correttamente e annidati in modo coerente.
Il codice XML può essere usato per vari scopi, come ad esempio:
- Creare documenti strutturati, come pagine web, libri, articoli, report e così via.
- Scambiare dati tra sistemi diversi, come database, applicazioni web, servizi web e così via.
- Rappresentare graficamente dati, come immagini vettoriali, diagrammi, mappe e così via.
- Definire linguaggi specifici per domini particolari, come XHTML, RSS, Atom e così via.
Come creare una pagina web dinamica con codice XML e JavaScript
XML (eXtensible Markup Language) è un linguaggio di markup che consente di definire la struttura e i dati di un documento. JavaScript è un linguaggio di scripting che consente di aggiungere interattività e funzionalità a una pagina web. In questa sezione vedremo come utilizzare XML e JavaScript per creare una pagina web dinamica che mostri una lista di libri con i relativi dettagli.
Per realizzare il nostro esempio avremo bisogno di tre file: un file HTML che conterrà il codice della pagina web, un file XML che conterrà i dati dei libri e un file JavaScript che conterrà il codice per caricare e visualizzare i dati XML.
Creiamo il file index.html, o un nome a piacere, e inseriamo il seguente codice:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Esempio di pagina web dinamica con XML e JavaScript</title>
</head>
<body>
<h1>Lista di libri</h1>
<div id="container"></div>
<script src="script.js"></script>
</body>
</html>Come si può notare, il file HTML include il file JavaScript tramite il tag <script> e crea un elemento <div> con id = “container” dove verranno inseriti i dati XML.
Creiamo il file data.xml, o un nome a piacere, e inseriamo i libri:
<?xml version="1.0" encoding="UTF-8"?>
<libri>
<libro>
<titolo>Il principe e il povero</titolo>
<autore>Mark Twain</autore>
<genere>Romanzo</genere>
<anno>1881</anno>
</libro>
<libro>
<titolo>1984</titolo>
<autore>George Orwell</autore>
<genere>Dystopia</genere>
<anno>1949</anno>
</libro>
<libro>
<titolo>Il piccolo principe</titolo>
<autore>Antoine de Saint-Exupéry</autore>
<genere>Favola</genere>
<anno>1943</anno>
</libro>
</libri>
Come si può notare, il file XML contiene un elemento radice che racchiude tre elementi figli , ognuno dei quali contiene quattro elementi figli: , , e .
Il file JavaScript, che deve avere lo stesso nome indicato nel file HTML, avrà la seguente struttura:
// Creiamo una variabile per memorizzare il riferimento all'elemento container
var container = document.getElementById("container");
// Creiamo una funzione per caricare il file XML
function CaricaXML() {
// Creiamo un oggetto XMLHttpRequest per effettuare una richiesta al server
var richiesta_xml = new XMLHttpRequest();
// Impostiamo il metodo, l'URL e il tipo di risposta della richiesta
// Al posto di data.xml inserire il nome scelto se è stato cambiato
richiesta_xml.open("GET", "data.xml", true);
richiesta_xml.responseType = "document";
// Aggiungiamo un gestore dell'evento load per eseguire una funzione quando la richiesta è completata
richiesta_xml.onload = function () {
// Verifichiamo se la richiesta ha avuto successo (codice di stato 200)
if (richiesta_xml.status == 200) {
// Otteniamo il documento XML dalla proprietà response dell'oggetto XMLHttpRequest
var file_xml = richiesta_xml.response;
// Otteniamo tutti gli elementi libro dal documento XML tramite il metodo getElementsByTagName
var libri = file_xml.getElementsByTagName("libro");
// Creiamo un elemento ul per contenere la lista dei libri
var ul = document.createElement("ul");
// Iteriamo sugli elementi libro
for (var i = 0; i < libri.length; i++) {
// Otteniamo l'elemento libro corrente
var libro = libri[i];
// Otteniamo i valori dei suoi elementi figli tramite il metodo getElementsByTagName e la proprietà textContent
var titolo = libro.getElementsByTagName("titolo")[0].textContent;
var autore = libro.getElementsByTagName("autore")[0].textContent;
var genere = libro.getElementsByTagName("genere")[0].textContent;
var anno = libro.getElementsByTagName("anno")[0].textContent;
// Creiamo un elemento li per ogni libro e popoliamolo con i valori degli elementi figli
var li = document.createElement("li");
li.innerHTML = "<strong>" + titolo + "</strong> di " + autore + "<br>" + genere + " (" + anno + ")";
// Aggiungiamo l'elemento li alla lista ul
ul.appendChild(li);
}
// Aggiungiamo la lista ul al contenitore HTML
container.appendChild(ul);
}
};
// Inviamo la richiesta al server
richiesta_xml.send();
}
// Chiamiamo la funzione loadXML() per visualizzare la lista di libri.
//Possiamo inserire il seguente codice anche al terzo rigo perché richiama i processi scritti nella funzione.
CaricaXML();Prova adesso a risolvere questo esercizio. Di seguito trovi la struttura di un file XML per i post di un blog:
- Aggiungi tutti i post che vuoi, inserisci un titolo e un breve contenuto;
- Crea un file HTML e aggiungi un contenitore dove verranno mostrati i post del blog;
- Crea un file JavaScript e crea delle funzioni per visualizzare i post uno dopo l’altro come la home page di un blog;
Questo è soltanto un esempio per prendere dimestichezza con HTML, XML e JavaScript. Per gestire un blog vero e proprio si lavora con MySQL per inserire i post in un database e caricarli a seconda della richiesta dell’utente.