XML JavaScript

Het XMLHttpRequest object

Het XMLHttpRequest object wordt gebruikt om op de achtergrond gegevens met een server uit te wisselen.

Het XMLHttpRequest object is een droom voor elke ontwikkelaar, want je kunt:

Alle moderne browsers (IE7+, Firefox, Chrome, Safari en Opera) hebben een ingebouwd XMLHttpRequest object.

Syntaxis om een XMLHttpRequest object aan te maken:

xmlhttp = new XMLHttpRequest();

Oudere versies van Internet Explorer (IE5 en IE6) gebruiken ActiveX objecten:

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

XML Parser

Alle moderne browsers hebben een ingebouwde XML parser.

Een XML parser zet een XML document om naar een XML DOM object – die je met JavaScript kunt bewerken.

Een XML document omzetten

De volgende code zet een XML document om in een XML DOM object:

xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","boeken.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

Een XML tekenreeks omzetten

De volgende code zet een XML tekenreeks om in een XML DOM object:

tekst="<boekenwinkel><boek>";
tekst = tekst + "<titel>Italiaans koken</titel>";
tekst = tekst + "<auteur>Gina De Lauw</auteur>";
tekst = tekst + "<jaar>2005</jaar>";
tekst = tekst + "</boek></boekenwinkel>";
if (window.DOMParser){
  parser = new DOMParser();
  xmlDoc = parser.parseFromString(tekst,"text/xml");
} else { // Internet Explorer
  xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async = false;
  xmlDoc.loadXML(tekst);
}

Internet Explorer gebruikt de loadXML() methode om een XML tekenreeks om te zetten, terwijl andere browsers het DOMParser object gebruiken.

Toegang tot andere domeinen

Moderne browsers krijgen geen toegang tot andere domeinen, dit zou een beveiligingsprobleem opleveren.

Dit betekent dat de webpagina en het XML bestand dat de pagina wil laden op dezelfde webserver moeten staan.

XML DOM

Het XML DOM (Document Object Model) definieert een standaard om XML documenten te lezen en te bewerken.

Het XML DOM bekijkt een XML document als een boomstructuur.

Alle elementen kunnen via de DOM boomstructuur bereikt worden. Hun inhoud (tekst en attributen) kunnen bewerkt of vernietigd worden, nieuwe elementen kunnen aangemaakt worden.

Een XML bestand laden

Een voorbeeld met het volgende nota.xml bestand:

<?xml version="1.0" encoding="utf-8"?>
<nota>
  <voor>Tania</voor>
  <van>Jan</van>
  <titel>Geheugensteun</titel>
  <bericht>Stuur je me een verslag van de vergadering.</bericht>
</nota>

