AJAX - XMLHttpRequest

XMLHttpRequest 对象用于同服务器交换数据。

向服务器发送请求

如需向服务器发送请求，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
Methode Beschreibung
open(method, url, async)

规定请求的类型

  • method：请求的类型：GET 还是 POST
  • url：服务器（文件）位置
  • async：true（异步）或 false（同步）
send() 向服务器发送请求（用于 GET）
send(string) 向服务器发送请求（用于 POST）

GET 还是 POST？

GET 比 POST 更简单更快，可用于大多数情况下。

不过，请在以下情况始终使用 POST：

  • 缓存文件不是选项（更新服务器上的文件或数据库）
  • 向服务器发送大量数据（POST 无大小限制）
  • 发送用户输入（可包含未知字符），POST 比 GET 更强大更安全

GET 请求

一条简单的 GET 请求：

Beispiel

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

Probieren Sie es selbst aus

在上面的例子中，您可能会获得一个缓存的结果。为了避免此情况，请向 URL 添加一个唯一的 ID：

Beispiel

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();

Probieren Sie es selbst aus

如果您需要用 GET 方法来发送信息，请向 URL 添加这些信息：

Beispiel

xhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates", true);
xhttp.send();

Probieren Sie es selbst aus

POST 请求

一条简单的 POST 请求：

Beispiel

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

Probieren Sie es selbst aus

如需像 HTML 表单那样 POST 数据，请通过 setRequestHeader() 添加一个 HTTP 头部。请在 send() 在此方法中规定您需要发送的数据：

Beispiel

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");

Probieren Sie es selbst aus

Methode Beschreibung
setRequestHeader(header, value)

Fügen Sie dem Request HTTP-Header hinzu

  • header：Bestimmt den Header-Namen
  • value：Bestimmt den Header-Wert

url - Datei auf dem Server

der Methode url Parameter, ist die Adresse der Datei auf dem Server:

xhttp.open("GET", "ajax_test.asp", true);

Die Datei kann jeder Art sein, wie .txt und .xml, oder Server-Skriptdateien wie .asp und .php (die vor dem Senden der Antwort auf dem Server ausgeführt werden können).

Asynchron - true oder false?

Um Anfragen asynchron zu senden:open() der Methode async Der Parameter muss auf true:

xhttp.open("GET", "ajax_test.asp", true);

Die asynchrone Übertragung von Anfragen ist für Web-Entwickler ein großer Fortschritt. Viele Aufgaben auf dem Server sind sehr zeitaufwendig. Vor AJAX könnte dies zu einem Einfrieren oder Stillstand der Anwendung führen.

Durch asynchrone Übertragung muss JavaScript nicht auf die Serverantwort warten, sondern kann:

  • Ausführung anderer Skripte während der Wartezeit auf die Serverantwort
  • Verarbeitung der Antwort, wenn die Antwort bereit ist

onreadystatechange-Attribut

Durch das XMLHttpRequest-Objekt können Sie Funktionen definieren, die beim Empfang der Antwort aufgerufen werden.

Diese Funktion wird im XMLHttpResponse-Objekt ausgeführt onreadystatechange definiert in den Attributen:

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();

Probieren Sie es selbst aus

Sie werden in den folgenden Kapiteln mehr über onreadystatechange lernen.

synchroner Anfrage

Für die Ausführung synchroner Anfragen, bitte open() Der dritte Parameter im Methodenaufruf wird auf false:

xhttp.open("GET", "ajax_info.txt", false);

async = false wird manchmal für schnelle Tests verwendet. Sie werden auch synchronen Anfragen in älteren JavaScript-Code sehen.

Da der Code auf das Abschließen des Servers warten wird, ist die onreadystatechange-Funktion nicht erforderlich:

Beispiel

xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;

Probieren Sie es selbst aus

Wir empfehlen nicht den synchronen XMLHttpRequest (async = false), da JavaScript bis zur Bereitschaft der Serverantwort ausgesetzt wird. Wenn der Server beschäftigt oder langsam ist, hängt oder stoppt die Anwendung.

Synchroner XMLHttpRequest wird aus den Web-Standards entfernt, aber dieser Prozess könnte viele Jahre dauern.

Moderne Entwicklungstools werden ermutigt, Warnungen für die Verwendung synchroner Anfragen auszustellen und es kann zu InvalidAccessError- Ausnahmen kommen, wenn dies geschieht.