XML HttpRequest

Alle moderne browsers hebben een ingebouwde XMLHttpRequest-object, gebruikt om gegevens van de server op te vragen.

XMLHttpRequest-object

Het XMLHttpRequest-object kan worden gebruikt om gegevens van een webserver op te vragen.

Het XMLHttpRequest-object isDroom van ontwikkelaarsomdat je kunt:

• Pagina bijwerken - zonder de pagina opnieuw te laden
• Gegevens van de server aanvragen - nadat de pagina is geladen
• Gegevens van de server ontvangen - nadat de pagina is geladen
• Gegevens naar de server sturen - in de achtergrond

XMLHttpRequest voorbeeld

Wanneer u tekens invoert in het onderstaande invoerveld, wordt een XMLHttpRequest naar de server gestuurd en worden enkele naam-aanbevelingen (van de server) geretourneerd:

voorbeeld

Voer de naam in in het onderstaande invoerveld:

Verstuur XMLHttpRequest

Hieronder is de veelgebruikte JavaScript-syntaxis voor het gebruik van het XMLHttpRequest-object:

voorbeeld

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       // Typische actie die moet worden uitgevoerd wanneer het document klaar is:
       document.getElementById("demo").innerHTML = xhttp.responseText;
    }
};
xhttp.open("GET", "filename", true);
xhttp.send();

Probeer het zelf

uitleg van het voorbeeld

De eerste regel van het voorbeeld hierboven maakt een XMLHttpRequest-object:

var xhttp = new XMLHttpRequest();

onreadystatechange eigenschap specificeert de functie die moet worden uitgevoerd wanneer de status van het XMLHttpRequest-object verandert:

xhttp.onreadystatechange = function()

wanneer readyState eigenschap 4 en status Wanneer de eigenschap 200 is, is de respons gereed:

if (this.readyState == 4 && this.status == 200)

responseText Eigenschappen worden als tekststring retourneerd door de serverreactie.

Tekststrings kunnen worden gebruikt om de webpagina bij te werken:

document.getElementById("demo").innerHTML = xhttp.responseText;

Je zult in het AJAX-hoofdstuk van deze handleiding meer te weten komen over het XMLHttpRequest-object.