Enviar solicitud POST usando XMLHttpRequest en JavaScript
Este artículo explicará cómo enviar una solicitud de publicación XMLHttpRequest en programación AJAX usando código JavaScript con diferentes ejemplos.
La solicitud XMLHttp
Para obtener datos de un servidor web, usamos XMLHttpRequest (XHR). Es una API en forma de objeto que transfiere datos entre un navegador web y un servidor web.
El XMLHttpRequest se usa principalmente en la programación AJAX.
Programación AJAX
AJAX significa JavaScript asíncrono y XML. No es un lenguaje de programación, pero AJAX es un conjunto de técnicas de desarrollo web que utilizan varias tecnologías web para desarrollar aplicaciones web asíncronas en el lado del cliente.
Podemos enviar datos a un servidor web en segundo plano usando AJAX.
Una vez que se carga la página, podemos leer datos de un servidor web y usar AJAX sin recargar. También podemos actualizar la página web.
Sintaxis básica para crear un objeto XMLHttpRequest:
my_variable = new XMLHttpRequest();
Definimos la función de devolución de llamada durante la carga de una solicitud.
my_variable.onload = function() {
// Here we can use the Data
}
Ahora, podemos enviar una solicitud.
xhttp.open("REQUEST_METHOD, "FILE_PATH")
xhttp.send();
Enviar solicitud POST usando XMLHttpRequest en JavaScript
La solicitud POST nos ayuda a enviar datos desde el lado del cliente al servidor. Usamos el método POST si necesitamos actualizar un archivo o datos en nuestra base de datos.
El método POST no tiene limitaciones de tamaño, lo que significa que podemos enviar una gran cantidad de datos al servidor. Comúnmente usamos el método POST para recibir las entradas de los usuarios y almacenarlas en nuestra base de datos como el formulario de registro.
El método POST es más seguro que el método GET.
Sintaxis básica:
my_variable = new XMLHttpRequest();
my_variable.onload = function() {
// Here, we can use the data
} xhttp.open('POST', 'MY_FILE_PATH');
xhttp.send();
Al utilizar el método POST, crearemos una fuente de JavaScript completa como ejemplo para comprender mejor la sintaxis y el funcionamiento de la solicitud POST. Recuerde que necesitamos establecer encabezados en nuestro objeto antes de ejecutar una solicitud.
Código de ejemplo:
<!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>
Explicación del código de ejemplo:
- En el código fuente HTML anterior, creamos un elemento de párrafo y definimos una ID para asignar su valor de texto.
- Hemos creado un botón,
Request post method, y el eventoonclickde ese botón es nuestra función llamadaloadRequest(). - En la función
loadRequest(), hemos creado un objeto deXMLHttpRequest(). - Luego, usamos la función de devolución de llamada para obtener los datos y asignar una solicitud-respuesta al párrafo usando
document.getElementById("test"). - Ahora, abrimos una conexión de solicitud y pasamos el método de solicitud
POSTy la ruta del archivo de solicitud de red. - Hemos configurado los encabezados de solicitud para definir el tipo de contenido.
- Finalmente, enviamos la solicitud utilizando los datos que queríamos publicar.
- Puede guardar esta fuente HTML con la ruta de archivo de solicitud de red correcta y guardar el archivo con la extensión
.html. - Ábralo en cualquier navegador para ver el resultado.