Wat is AJAX?
AJAX is de droom van elke ontwikkelaar, omdat je:
- Gegevens lezen van een webserver - nadat een webpagina is geladen
- Een webpagina bijwerken zonder de pagina opnieuw te laden
- Gegevens naar een webserver verzenden - op de achtergrond
Ajax-voorbeeld
Let AJAX change this text
AJAX Voorbeeld uitgelegd
HTML-pagina
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
</body>
</html>
De HTML-pagina bevat een sectie <div> en een <button>.
De sectie <div> wordt gebruikt om informatie van een server weer te geven.
De <button> roept een functie aan (als erop wordt geklikt).
De functie vraagt om gegevens van een webserver en geeft deze weer:
Functie 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 = Een synchrone J avaScript A en X ML.
AJAX is geen programmeertaal.
AJAX gebruikt gewoon een combinatie van:
- Een in de browser ingebouwd XMLHttpRequest-object (om gegevens van een webserver op te vragen)
- JavaScript en HTML DOM (om de gegevens weer te geven of te gebruiken)
Ajax is een misleidende naam. AJAX-toepassingen kunnen XML gebruiken om gegevens te transporteren, maar het is even gebruikelijk om gegevens te transporteren als platte tekst of JSON-tekst.
Met AJAX kunnen webpagina's asynchroon worden bijgewerkt door achter de schermen gegevens uit te wisselen met een webserver. Dit betekent dat het mogelijk is om delen van een webpagina bij te werken, zonder de hele pagina opnieuw te laden.
Hoe Ajax werkt
- 1. Er vindt een gebeurtenis plaats in een webpagina (de pagina wordt geladen, er wordt op een knop geklikt)
- 2. Een XMLHttpRequest-object wordt gemaakt door JavaScript
- 3. Het XMLHttpRequest-object stuurt een verzoek naar een webserver
- 4. De server verwerkt het verzoek
- 5. De server stuurt een reactie terug naar de webpagina
- 6. Het antwoord wordt gelezen door JavaScript
- 7. Juiste actie (zoals pagina-update) wordt uitgevoerd door JavaScript
Volledige AJAX-zelfstudie
Dit was een korte beschrijving van AJAX.
Ga voor een volledige AJAX-zelfstudie naar W3Schools AJAX-zelfstudie .
Voor meer AJAX voorbeelden ga naar W3Schools AJAX Voorbeelden .