So senden Sie eine Postanforderung mit XMLHTTPREquest in JavaScript

Das XMLHTTPrequest ist eine API in Form von Objekten, mit denen Daten von Servern gesendet oder empfangen werden. Die Send () -Methode von XMLHTTPrequest stellt eine Anforderung an den Server. Die Anfrage ist standardmäßig asynchron, kann aber auch synchron sein. Wenn die Anforderung synchron ist, gibt die Methode nur zurück.

Hmlhttprequest ist Teil von AJAX, die Webentwicklungstechniken sind, mit denen asynchrone Web -Apps entwickelt werden können. Auf asynchronen Webseiten können wir Daten von Servern senden und empfangen und Webseiten aktualisieren, ohne die Webseiten neu zu laden.

Die von XMLHTTPrequest gesendete Anfrage kann entweder eine GET- oder Post -Anfrage sein. Wir können in den meisten Fällen erhalten, aber Post ist sicherer und sollte verwendet werden, wenn wir große Datenmengen oder unbekannte Benutzereingaben haben.

Senden einer Postanforderung mit XMLHTTPrequest

Um eine Anfrage über XMLHTTPrequest zu senden, müssen wir zunächst ein neues XMLHTTPREquest -Objekt erstellen:

const request = new xmlhttprequest ();

Um eine Anfrage zu senden, müssen wir die Methoden Open () und Senden () verwenden. Die Open () -Methode enthält drei Parameter, nämlich die Methode (GET/Post), URL (Dateispeicherort auf dem Server) und einen booleschen Wert für asynchroner oder synchroner Natur der Anforderung:

Anfrage.öffnen ("post", "file_path", true);

Für eine synchrone Anfrage:

Anfrage.öffnen ("post", "file_path", false);

Mit asynchronen Anforderungen wartet JavaScript nicht, bis die Anfrage abgeschlossen ist und andere Skripte ausführen kann, während die Anfrage abgeschlossen wird. Es wird nicht empfohlen, synchrone Anfragen zu verwenden, da die Web -App zum Stillstand kommen kann, wenn der Server beschäftigt ist.

Vor dem Senden der Daten nach der Send () -Methode können wir auch den SetRequestheader () verwenden, um die Daten wie ein HTML -Formular mit einem Header -Namen und einem Header -Wert zu senden:

Anfrage.setRequestheader (Header, Wert);

Jetzt können wir Daten mit einem optionalen Parameter senden, der den Körper der Anforderung angibt:

Anfrage.Senden (Körper);

Die Eigenschaft onReadyStatechange kann auf dem XMLHTTPREQUEST -Objekt verwendet werden, um eine Funktion auszuführen, sobald eine Antwort vom Server empfangen wurde:

Anfrage.onreadyStatechange =>
if (das.ReadyState == xmlHttprequest.Hab es getan.Status == 200)
// Code, die ausgeführt werden soll, sobald die Anfrage beendet ist

;

Alles in allem wird eine einfache asynchrone Postanforderung mit XMLHTTPREQUEST so ungefähr so ​​aussehen:

const request = new xmlhttprequest ();
Anfrage.öffnen ("post", "file_path", true);
Anfrage.setRequestheader (Header, Wert);
Anfrage.onreadyStatechange =>
if (das.ReadyState == xmlHttprequest.Hab es getan.Status == 200)
// Code, die ausgeführt werden soll, sobald die Anfrage beendet ist

;
Anfrage.Senden (Körper);

Abschluss

AJAXs XMLHTTPrequest kann zum Senden und Empfangen von Daten vom Server verwendet werden und die Webseite danach aktualisieren. Diese Technik ist reines Gold für Entwickler, da sie das alles tun können, ohne die Seite neu laden zu müssen.