9. Ajax

Ajax betekent Asynchronous JavaScript and XML. Het is geen programmeertaal, maar een nieuwe manier om HTML, CSS en JavaScript te combineren.
Met Ajax kan je makkelijk info uitwisselen met een server en kan je delen van een pagina updaten zonder de hele pagina te herladen.

Bekijk de broncode van dit eerste voorbeeld.

9.1. Request en Response

In het voorbeeld klikt de gebruiker op een knop, waarna een deel van de pagina aangepast wordt.
In detail:

  1. Event 'klikken' roept JavaScript-functie laadTekst() aan.
  2. De functie creëert een object XMLHttpRequest() om te communiceren met de server.
    De syntax daarvoor is: variabele = new XMLHttpRequest();
    behalve dat sommige browserversies, zoals Internet Explorer 5 en 6, dat object niet ondersteunen; dan wordt het: variabele = new ActiveXObject("Microsoft.XMLHTTP");
    Aangezien nog bitter weinig mensen IE 5 of 6 gebruiken, is dat laatste deel niet meer erg van toepassing.
  3. De functie stuurt een vraag, request naar de server om het juiste bestand te openen:
    variable.open("GET","bestand.xxx",true);
    variabele.send();
  4. De server stuurt een antwoord, response in tekstvorm.
    • ofwel is het willekeurige tekst, een string uit een tekstbestand (TXT, HTML, JSON) en gebruik je eigenschap responseText;
    • ofwel is het gestructureerde tekst uit een XML-bestand en gebruik je eigenschap responseXML.

Moderne browsers laten niet toe dat je bestanden op een andere server aanspreekt. Daarom moeten zowel de HTML-pagina als het tekstbestand op dezelfde webserver staan. Voor het testen betekent dat op localhost.

9.2. Het bestand aanspreken

Met variabele.open() zal je een tekstbestand op de server openen en eruit kunnen lezen.
Dat bestand kan zijn:

Functie open() heeft drie parameters: variabele.open("methode", "pad/bestand", synchronisatie);

9.3. Asynchroon werken

Ajax betekent Asynchronous JavaScript and XML; in Ajax zetten we de laatste parameter van functie open() dan ook altijd true. Het voordeel is dat scripts gewoon verder uitgevoerd kunnen worden, ook al heeft de server nog niet geantwoord.

Uiteraard kom je dan wel in de problemen met de stukken script die pas uitgevoerd mogen worden nadat de server antwoordde.
Om dat op te vangen gaan we controleren in welke fase en status de request aan de server zit.

Tijdens de verwerking van een request treden na elkaar 5 fases, readyStates op en bij elke overgang naar een volgende fase wordt gebeurtenis, event onreadystatechange geactiveerd, 'getriggerd'.

readyStatebetekenis
0de request is nog niet geïnitialiseerd
1de verbinding met de server is gelegd
2de server heeft de request ontvangen
3de server is de request aan het uitvoeren
4de request is uitgevoerd en het antwoord, response is klaar.

Verder zijn twee statussen van het object XMLHttpRequest() van belang:

Stukken script die pas uitgevoerd mogen worden als het antwoord van de server klaar is, zetten we daarom best is een inline functie:
variabele.onreadystatechange = function() {
  if(variabele.readyState == 4 && variabele.status == 200) {
     code
  }
}