Het XMLHttpRequest- object
Alle moderne browsers hebben een ingebouwd XMLHttpRequest-object om gegevens van een server op te vragen.
Alle belangrijke browsers hebben een ingebouwde XML-parser om XML te openen en te manipuleren.
Het XMLHttpRequest-object
Het object XMLHttpRequest kan worden gebruikt om gegevens op te vragen bij een webserver.
Het XMLHttpRequest-object is de droom van elke ontwikkelaar , 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
Start typing a name in the input field below:
Suggestions:
Een XMLHttpRequest verzenden
Alle moderne browsers hebben een ingebouwd XMLHttpRequest-object.
Een algemene JavaScript-syntaxis voor het gebruik ervan ziet er ongeveer zo uit:
Voorbeeld
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Action to be performed when the
document is read;
}
};
xhttp.open("GET", "filename", true);
xhttp.send();
Een XMLHttpRequest-object maken
De eerste regel in het bovenstaande voorbeeld maakt een XMLHttpRequest-object:
var xhttp = new XMLHttpRequest();
Het onreadystatechange-evenement
De eigenschap readyState bevat de status van de XMLHttpRequest.
De gebeurtenis onreadystatechange wordt elke keer dat de readyState wordt gewijzigd geactiveerd.
Tijdens een serververzoek verandert de readyState van 0 in 4:
0: verzoek niet geïnitialiseerd
1: serververbinding tot stand gebracht
2: verzoek ontvangen
3: verwerking verzoek
4: verzoek voltooid en reactie is gereed
Geef in de eigenschap onreadystatechange een functie op die moet worden uitgevoerd wanneer de readyState verandert:
xhttp.onreadystatechange = function()
Wanneer readyState 4 is en de status 200 is, is het antwoord klaar:
if (this.readyState == 4 && this.status == 200)
Eigenschappen en methoden voor XMLHttpRequest
| Method | Description |
|---|---|
| new XMLHttpRequest() | Creates a new XMLHttpRequest object |
| open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the file location async: true (asynchronous) or false (synchronous) |
| send() | Sends a request to the server (used for GET) |
| send(string) | Sends a request string to the server (used for POST) |
| onreadystatechange | A function to be called when the readyState property changes |
| readyState | 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 404: Page not found |
| responseText | The response data as a string |
| responseXML | The response data as XML data |
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.
De responseText Property
De eigenschap responseText retourneert het antwoord als een tekenreeks.
Als u het antwoord als een tekenreeks wilt gebruiken, gebruikt u de eigenschap responseText:
Voorbeeld
document.getElementById("demo").innerHTML = xmlhttp.responseText;
De responseXML-eigenschap
De eigenschap responseXML retourneert het antwoord als een XML DOM-object.
Als u het antwoord als een XML DOM-object wilt gebruiken, gebruikt u de eigenschap responseXML:
Voorbeeld
Vraag het bestand cd_catalog.xml aan en gebruik het antwoord als een XML DOM-object:
xmlDoc = xmlhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
GET of POST?
GET is eenvoudiger en sneller dan POST en kan in de meeste gevallen worden gebruikt.
Gebruik echter altijd POST-verzoeken wanneer:
- Een cachebestand is geen optie (update een bestand of database op de server)
- Een grote hoeveelheid gegevens naar de server verzenden (POST heeft geen beperkingen voor de grootte)
- Door gebruikersinvoer te verzenden (die onbekende tekens kan bevatten), is POST robuuster en veiliger dan GET
De url - Een bestand op een server
De parameter url van de methode open() is een adres naar een bestand op een server:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
Het bestand kan elk soort bestand zijn, zoals .txt en .xml, of serverscriptbestanden zoals .asp en .php (die acties op de server kunnen uitvoeren voordat het antwoord wordt teruggestuurd).
Asynchroon - waar of niet waar?
Om het verzoek asynchroon te verzenden, moet de parameter async van de methode open() worden ingesteld op true:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
Het asynchroon verzenden van verzoeken is een enorme verbetering voor webontwikkelaars. Veel van de taken die op de server worden uitgevoerd, nemen veel tijd in beslag.
Door asynchroon te verzenden, hoeft het JavaScript niet te wachten op de serverreactie, maar kan het in plaats daarvan:
- andere scripts uitvoeren terwijl u wacht op serverreactie
- omgaan met de reactie wanneer de reactie klaar is
Async = waar
Wanneer u async = true gebruikt, geeft u een functie op die moet worden uitgevoerd wanneer het antwoord gereed is in de gebeurtenis onreadystatechange:
Voorbeeld
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send();
Async = false
Om async = false te gebruiken, wijzigt u de derde parameter in de methode open() in false:
xmlhttp.open("GET", "xmlhttp_info.txt", false);
Het gebruik van async = false wordt niet aanbevolen, maar voor een paar kleine verzoeken kan dit ok zijn.
Onthoud dat het JavaScript NIET blijft uitvoeren totdat de serverrespons gereed is. Als de server bezet of traag is, zal de toepassing vastlopen of stoppen.
Opmerking: wanneer u async = false gebruikt, schrijf dan GEEN onreadystatechange-functie - plaats gewoon de code na de send()-instructie:
Voorbeeld
xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText;
XML-parser
Alle moderne browsers hebben een ingebouwde XML-parser.
Het XML Document Object Model (de XML DOM) bevat veel methoden om XML te openen en te bewerken.
Voordat toegang tot een XML-document kan worden verkregen, moet het echter in een XML DOM-object worden geladen.
Een XML-parser kan platte tekst lezen en converteren naar een XML DOM-object.
Een tekstreeks ontleden
In dit voorbeeld wordt een tekenreeks geparseerd in een XML DOM-object en wordt de informatie eruit geëxtraheerd met JavaScript:
Voorbeeld
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
Oude browsers (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");
}
Oude versies van Internet Explorer (IE5 en IE6) ondersteunen het DOMParser-object niet.
Om met IE5 en IE6 om te gaan, controleert u of de browser het DOMParser-object ondersteunt, of maakt u een ActiveXObject aan:
Voorbeeld
if (window.DOMParser) {
// code for modern browsers
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
}
else {
// code for old IE browsers
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(text);
}
Meer voorbeelden
Haal header-informatie op van een resource (bestand).
Haal specifieke header-informatie op van een resource (bestand).
Hoe een webpagina kan communiceren met een webserver terwijl een gebruiker tekens typt in een invoerveld.
Hoe een webpagina informatie kan ophalen uit een database met het XMLHttpRequest-object.
ophalen Maak een XMLHttpRequest om gegevens uit een XML-bestand op te halen en de gegevens in een HTML-tabel weer te geven.