Ajax- introductie
AJAX is de droom van elke ontwikkelaar, omdat je:
- Een webpagina bijwerken zonder de pagina opnieuw te laden
- Gegevens opvragen bij een server - nadat de pagina is geladen
- Gegevens ontvangen van een server - nadat de pagina is geladen
- Gegevens naar een server verzenden - op de achtergrond
Probeer het zelf Voorbeelden in elk hoofdstuk
In elk hoofdstuk kunt u de voorbeelden online bewerken en op een knop klikken om het resultaat te bekijken.
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();
}
Het bestand "ajax_info.txt" dat in het bovenstaande voorbeeld wordt gebruikt, is een eenvoudig tekstbestand en ziet er als volgt uit:
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
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