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 open() und send() Methoden des XMLHttpRequest - Objekt:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();| Methode | Beschreibung |
|---|---|
| open(method, url, async) | Gibt die Art der Anfrage method : die Art der Anfrage: GET oder POST url : der Server (Datei) Standort async : true (asynchron) oder false (synchron) |
| send() | Sendet die Anfrage an den Server (für GET ) |
| send(string) | Sendet die Anfrage an den Server (für POST ) |
GET oder POST ?
GET ist einfacher und schneller als POST und kann in den meisten Fällen verwendet werden.
Jedoch immer verwenden POST - Anfragen , wenn:
- Eine Cache-Datei ist keine Option (Update eine Datei oder Datenbank auf dem Server).
- Senden einer großen Menge von Daten an den Server ( POST hat keine Größenbeschränkung).
- Senden von Benutzereingaben (die unbekannten Zeichen enthalten), POST ist robuster und sicherer als GET .
GET Requests
Eine einfache GET Anfrage:
In dem obigen Beispiel können Sie eine im Cache gespeicherte Ergebnis. Um dies zu vermeiden, fügen Sie eine eindeutige ID to the URL: ID to the URL:
Beispiel
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send(); Versuch es selber " Wenn Sie Informationen mit dem senden möchten GET - Methode, fügen Sie die Informationen an die URL:
Beispiel
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send(); Versuch es selber " POST Anfragen
Eine einfache POST Anfrage:
Um POST Daten wie ein HTML - Formular, fügen Sie einen HTTP header - setRequestHeader() HTTP header mit setRequestHeader() . Geben Sie die Daten , die Sie in der schicken möchten send() Methode:
Beispiel
xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford"); Versuch es selber " | Methode | Beschreibung |
|---|---|
| setRequestHeader(header, value) | Fügt HTTP-Header auf die Anfrage header : Gibt den Header - Namen value : Gibt den Header - Wert |
Die URL - eine Datei auf einem Server
Der url - Parameter der open() Methode ist eine Adresse in 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 Server-Scripting-Dateien wie .asp und .php (die Aktionen auf dem Server vor dem Senden der Antwort zurück ausführen kann).
Asynchronous - True oder False ?
AJAX steht für Asynchronous JavaScript und XML, und für das XMLHttpRequest - Objekt wie AJAX, die zu verhalten async - Parameter der open() Methode auf true gesetzt werden:
xhttp.open("GET", "ajax_test.asp", true);Senden asynchrone Anforderungen ist eine enorme Verbesserung für Web-Entwickler. Viele der Aufgaben auf dem Server durchgeführt sind sehr zeitaufwendig. Vor AJAX, könnte dieser Vorgang der Anwendung führen zu hängen oder zu stoppen.
Mit AJAX, wird der JavaScript muss nicht für die Server-Antwort warten, sondern kann stattdessen:
- ausführen andere Skripts, während für die Server-Antwort wartet
- befassen sich mit der Reaktion, wenn die Antwort bereit
Async=true
Wenn - Klasse = "notranslate" async = true, geben Sie eine Funktion auszuführen , wenn die Antwort in der onreadystatechange Ereignis bereit ist:
Beispiel
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send(); Versuch es selber " Sie werden mehr über onreadystatechange in einem späteren Kapitel lernen.
Async=false
So verwenden Sie async=false , ändern Sie den dritten Parameter in der open() Methode auf false:
xhttp.open("GET", "ajax_info.txt", false);Mit async=false wird nicht empfohlen, aber für ein paar kleine Wünsche kann dies in Ordnung sein.
Denken Sie daran, dass die JavaScript wird nicht weiterhin ausgeführt, bis der Server-Antwort bereit ist. Wenn der Server ausgelastet oder langsam ist, wird die Anwendung hängen oder zu stoppen.
Hinweis: Wenn Sie async=false , schreiben Sie nicht eine onreadystatechange Funktion - einfach den Code nach der send() Erklärung:
Beispiel
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText; Versuch es selber "