AJAX - XMLHttpRequest
Het object XMLHttpRequest wordt gebruikt om gegevens op te vragen bij 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 XMLHttpRequestobject:
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) |
De url - Een bestand op een server
De url-parameter van de open()methode 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 standaardwaarde voor de parameter async is async = true.
U kunt de derde parameter veilig uit uw code verwijderen.
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.
GET of POST?
GETis 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 GETverzoek:
Voorbeeld
xhttp.open("GET", "demo_get.asp");
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());
xhttp.send();
Als u informatie met de methode wilt verzenden GET, voegt u de informatie toe aan de URL:
Voorbeeld
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();
Hoe de server de invoer gebruikt en hoe de server reageert op een verzoek, wordt in een later hoofdstuk uitgelegd.
POST-verzoeken
Een eenvoudig POSTverzoek:
Voorbeeld
xhttp.open("POST", "demo_post.asp");
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 in de send()methode:
Voorbeeld
xhttp.open("POST", "ajax_test.asp");
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 |
synchrone aanvraag
Om een synchroon verzoek uit te voeren, wijzigt u de derde parameter in de open()methode 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 onreadystatechange
functie 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.
Moderne ontwikkelaarstools worden aangemoedigd om te waarschuwen voor het gebruik van synchrone verzoeken en kunnen een InvalidAccessError-uitzondering genereren wanneer deze zich voordoet.