AJAX - XMLHttpRequest
Das XMLHttpRequest-Objekt wird verwendet, um Daten von einem Server anzufordern.
Senden Sie eine Anfrage an einen Server
Um eine Anfrage an einen Server zu senden, verwenden wir die Methoden open() und send() des XMLHttpRequestObjekts:
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) |
Die URL - Eine Datei auf einem Server
Der URL-Parameter der open()Methode 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
Der Standardwert für den async-Parameter ist async = true.
Sie können den dritten Parameter sicher aus Ihrem Code entfernen.
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.
GET oder POST?
GETist einfacher und schneller als POSTund 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 GETBitte:
Beispiel
xhttp.open("GET", "demo_get.asp");
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());
xhttp.send();
Wenn Sie Informationen mit der Methode senden möchten GET, fügen Sie die Informationen der URL hinzu:
Beispiel
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();
Wie der Server die Eingabe verwendet und wie der Server auf eine Anfrage antwortet, wird in einem späteren Kapitel erklärt.
POST-Anfragen
Eine einfache POSTBitte:
Beispiel
xhttp.open("POST", "demo_post.asp");
xhttp.send();
Um Daten wie ein HTML-Formular zu POSTen, fügen Sie einen HTTP-Header mit hinzu setRequestHeader(). send()Geben Sie die Daten an, die Sie in der Methode senden möchten :
Beispiel
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 Anfrage
Um eine synchrone Anfrage auszuführen, ändern Sie den dritten Parameter in der open()Methode in 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.
Moderne Entwicklertools sollten vor der Verwendung synchroner Anforderungen warnen und möglicherweise eine InvalidAccessError-Ausnahme auslösen, wenn sie auftritt.