XML HTTP-verzoek
Alle moderne browsers hebben een ingebouwd XMLHttpRequest-object om gegevens van een server op te vragen.
Het XMLHttpRequest-object
Het object XMLHttpRequest kan worden gebruikt om gegevens op te vragen bij een webserver.
Het XMLHttpRequest-object is een droom voor ontwikkelaars , omdat u:
- 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
XMLHttpRequest-voorbeeld
Wanneer u een teken typt in het onderstaande invoerveld, wordt een XMLHttpRequest naar de server verzonden en worden enkele naamsuggesties geretourneerd (van de server):
Voorbeeld
Het bovenstaande voorbeeld wordt uitgelegd in de AJAX-hoofdstukken van deze tutorial.
Een XMLHttpRequest verzenden
Een algemene JavaScript-syntaxis voor het gebruik van het XMLHttpRequest-object ziet er ongeveer zo uit:
Voorbeeld
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready:
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "filename", true);
xhttp.send();
Voorbeeld uitgelegd
De eerste regel in het bovenstaande voorbeeld maakt een XMLHttpRequest - object:
var xhttp = new XMLHttpRequest();
De eigenschap onreadystatechange specificeert een functie die moet worden uitgevoerd telkens wanneer de status van het XMLHttpRequest-object verandert:
xhttp.onreadystatechange = function()
Wanneer de eigenschap readyState 4 is en de eigenschap status 200 is, is het antwoord gereed:
if (this.readyState == 4 && this.status == 200)
De eigenschap responseText retourneert het serverantwoord als een tekenreeks.
De tekstreeks kan worden gebruikt om een webpagina bij te werken:
document.getElementById("demo").innerHTML = xhttp.responseText;
In de AJAX-hoofdstukken van deze tutorial leer je veel meer over het XMLHttpRequest-object.
Oude versies van Internet Explorer (IE5 en IE6)
Oude versies van Internet Explorer (IE5 en IE6) ondersteunen het XMLHttpRequest-object niet.
Om met IE5 en IE6 om te gaan, controleert u of de browser het XMLHttpRequest-object ondersteunt, of maakt u een ActiveXObject aan:
Voorbeeld
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}