XMLHttpRequest (XHR) es un objeto de navegador integrado que se puede utilizar para realizar solicitudes HTTP en JavaScript para intercambiar datos entre el cliente y el servidor. Es compatible con todos los navegadores modernos y antiguos.
En este breve artículo, aprenderá cómo hacer un HTTP POST solicitud mediante XHR. Digamos que tenemos el siguiente formulario HTML:
<form id="signup-form" action="/signup" method="POST">
<input type="text" name="name" placeholder="Enter name">
<input type="email" name="email" placeholder="Enter Email">
<input type="password" name="password" placeholder="Enter Password">
<button type="submit" role="button">Submit</button>
</form>
Queremos asegurarnos de que cuando el usuario haga clic en el botón "Enviar", el formulario se envíe de forma asincrónica a través de XHR. El primer paso es adjuntar un controlador de eventos el <form>
para capturar el submit
evento:
const form = document.querySelector('#signup-form');
// listen for submit even
form.addEventListener('submit', () => {
// TODO: submit post request here
});
El siguiente paso es crear y enviar una solicitud POST real. Si ya está familiarizado con jQuery, enviar una solicitud POST es bastante similar al $.post()
método. Así es como se ve:
form.addEventListener('submit', (event) => {
// disable default action
event.preventDefault();
// configure a request
const xhr = new XMLHttpRequest();
xhr.open('POST', '/signup');
// prepare form data
let data = new FormData(form);
// set headers
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
// send request
xhr.send(data);
// listen for `load` event
xhr.onload = () => {
console.log(xhr.responseText);
}
});
Eso es todo. El código anterior enviará una solicitud HTTP POST al servidor e imprimirá la respuesta en la consola.
Uso de la API de búsqueda
Puede simplificar fácilmente la solicitud anterior utilizando la API Fetch. Fetch es una alternativa basada en promesas a XHR para realizar solicitudes HTTP. Es mucho más legible y personalizable:
form.addEventListener('submit', (event) => {
// disable default action
event.preventDefault();
// make post request
fetch('/signup', {
method: 'POST',
body: new FormData(form),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then(res => res.text())
.then(html => console.log(html))
.catch(err => console.error(err));
});