De volgende JavaScript code zet het XML document nota.xml om naar een XML DOM object en geeft de informatie weer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Interne nota</title>
</head>
<body>
  <h1>Interne Nota</h1>
  <div>
    <b>Voor:</b> <span id="voor"></span><br />
    <b>Van:</b> <span id="van"></span><br />
    <b>Bericht:</b> <span id="bericht"></span>
  </div>
  <script type="text/javascript">
    xmlhttp=new XMLHttpRequest();
    xmlhttp.open("GET","nota.xml",false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML;
    document.getElementById("voor").innerHTML = xmlDoc.getElementsByTagName("voor")[0].childNodes[0].nodeValue;
    document.getElementById("van").innerHTML = xmlDoc.getElementsByTagName("van")[0].childNodes[0].nodeValue;
    document.getElementById("bericht").innerHTML = xmlDoc.getElementsByTagName("bericht")[0].childNodes[0].nodeValue;
  </script>
</body>
</html>
Weergeven

Opmerkingen:

XML gegevens in een HTML tabel weergeven

Een voorbeeld met het volgende cd_catalogus.xml bestand:

<?xml version="1.0" encoding="utf-8"?>
<catalogus>
  <cd>
    <titel>Empire Burlesque</titel>
    <artiest>Bob Dylan</artiest>
    <land>USA</land>
    <label>Columbia</label>
    <prijs>10.90</prijs>
    <jaar>1985</jaar>
  </cd>
  <cd>
    <titel>Hide your heart</titel>
    <artiest>Bonnie Tyler</artiest>
    <land>UK</land>
    <label>CBS Records</label>
    <prijs>9.90</prijs>
    <jaar>1988</jaar>
  </cd>
  <cd>
    <titel>Greatest Hits</titel>
    <artiest>Dolly Parton</artiest>
    <land>USA</land>
    <label>RCA</label>
    <prijs>9.90</prijs>
    <jaar>1982</jaar>
  </cd>
  <cd>
    <titel>Still got the blues</titel>
    <artiest>Gary Moore</artiest>
    <land>UK</land>
    <label>Virgin records</label>
    <prijs>10.20</prijs>
    <jaar>1990</jaar>
  </cd>
  <cd>
    <titel>Eros</titel>
    <artiest>Eros Ramazzotti</artiest>
    <land>EU</land>
    <label>BMG</label>
    <prijs>9.90</prijs>
    <jaar>1997</jaar>
  </cd>
  <cd>
    <titel>One night only</titel>
    <artiest>Bee Gees</artiest>
    <land>UK</land>
    <label>Polydor</label>
    <prijs>10.90</prijs>
    <jaar>1998</jaar>
  </cd>
  <cd>
    <titel>Sylvias Mother</titel>
    <artiest>Dr.Hook</artiest>
    <land>UK</land>
    <label>CBS</label>
    <prijs>8.10</prijs>
    <jaar>1973</jaar>
  </cd>
  <cd>
    <titel>Maggie May</titel>
    <artiest>Rod Stewart</artiest>
    <land>UK</land>
    <label>Pickwick</label>
    <prijs>8.50</prijs>
    <jaar>1990</jaar>
  </cd>
  <cd>
    <titel>Romanza</titel>
    <artiest>Andrea Bocelli</artiest>
    <land>EU</land>
    <label>Polydor</label>
    <prijs>10.80</prijs>
    <jaar>1996</jaar>
  </cd>
  <cd>
    <titel>When a man loves a woman</titel>
    <artiest>Percy Sledge</artiest>
    <land>USA</land>
    <label>Atlantic</label>
    <prijs>8.70</prijs>
    <jaar>1987</jaar>
  </cd>
  <cd>
    <titel>Black angel</titel>
    <artiest>Savage Rose</artiest>
    <land>EU</land>
    <label>Mega</label>
    <prijs>10.90</prijs>
    <jaar>1995</jaar>
  </cd>
  <cd>
    <titel>1999 Grammy Nominees</titel>
    <artiest>Many</artiest>
    <land>USA</land>
    <label>Grammy</label>
    <prijs>10.20</prijs>
    <jaar>1999</jaar>
  </cd>
  <cd>
    <titel>For the good times</titel>
    <artiest>Kenny Rogers</artiest>
    <land>UK</land>
    <label>Mucik Master</label>
    <prijs>8.70</prijs>
    <jaar>1995</jaar>
  </cd>
  <cd>
    <titel>Big Willie style</titel>
    <artiest>Will Smith</artiest>
    <land>USA</land>
    <label>Columbia</label>
    <prijs>9.90</prijs>
    <jaar>1997</jaar>
  </cd>
  <cd>
    <titel>Tupelo Honey</titel>
    <artiest>Van Morrison</artiest>
    <land>UK</land>
    <label>Polydor</label>
    <prijs>8.20</prijs>
    <jaar>1971</jaar>
  </cd>
  <cd>
    <titel>Soulsville</titel>
    <artiest>Jorn Hoel</artiest>
    <land>Norway</land>
    <label>WEA</label>
    <prijs>7.90</prijs>
    <jaar>1996</jaar>
  </cd>
  <cd>
    <titel>The very best of</titel>
    <artiest>Cat Stevens</artiest>
    <land>UK</land>
    <label>Island</label>
    <prijs>8.90</prijs>
    <jaar>1990</jaar>
  </cd>
  <cd>
    <titel>Stop</titel>
    <artiest>Sam Brown</artiest>
    <land>UK</land>
    <label>A and M</label>
    <prijs>8.90</prijs>
    <jaar>1988</jaar>
  </cd>
  <cd>
    <titel>Bridge of Spies</titel>
    <artiest>T'Pau</artiest>
    <land>UK</land>
    <label>Siren</label>
    <prijs>7.90</prijs>
    <jaar>1987</jaar>
  </cd>
  <cd>
    <titel>Private Dancer</titel>
    <artiest>Tina Turner</artiest>
    <land>UK</land>
    <label>Capitol</label>
    <prijs>8.90</prijs>
    <jaar>1983</jaar>
  </cd>
  <cd>
    <titel>Midt om natten</titel>
    <artiest>Kim Larsen</artiest>
    <land>EU</land>
    <label>Medley</label>
    <prijs>7.80</prijs>
    <jaar>1983</jaar>
  </cd>
  <cd>
    <titel>Pavarotti Gala Concert</titel>
    <artiest>Luciano Pavarotti</artiest>
    <land>UK</land>
    <label>DECCA</label>
    <prijs>9.90</prijs>
    <jaar>1991</jaar>
  </cd>
  <cd>
    <titel>The dock of the bay</titel>
    <artiest>Otis Redding</artiest>
    <land>USA</land>
    <label>Atlantic</label>
    <prijs>7.90</prijs>
    <jaar>1987</jaar>
  </cd>
  <cd>
    <titel>Picture book</titel>
    <artiest>Simply Red</artiest>
    <land>EU</land>
    <label>Elektra</label>
    <prijs>7.20</prijs>
    <jaar>1985</jaar>
  </cd>
  <cd>
    <titel>Red</titel>
    <artiest>The Communards</artiest>
    <land>UK</land>
    <label>London</label>
    <prijs>7.80</prijs>
    <jaar>1987</jaar>
  </cd>
  <cd>
    <titel>Unchain my heart</titel>
    <artiest>Joe Cocker</artiest>
    <land>USA</land>
    <label>EMI</label>
    <prijs>8.20</prijs>
    <jaar>1987</jaar>
  </cd>
</catalogus>

Met de volgende JavaScript code doorlopen we het XML bestand cd_catalogus.xml en geven we elke element weer in een tabelcel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>CD catalogus</title>
</head>
<body>
  <script type="text/javascript">
    xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET","cd_catalogus.xml",false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML;
    document.write("<table border='1'>");
    var x = xmlDoc.getElementsByTagName("cd");
    for (i = 0; i < x.length; i++){
      document.write("<tr><td>");
      document.write(x[i].getElementsByTagName("artiest")[0].childNodes[0].nodeValue);
      document.write("</td><td>");
      document.write(x[i].getElementsByTagName("titel")[0].childNodes[0].nodeValue);
      document.write("</td></tr>");
    }
    document.write("</table>");
  </script>
</body>
</html>
Weergeven

XML toepassingen

We gebruiken XML, HTML, XML DOM en JavaScript om een eenvoudige internet toepassing te schrijven.

Als XML bron gebruiken we het reeds voordien gebruikte cd_catalogus.xml bestand.

De eerste CD in een HTML div tag weergeven

De volgende code haalt de XML data van de eerste CD op en geeft deze weer in de HTML div tag met het id="CDweergeven". De functie Cdweergeven() wordt uitgevoerd na het laden van de pagina.

x = xmlDoc.getElementsByTagName("cd");
i = 0;
function CDweergeven(){
  artiest = (x[i].getElementsByTagName("artiest")[0].childNodes[0].nodeValue);
  titel = (x[i].getElementsByTagName("titel")[0].childNodes[0].nodeValue);
  jaar = (x[i].getElementsByTagName("jaar")[0].childNodes[0].nodeValue);
  tekst = "Artiest: " + artiest + "<br>Titel: " + titel + "<br>Jaar: "+ jaar;
  document.getElementById("CDweergeven").innerHTML = tekst;
}

Door de CD's bladeren

Om door de CD's te bladeren, voegen we twee functies toe, volgende() en vorige():

function volgende(){
  if (i < x.length-1){
    i++;
    CDweergeven();
  }
}
function vorige(){
  if (i > 0){
    i--;
    CDweergeven();
  }
}