AJAX - Senden Sie eine Anfrage an einen Server
Das XMLHttpRequest-Objekt wird verwendet, um Daten mit einem Server auszutauschen.
Senden Sie eine Anfrage an einen Server
Um eine Anfrage an einen Server zu senden, verwenden wir die Methoden open() und send() des XMLHttpRequest-Objekts:
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 oder POST?
GET ist einfacher und schneller als POST und kann in den meisten Fällen verwendet werden.
Verwenden Sie jedoch immer POST-Anforderungen, wenn:
- Eine zwischengespeicherte Datei ist keine Option (aktualisieren Sie eine Datei oder Datenbank auf dem Server).
- Senden einer großen Datenmenge an den Server (POST hat keine Größenbeschränkungen).
- Beim Senden von Benutzereingaben (die unbekannte Zeichen enthalten können) ist POST robuster und sicherer als GET.
GET-Anfragen
Eine einfache GET-Anfrage:
Beispiel
xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
Im obigen Beispiel erhalten Sie möglicherweise ein zwischengespeichertes Ergebnis. Um dies zu vermeiden, fügen Sie der URL eine eindeutige ID hinzu:
Beispiel
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();
Wenn Sie Informationen mit der GET-Methode senden möchten, fügen Sie die Informationen der URL hinzu:
Beispiel
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
POST-Anfragen
Eine einfache POST-Anfrage:
Beispiel
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
Um Daten wie ein HTML-Formular zu POSTen, fügen Sie einen HTTP-Header mit setRequestHeader() hinzu. Geben Sie die Daten, die Sie senden möchten, in der Methode send() an:
Beispiel
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 |
Die URL - Eine Datei auf einem Server
Der URL-Parameter der Methode open() ist eine Adresse zu einer Datei auf einem Server:
xhttp.open("GET", "ajax_test.asp", true);
Die Datei kann jede Art von Datei sein, wie .txt und .xml, oder Serverskriptdateien wie .asp und .php (die Aktionen auf dem Server ausführen können, bevor die Antwort zurückgesendet wird).
Asynchron – wahr oder falsch?
Serveranfragen sollten asynchron gesendet werden.
Der async-Parameter der Methode open() sollte auf true gesetzt werden:
xhttp.open("GET", "ajax_test.asp", true);
Durch das asynchrone Senden muss das JavaScript nicht auf die Serverantwort warten, sondern kann stattdessen:
- Führen Sie andere Skripte aus, während Sie auf die Antwort des Servers warten
- Behandeln Sie die Antwort, nachdem die Antwort fertig ist
Die onreadystatechange-Eigenschaft
Mit dem XMLHttpRequest-Objekt können Sie eine Funktion definieren, die ausgeführt werden soll, wenn die Anfrage eine Antwort erhält.
Die Funktion ist in der Eigenschaft onreadystatechange des XMLHttpResponse-Objekts definiert:
Beispiel
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();
Die im obigen Beispiel verwendete Datei „ajax_info.txt“ ist eine einfache Textdatei und sieht folgendermaßen aus:
<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 einem späteren Kapitel erfahren Sie mehr über onreadystatechange.
Synchrone Anfrage
Um eine synchrone Anfrage auszuführen, ändern Sie den dritten Parameter in der Methode open() auf false:
xhttp.open("GET", "ajax_info.txt", false);
Manchmal wird async = false für schnelle Tests verwendet. Sie finden auch synchrone Anfragen in älterem JavaScript-Code.
Da der Code auf die Beendigung des Servers wartet, ist keine onreadystatechange-Funktion erforderlich:
Beispiel
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
Synchrone XMLHttpRequest (async = false) wird nicht empfohlen, da die Ausführung von JavaScript gestoppt wird, bis die Serverantwort bereit ist. Wenn der Server ausgelastet oder langsam ist, bleibt die Anwendung hängen oder stoppt.
Der synchrone XMLHttpRequest wird gerade aus dem Webstandard entfernt, aber dieser Prozess kann viele Jahre dauern.
Moderne Entwicklertools sollten vor der Verwendung synchroner Anforderungen warnen und möglicherweise eine InvalidAccessError-Ausnahme auslösen, wenn sie auftritt.