Das XMLHttpRequest-Objekt dient zum Datenaustausch mit dem Server.
Um eine Anfrage an den Server zu senden, verwenden wir die Methoden open() und send() des XMLHttpRequest-Objekts:
xmlhttp.open("GET","ajax_info.txt",true);xmlhttp.send();| Verfahren | beschreiben |
|---|---|
| open( Methode , URL , asynchron ) | Gibt den Typ der Anfrage, die URL und ob die Anfrage asynchron verarbeitet werden soll. Methode : Art der Anfrage; GET oder POST URL : Der Speicherort der Datei auf dem Server async : true (asynchron) oder false (synchron) |
| send( string ) | Senden Sie die Anfrage an den Server. string : wird nur für POST-Anfragen verwendet |
GET ist einfacher und schneller als POST und funktioniert in den meisten Situationen.
Verwenden Sie POST-Anfragen jedoch in den folgenden Situationen:
Zwischengespeicherte Dateien können nicht verwendet werden (Aktualisierung von Dateien oder Datenbanken auf dem Server)
Senden Sie große Datenmengen an den Server (POST hat keine Datengrößenbeschränkung)
POST ist stabiler und zuverlässiger als GET, wenn Benutzereingaben gesendet werden, die unbekannte Zeichen enthalten
Eine einfache GET-Anfrage:
Im obigen Beispiel erhalten Sie möglicherweise zwischengespeicherte Ergebnisse.
Um dies zu vermeiden, fügen Sie der URL eine eindeutige ID hinzu:
Wenn Sie Informationen über die GET-Methode senden möchten, fügen Sie die Informationen zur URL hinzu:
Eine einfache POST-Anfrage:
Wenn Sie Daten wie ein HTML-Formular POSTEN müssen, verwenden Sie setRequestHeader(), um HTTP-Header hinzuzufügen. Geben Sie dann in der Methode send() die Daten an, die Sie senden möchten:
| Verfahren | beschreiben |
|---|---|
| setRequestHeader( header,value ) | Fügen Sie der Anfrage HTTP-Header hinzu. Header : Gibt den Namen des Headers an value : Gibt den Wert des Headers an |
Der URL- Parameter der open()-Methode ist die Adresse der Datei auf dem Server:
xmlhttp.open("GET","ajax_test.html",true);Bei der Datei kann es sich um einen beliebigen Dateityp handeln, z. B. .txt und .xml, oder um eine Serverskriptdatei, z. B. .asp und .php (die Aufgaben auf dem Server ausführen kann, bevor die Antwort zurückgesendet wird).
AJAX bezieht sich auf asynchrones JavaScript und XML.
Wenn das XMLHttpRequest-Objekt für AJAX verwendet werden soll, muss der async-Parameter seiner open()-Methode auf true gesetzt werden:
xmlhttp.open("GET","ajax_test.html",true);Für Webentwickler ist das Senden asynchroner Anfragen eine enorme Verbesserung. Viele auf dem Server ausgeführte Aufgaben sind recht zeitaufwändig. Vor AJAX konnte dies dazu führen, dass die Anwendung hängen blieb oder gestoppt wurde.
Mit AJAX muss JavaScript nicht auf eine Antwort vom Server warten, sondern:
Führen Sie andere Skripts aus, während Sie auf die Antwort des Servers warten
Verarbeiten Sie die Antwort, wenn sie fertig ist
Geben Sie bei Verwendung von async=true eine Funktion an, die als Reaktion auf den Bereitschaftszustand im Ereignis onreadystatechange ausgeführt werden soll:
In einem späteren Kapitel erfahren Sie mehr über onreadystatechange.
Wenn Sie async=false verwenden möchten, ändern Sie den dritten Parameter in der open()-Methode in false:
xmlhttp.open("GET","test1.txt",false);Wir empfehlen die Verwendung von async=false nicht, bei einigen kleinen Anfragen ist dies jedoch möglich.
Denken Sie daran, dass JavaScript wartet, bis die Serverantwort bereit ist, bevor es fortfährt. Wenn der Server ausgelastet oder langsam ist, bleibt die Anwendung hängen oder stoppt.
Hinweis: Wenn Sie async=false verwenden, schreiben Sie nicht die Funktion onreadystatechange, sondern fügen Sie den Code einfach nach der send()-Anweisung ein: