AJAX - Stuur een verzoek naar een server
Het object XMLHttpRequest wordt gebruikt om gegevens uit te wisselen met een server.
Stuur een verzoek naar een server
Om een verzoek naar een server te sturen, gebruiken we de methoden open() en send() van het XMLHttpRequest-object:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
| Method | Description |
|---|---|
| open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the server (file) location async: true (asynchronous) or false (synchronous) |
| send() | Sends the request to the server (used for GET) |
| send(string) | Sends the request to the server (used for POST) |
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.
KRIJG verzoeken
Een eenvoudig GET-verzoek:
Voorbeeld
xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
In het bovenstaande voorbeeld krijgt u mogelijk een resultaat in de cache. Om dit te voorkomen, voegt u een unieke ID toe aan de URL:
Voorbeeld
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();
Als u informatie met de GET-methode wilt verzenden, voegt u de informatie toe aan de URL:
Voorbeeld
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
POST-verzoeken
Een eenvoudig POST-verzoek:
Voorbeeld
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
Om gegevens als een HTML-formulier te POST, voegt u een HTTP-header toe met setRequestHeader(). Specificeer de gegevens die u wilt verzenden met de methode send():
Voorbeeld
xhttp.open("POST", "demo_post2.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
| Method | Description |
|---|---|
| setRequestHeader(header, value) | Adds HTTP headers to the request header: specifies the header name value: specifies the header value |
De url - Een bestand op een server
De parameter url van de methode open() is een adres naar een bestand op een server:
xhttp.open("GET", "ajax_test.asp", 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?
Serververzoeken moeten asynchroon worden verzonden.
De parameter async van de methode open() moet worden ingesteld op true:
xhttp.open("GET", "ajax_test.asp", true);
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 het antwoord nadat het antwoord klaar is
De eigenschap onreadystatechange
Met het object XMLHttpRequest kunt u een functie definiëren die moet worden uitgevoerd wanneer de aanvraag een antwoord ontvangt.
De functie is gedefinieerd in de eigenschap onreadystatechange van het object XMLHttpResponse:
Voorbeeld
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
Het bestand "ajax_info.txt" dat in het bovenstaande voorbeeld wordt gebruikt, is een eenvoudig tekstbestand en ziet er als volgt uit:
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
In een later hoofdstuk leert u meer over onreadystatechange.
synchrone aanvraag
Om een synchroon verzoek uit te voeren, wijzigt u de derde parameter in de methode open() in false:
xhttp.open("GET", "ajax_info.txt", false);
Soms worden async = false gebruikt voor snel testen. U vindt ook synchrone verzoeken in oudere JavaScript-code.
Aangezien de code wacht tot de server is voltooid, is er geen functie onreadystatechange nodig:
Voorbeeld
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
Synchronous XMLHttpRequest (async = false) wordt niet aanbevolen omdat het JavaScript niet meer wordt uitgevoerd totdat het serverantwoord gereed is. Als de server bezet of traag is, zal de toepassing vastlopen of stoppen.
Synchronous XMLHttpRequest wordt momenteel verwijderd uit de webstandaard, maar dit proces kan vele jaren duren.
Moderne ontwikkelaarstools worden aangemoedigd om te waarschuwen voor het gebruik van synchrone verzoeken en kunnen een InvalidAccessError-uitzondering genereren wanneer deze zich voordoet.