AJAX - Het XMLHttpRequest-object
De hoeksteen van AJAX is het XMLHttpRequest-object.
- Een XMLHttpRequest-object maken
- Definieer een callback-functie
- Open het XMLHttpRequest-object
- Stuur een verzoek naar een server
Het XMLHttpRequest-object
Alle moderne browsers ondersteunen het XMLHttpRequestobject.
Het XMLHttpRequestobject kan worden gebruikt om 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.
Een XMLHttpRequest-object maken
Alle moderne browsers (Chrome, Firefox, IE, Edge, Safari, Opera) hebben een ingebouwd XMLHttpRequestobject.
Syntaxis voor het maken van een XMLHttpRequestobject:
variable = new XMLHttpRequest();
Een terugbelfunctie definiëren
Een callback-functie is een functie die als parameter wordt doorgegeven aan een andere functie.
In dit geval moet de callback-functie de code bevatten die moet worden uitgevoerd wanneer het antwoord gereed is.
xhttp.onload = function() {
// What to do when the response is ready
}
Stuur een verzoek
Om een verzoek naar een server te sturen, kunt u de methoden open() en send() van het
XMLHttpRequestobject gebruiken:
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Voorbeeld
// Create an XMLHttpRequest object
const xhttp = new XMLHttpRequest();
// Define a callback function
xhttp.onload = function() {
// Here you can use the Data
}
// Send a request
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Toegang tot verschillende domeinen
Om veiligheidsredenen staan moderne browsers geen toegang tussen domeinen toe.
Dit betekent dat zowel de webpagina als het XML-bestand dat het probeert te laden, zich op dezelfde server moeten bevinden.
De voorbeelden op W3Schools zijn allemaal open XML-bestanden die zich op het W3Schools-domein bevinden.
Als u het bovenstaande voorbeeld op een van uw eigen webpagina's wilt gebruiken, moeten de XML-bestanden die u laadt zich op uw eigen server bevinden.
XMLHttpRequest-objectmethoden
| Method | Description |
|---|---|
| new XMLHttpRequest() | Creates a new XMLHttpRequest object |
| abort() | Cancels the current request |
| getAllResponseHeaders() | Returns header information |
| getResponseHeader() | Returns specific header information |
| open(method, url, async, user, psw) | Specifies the request method: the request type GET or POST url: the file location async: true (asynchronous) or false (synchronous) user: optional user name psw: optional password |
| send() | Sends the request to the server Used for GET requests |
| send(string) | Sends the request to the server. Used for POST requests |
| setRequestHeader() | Adds a label/value pair to the header to be sent |
Objecteigenschappen XMLHttpRequest
| Property | Description |
|---|---|
| onload | Defines a function to be called when the request is recieved (loaded) |
| onreadystatechange | Defines a function to be called when the readyState property changes |
| readyState | Holds the status of the XMLHttpRequest. 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| responseText | Returns the response data as a string |
| responseXML | Returns the response data as XML data |
| status | Returns the status-number of a request 200: "OK" 403: "Forbidden" 404: "Not Found" For a complete list go to the Http Messages Reference |
| statusText | Returns the status-text (e.g. "OK" or "Not Found") |
De onload-eigenschap
Met het XMLHttpRequestobject kunt u een terugbelfunctie definiëren die moet worden uitgevoerd wanneer het verzoek een antwoord ontvangt.
De functie is gedefinieerd in de onloadeigenschap van het XMLHttpRequestobject:
Voorbeeld
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Meerdere terugbelfuncties
Als u meer dan één AJAX-taak op een website heeft, moet u één functie maken voor het uitvoeren van het XMLHttpRequestobject en één callback-functie voor elke AJAX-taak.
De functieaanroep moet de URL bevatten en welke functie moet worden aangeroepen als het antwoord gereed is.
Voorbeeld
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {cFunction(this);}
xhttp.open("GET", url);
xhttp.send();
}
function myFunction1(xhttp) {
// action goes here
}
function myFunction2(xhttp) {
// action goes here
}
De eigenschap onreadystatechange
De readyStateeigenschap bevat de status van de XMLHttpRequest.
De onreadystatechangeeigenschap definieert een callback-functie die moet worden uitgevoerd wanneer de readyState verandert.
De statuseigenschap en de statusTexteigenschappen bevatten de status van het XMLHttpRequest-object.
| Property | Description |
|---|---|
| onreadystatechange | Defines a function to be called when the readyState property changes |
| readyState | Holds the status of the XMLHttpRequest. 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| status | 200: "OK" 403: "Forbidden" 404: "Page not found" For a complete list go to the Http Messages Reference |
| statusText | Returns the status-text (e.g. "OK" or "Not Found") |
De onreadystatechangefunctie wordt elke keer aangeroepen als de readyState verandert.
Wanneer readyState4 is en de status 200 is, is het antwoord klaar:
Voorbeeld
function loadDoc() {
const 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");
xhttp.send();
}
De onreadystatechangegebeurtenis wordt vier keer geactiveerd (1-4), één keer voor elke wijziging in de readyState.