Ajax- introductie
AJAX is de droom van elke ontwikkelaar, omdat je:
- Gegevens lezen van een webserver - nadat de pagina 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() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
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
XMLHttpRequestobject (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
Moderne browsers (Fetch API)
Moderne browsers kunnen Fetch API gebruiken in plaats van het XMLHttpRequest-object.
Met de Fetch API-interface kan de webbrowser HTTP-verzoeken doen aan webservers.
Als u het XMLHttpRequest-object gebruikt, kan Fetch hetzelfde doen op een eenvoudigere manier.