Das XMLHttpRequest-Objekt wird verwendet, um Daten von einem Server anzufordern.
Um eine Anfrage an einen Server zu senden, verwenden wir die Methoden open() und send() des Objekts XMLHttpRequest:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();Gibt die Art der Anfrage an
Methode: die Art der Anfrage: GET oder POST
URL: der Speicherort des Servers (der Datei)
async: true (asynchron) oder false (synchron)
Sendet die Anfrage an den Server (wird für GET verwendet)
Sendet die Anfrage an den Server (wird für POST verwendet)
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, z. B. .txt und .xml oder Server-Skriptdateien wie .asp und .php (die Folgendes ausführen können). Aktionen auf dem Server, bevor die Antwort zurückgesendet wird).
Serveranfragen sollten asynchron gesendet werden.
Der asynchrone Parameter von open() Methode sollte auf true gesetzt sein:
xhttp.open("GET", "ajax_test.asp", true);Durch asynchrones Senden wird die JavaScript muss 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 bedenkenlos aus Ihrem Code entfernen.
Synchrones XMLHttpRequest (async=false) wird nicht empfohlen, da dies bei JavaScript der Fall ist Stoppen Sie die Ausführung, bis die Serverantwort bereit ist. Wenn der Server ausgelastet oder langsam ist, wird der Die Anwendung hängt oder stoppt.
GET-Anfrage oder POST-Anfrage?GET ist einfacher und schneller als POST und kann in den meisten Fällen verwendet werden.
Verwenden Sie jedoch immer POST-Anfragen, wenn:
Eine zwischengespeicherte Datei ist keine Option (Aktualisieren einer Datei oder Datenbank auf dem Server).
Senden einer großen Datenmenge an den Server (POST unterliegt keinen Größenbeschränkungen).
Beim Senden von Benutzereingaben (die unbekannte Zeichen enthalten können) ist POST robuster und sicherer als GET.
Eine einfache GET-Anfrage:
xhttp.open("GET", "demo_get.asp");
xhttp.send();Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "demo_get.asp");
xhttp.send();
}
</script>
</body>
</html>
Im obigen Beispiel erhalten Sie möglicherweise ein zwischengespeichertes Ergebnis. Um dies zu vermeiden, fügen Sie der URL eine eindeutige ID hinzu:
xhttp.open("GET", "demo_get.asp?t=" + Math.random());
xhttp.send();Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "demo_get.asp?t=" + Math.random());
xhttp.send();
}
</script>
</body>
</html>
Wenn Sie Informationen mit der Methode GET senden möchten, fügen Sie die Informationen zur URL hinzu:
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();
}
</script>
</body>
</html>
Wie der Server die Eingabe nutzt und wie der Server auf eine Anfrage reagiert, wird in einem späteren Kapitel erläutert.
Eine einfache POST-Anfrage:
xhttp.open("POST", "demo_post.asp");
xhttp.send();Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("POST", "demo_post.asp");
xhttp.send();
}
</script>
</body>
</html>
Um Daten wie ein HTML-Formular zu posten, fügen Sie einen HTTP-Header mit setRequestHeader() hinzu. Geben Sie die Daten an, die Sie in der Methode send() senden möchten:
xhttp.open("POST", "ajax_test.asp");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("POST", "demo_post2.asp");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
}
</script>
</body>
</html>
Fügt der Anfrage HTTP-Header hinzu
header: Gibt den Header-Namen an
Wert: Gibt den Header-Wert an
Um eine synchrone Anfrage auszuführen, ändern Sie den dritten Parameter in der Methode open() in false:
xhttp.open("GET", "ajax_info.txt", false);Manchmal wird async=false für schnelle Tests verwendet. Sie werden auch finden synchrone Anfragen in älterem JavaScript-Code.
Da der Code auf die Serververvollständigung wartet, ist kein onreadystatechange erforderlich Funktion:
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<p id="demo">Let AJAX change this text.</p>
<button type="button" onclick="loadDoc()">Change Content</button>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
}
</script>
</body>
</html>
Synchrones XMLHttpRequest (async=false) wird nicht empfohlen, da dies bei JavaScript der Fall ist Stoppen Sie die Ausführung, bis die Serverantwort bereit ist. Wenn der Server ausgelastet oder langsam ist, wird der Die Anwendung hängt oder stoppt.
Moderne Entwicklertools werden aufgefordert, vor der Verwendung zu warnen synchrone Anfragen und kann bei Auftreten eine InvalidAccessError-Ausnahme auslösen.