AJAX Inleiding

AJAX is een droom voor ontwikkelaars, omdat je kunt:

  • Vernieuw de pagina zonder opnieuw te laden
  • Vraag gegevens van de server op nadat de pagina is geladen
  • Ontvang gegevens van de server nadat de pagina is geladen
  • Verstuur gegevens naar de server in de achtergrond

AJAX Voorbeeld

Klik op de onderstaande knop om de tekst met AJAX te wijzigen:

Probeer het zelf

Uitleg van AJAX-voorbeeld

HTML-pagina

<!DOCTYPE html>
<html>
<body>
<div id="demo">
  <h2>Laat AJAX dit tekstgedeelte wijzigen</h2>
  <button type="button" onclick="loadDoc()">Wijzig tekst</button>
</div>
</body>
</html>

Deze HTML-pagina bevat een <div> en een <button>.

<div> Voor het weergeven van informatie van de server.

<button> Roep de functie aan (wanneer deze wordt aangeklikt).

Deze functie vraagt gegevens van de webserver op en toont deze:

Function loadDoc()
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

Wat is AJAX?

AJAX = Asynchronous JavaScript And XML.

AJAX is geen programmeertaal.

AJAX bestaat uit alleen maar:

  • Ingebouwde XMLHttpRequest-objecten van de browser (gegevens ophalen van de webserver)
  • JavaScript en HTML DOM (tonen of gebruiken van gegevens)

Ajax is een misleidende naam. Ajax-applicaties kunnen XML gebruiken om gegevens te overdragen, maar het is ook zeer gebruikelijk om gegevens als puur tekst of JSON-tekst te overdragen.

Ajax laat asynchrone updates van de webpagina toe door gegevens uit te wisselen met de webserver achter de scene. Dit betekent dat delen van de webpagina kunnen worden bijgewerkt zonder dat de hele pagina opnieuw moet worden geladen.

Hoe werkt AJAX

AJAX
  1. Er gebeurt een gebeurtenis in de webpagina (pagina laden, knop klikken)
  2. XMLHttpRequest-object wordt gecreëerd door JavaScript
  3. XMLHttpRequest-object stuurt een verzoek naar de webserver
  4. De server verwerkt de aanvraag
  5. De server stuurt het antwoord terug naar de webpagina
  6. Door JavaScript reacties lezen
  7. Door JavaScript juiste acties uitvoeren (bijvoorbeeld pagina bijwerken)