AJAX - XMLHttpRequest Object
- Vorige pagina AJAX Inleiding
- Volgende pagina AJAX-verzoeken
Het XMLHttpRequest-object is de basis van AJAX.
- Maak XMLHttpRequest-object aan
- Definieer callback-functie
- Open een XMLHttpRequest-object
- Verzend een verzoek naar de server
XMLHttpRequest-object
Alle moderne browsers ondersteunen dit. XMLHttpRequest-object.
Het XMLHttpRequest-object kan worden gebruikt om achtergrondgegevens met een webserver uit te wisselen. Dit betekent dat delen van een webpagina kunnen worden bijgewerkt zonder dat de hele pagina opnieuw moet worden geladen.
Maak XMLHttpRequest-object aan
Alle moderne browsers (Chrome, Firefox, IE, Edge, Safari, Opera) hebben ingebouwde XMLHttpRequest-object.
Syntaxis voor het aanmaken van een XMLHttpRequest-object:
variable = new XMLHttpRequest();
Definieer callback-functie
Een callback-functie is een functie die als parameter aan een andere functie wordt doorgegeven.
In dit geval moet de callback-functie de code bevatten die moet worden uitgevoerd wanneer de respons gereed is.
xhttp.onload = function() {
// Wat moet je doen wanneer de respons gereed is
}
Verstuur verzoek
Om een verzoek naar de server te sturen, kun je de XMLHttpRequest-objectmethoden gebruiken. open() en send() Methode:
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Voorbeeld
// Maak XMLHttpRequest-object aan
const xhttp = new XMLHttpRequest();
// Definieer callback-functie
xhttp.onload = function() {
// Hier kun je gegevens gebruiken
}
// Verzend verzoek
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Toegang over domeinen (Access Across Domains)
Vanwege veiligheidsredenen staat moderne browsers geen toegang over domeinen toe.
Dit betekent dat de webpagina en het XML-bestand dat het probeert te laden op dezelfde server moeten staan.
De voorbeelden op CodeW3C.com openen XML-bestanden die zich in het domein CodeW3C.com bevinden.
Als je de bovenstaande voorbeelden op een van je eigen webpagina's wilt gebruiken, moet het XML-bestand zich op je eigen server bevinden.
Methoden van het XMLHttpRequest-object
| Methode | Description |
|---|---|
| new XMLHttpRequest() | Maak een nieuw XMLHttpRequest-object aan. |
| abort() | Annuleer het huidige verzoek. |
| getAllResponseHeaders() | Retourneer headerinformatie. |
| getResponseHeader() | Retourneer specifieke headerinformatie. |
| open(method, url, async, user, psw) |
Bepaal het verzoek.
|
| send() | Verstuur een verzoek naar de server, gebruikt voor GET-verzoeken. |
| send(string) | Verstuur een verzoek naar de server, gebruikt voor POST-verzoeken. |
| setRequestHeader() | Voeg een tag/waarde-paar toe aan de te verzenden header. |
Eigenschappen van het XMLHttpRequest-object
| Property | Description |
|---|---|
| onload | Definieer de functie die wordt aangeroepen wanneer een (laad)verzoek wordt ontvangen. |
| onreadystatechange | Definieer de functie die wordt aangeroepen wanneer het readyState-eigenschap verandert. |
| readyState |
Save the state of XMLHttpRequest.
|
| responseText | Return response data as a string. |
| responseXML | Return response data as XML data. |
| status |
Return the status number of the request
For a complete list, please visit Http Message Reference Manual |
| statusText | Return the status text (e.g. "OK" or "Not Found") |
onload property
When using XMLHttpRequest objects, you can define a callback function to execute when a response is received.
Please define the function in the XMLHttpRequest object: onload The function is defined in the property:
Voorbeeld
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Multiple callback functions
If there are multiple AJAX tasks on the website, then a function to execute the XMLHttpRequest object should be created, and a callback function should be created for each AJAX task.
The function call should include the URL and the function to be called when the response is ready.
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) {
// This is the action
}
function myFunction2(xhttp) {
// This is the action
}
onreadystatechange property
readyState Property saves the state of XMLHttpRequest.
onreadystatechange Property defines a callback function that is executed when the readyState changes.
status Properties and statusText Property saves the state of the XMLHttpRequest object.
| Property | Description |
|---|---|
| onreadystatechange | Define the function to be called when the readyState property changes. |
| readyState |
Save the state of XMLHttpRequest.
|
| status |
Return the status number of the request
For a complete list, please visit Http Message Reference Manual |
| statusText | statusText |
Returneert de status tekst (bijvoorbeeld "OK" of "Not Found").
Elke keer dat de readyState verandert, wordt de onreadystatechange-functie aangeroepen. 4 en status is 200 als de respons klaar is:
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();
}
Het onreadystatechange-evenement wordt vier keer (1-4) geactiveerd, elke keer dat de readyState verandert.
- Vorige pagina AJAX Inleiding
- Volgende pagina AJAX-verzoeken
