Senden Sie eine POST-Anfrage mit XMLHttpRequest in JavaScript
In diesem Artikel wird erläutert, wie Sie eine XMLHttpRequest-Postanforderung in der AJAX-Programmierung mithilfe von JavaScript-Code mit verschiedenen Beispielen senden.
Die XMLHttpRequest
Um Daten von einem Webserver abzurufen, verwenden wir XMLHttpRequest (XHR). Es ist eine API in Form eines Objekts, das Daten zwischen einem Webbrowser und einem Webserver überträgt.
Der XMLHttpRequest wird hauptsächlich in der AJAX-Programmierung verwendet.
AJAX-Programmierung
AJAX steht für Asynchronous JavaScript and XML. Es ist keine Programmiersprache, aber AJAX ist eine Reihe von Webentwicklungstechniken, die mehrere Webtechnologien verwenden, um asynchrone Webanwendungen auf der Clientseite zu entwickeln.
Mit AJAX können wir im Hintergrund Daten an einen Webserver senden.
Sobald die Seite geladen ist, können wir Daten von einem Webserver lesen und AJAX ohne Neuladen verwenden. Wir können die Webseite auch aktualisieren.
Grundlegende Syntax zum Erstellen eines XMLHttpRequest-Objekts:
my_variable = new XMLHttpRequest();
Wir definieren die Rückruffunktion während des Ladens einer Anfrage.
my_variable.onload = function() {
// Here we can use the Data
}
Jetzt können wir eine Anfrage senden.
xhttp.open("REQUEST_METHOD, "FILE_PATH")
xhttp.send();
Senden Sie eine POST-Anfrage mit XMLHttpRequest in JavaScript
Die POST-Anfrage hilft uns, Daten von der Clientseite an den Server zu senden. Wir verwenden die POST-Methode, wenn wir eine Datei oder Daten in unserer Datenbank aktualisieren müssen.
Die POST-Methode hat keine Größenbeschränkung, was bedeutet, dass wir eine riesige Datenmenge an den Server senden können. Wir verwenden üblicherweise die POST-Methode, um Benutzereingaben zu erhalten und sie wie das Anmeldeformular in unserer Datenbank zu speichern.
Die POST-Methode ist sicherer als die GET-Methode.
Grundlegende Syntax:
my_variable = new XMLHttpRequest();
my_variable.onload = function() {
// Here, we can use the data
} xhttp.open('POST', 'MY_FILE_PATH');
xhttp.send();
Durch die Verwendung der POST-Methode werden wir eine vollständige JavaScript-Quelle als Beispiel erstellen, um die Syntax und Funktionsweise der POST-Anforderung besser zu verstehen. Denken Sie daran, dass wir Header in unserem Objekt setzen müssen, bevor Sie eine Anfrage ausführen.
Beispielcode:
<!DOCTYPE html>
<html>
<body>
<h2>XMLHttpRequest using POST method</h2>
<button type="button" onclick="loadRequest()">Request post method</button> // calling of a request
<p id="test"></p>
<script>
function loadRequest() {
const requestObject = new XMLHttpRequest(); // object of request
requestObject.onload = function() {
document.getElementById("test").innerHTML = this.responseText; // displaying response text in paragraph tag
}
requestObject.open("POST", "MY_FILE_PATH");
requestObject.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // setting of headers in request
requestObject.send("DATA_TO_SEND"); // data to send in request
}
</script>
</body>
</html>
Beispielcode-Erklärung:
- Im obigen HTML-Quellcode haben wir ein Absatzelement erstellt und eine ID definiert, um seinen Textwert zuzuweisen.
- Wir haben eine Schaltfläche
Post-Methode anfordernerstellt, und dasonclick-Ereignis dieser Schaltfläche ist unsere Funktion namensloadRequest(). - In der Funktion
loadRequest()haben wir ein Objekt vonXMLHttpRequest()erstellt. - Dann haben wir die Callback-Funktion verwendet, um die Daten abzurufen und dem Absatz mit
document.getElementById("test")eine Request-Response zuzuweisen. - Nun haben wir eine Request-Verbindung geöffnet und die Request-Methode
POSTund den Netzwerk-Request-Dateipfad übergeben. - Wir haben die Anforderungsheader eingerichtet, um den Inhaltstyp zu definieren.
- Schließlich haben wir die Anfrage mit den Daten gesendet, die wir posten wollten.
- Sie können diese HTML-Quelle mit dem richtigen Netzwerkanforderungsdateipfad speichern und die Datei mit der Erweiterung
.htmlspeichern. - Öffnen Sie es in einem beliebigen Browser, um das Ergebnis anzuzeigen.