AJAX Senden von Anfragen

Nachdem das XMLHttpRequest-Objekt (siehe Kapitel zuvor) erstellt wurde, müssen wir eine Anfrage an den Server senden.

Anfrage an den Server senden

Um die Anfrage an den Server zu senden, verwenden wir zwei Methoden des XMLHttpRequest-Objekts:

• open()

• send()

　　httpRequest.open("GET", "ajax_intro.txt", true);
　　httpRequest.send();

Die open() Methode akzeptiert drei Parameter:

• Der erste Parameter ist die HTTP-Anfrage Methode-GET, POST

• Der zweite Parameter ist die URL, an die Sie die Anfrage senden

• Der dritte optionale Parameter setzt die Asynchronität der Anfrage (Standard ist true) fest

Die Methode send() akzeptiert einen optionalen Parameter:

• Für GET-Anfragen, keine Werte übertragen

• Für POST-Anfragen, übertragenName= Wertfür

HTTP-Anfragen: GET vs POST?

InGETIn der Methode wird der Inhalt (Name/Werte (Name= Wert) am Ende der URL hinzufügen.

GET wird normalerweise für einfache Formulare ohne Sicherheitsbedenken verwendet. GET bietet viele Vorteile für einfache Formulare.

• GET-Anfragen können zwischengespeichert werden

• GET-Anfragen bleiben im Browserverlauf

• GET-Anfragen können Lesezeichen hinzufügen

• Verwenden Sie niemals GET-Anfragen, wenn sensible Daten bearbeitet werden sollen

• GET-Anfragen haben eine Längenbeschränkung (nur2048Zeichen）

InPOSTIn der Methode wird der Inhalt nicht in der URL angezeigt.

Wenn Formulardaten sensible Informationen oder persönliche Daten enthalten, sollte stets POST verwendet werden.

• POST-Anfragen werden niemals zwischengespeichert

• POST-Anfragen bleiben nicht im Browserverlauf

• POST-Anfragen können keine Lesezeichen hinzufügen

• Verwenden Sie POST-Anfragen, wenn sensible Daten bearbeitet werden sollen

• POST-Anfragen haben keine Beschränkung der Datenlänge

GET-Anfrage

Der folgende Beispiel zeigt, wie man mit JavaScript einfache Ajax GET-Anfragen sendet:

httpRequest.open("GET", "ajax_get.php", true);
httpRequest.send();

In den obigen Beispielen könnten Sie möglicherweise zwischengespeicherte Ergebnisse erhalten. Um dies zu vermeiden, fügen Sie eine Zufallszahl in die URL ein:

httpRequest.open("GET", "ajax_get.php?r="　+　Math.random(), true);
httpRequest.send();

Wenn Sie Informationen mit dem GET-Verfahren senden möchten, fügen Sie die Informationen der URL hinzu:

httpRequest.open("GET", "ajax_get.php?fname=Seagull&lname=Anna", true);
httpRequest.send();

POST-Anfrage

Der folgende Beispiel zeigt, wie man mit JavaScript einfache Ajax POST-Anfragen sendet:

httpRequest.open("POST", "ajax_post.php", true);
httpRequest.send();

Wenn Sie Informationen mit dem POST-Verfahren senden möchten, verwenden Sie die Einstellung der HTTP-Kopfzeilen, setRequestHeader(), und geben Sie die zu sendenden Daten im send()-Methodenaufruf an:

httpRequest.open("POST", "ajax_post.php", true);
httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
httpRequest.send("fname=Seagull&lname=Anna");

Die Methode setRequestHeader() akzeptiert zwei Parameter:

• Der erste Parameter spezifiziert den Namen des Headers

• Der zweite Parameter spezifiziert den Wert des Headers

URL-Datei auf dem Server

Der zweite Parameter (URL) der Methode open() ist die Adresse der Datei auf dem Server.

　　httpRequest.open("GET", "ajax_get.php", true);

AJAX kann verschiedene Formate von Informationen senden und empfangen, einschließlich JSON, XML, HTML, PHP, ASP, Text usw.

onreadystatechange-Eigenschaft

Das XMLHttpRequest-Objekt ermöglicht es Ihnen, Funktionen zu definieren, die bei der Verarbeitung der Antwort ausgeführt werden sollen.

Die Antwortfunktion onreadystatechange wird in den Eigenschaften des XMLHttpRequest-Objekts definiert.

httpRequest.onreadystatechange = function() {
　　if (this.readyState ===　4　&& this.status ===　200) {
　document.getElementById("output").innerHTML = this.responseText;
　　}
};

Sie werden im folgenden Teil dieses Tutorials mehr über die Eigenschaft onreadystatechange erfahren.

Synchronanfrage

Der dritte Parameter der open() -Methode spezifiziert, ob die AnfrageAsynchronoderSynchron.

zu sendenSynchronAnfragen senden, ändern Sie den dritten Parameter der open() -Methode infalse.

Wenn SieSynchronWenn Sie eine Anfrage senden, müssen Sie keine Antwortfunktion angeben:

var httpRequest = new XMLHttpRequest();
httpRequest.open("GET", "ajax_intro.txt", false);
httpRequest.send();
document.getElementById("output").innerHTML = httpRequest.responseText;

Wird nicht empfohlenSynchronAnfragen, weil:

• JavaScript wird aufhören zu führen, bis der Server bereit ist, zu antworten

• Wenn der Server beschäftigt oder langsam ist, wird die Anwendung hängen bleiben oder stoppen

• Bietet eine schlechte Benutzererfahrung