Como hacer una llamada Ajax con XMLHttpRequest
Descubre como hacer una llamada Ajax con XMLHttpRequest, objeto JavaScript obsoleto pero robusto y todavía en uso.27/07/2022
Las llamadas Ajax ayudan mucho al programador a hacer sus aplicaciones mucho más usables y rápidas ya que el usuario no tiene que recargar la página cuando desea solicitar una petición al servidor.
En este artículo vas a descubrir como hacer una llamada Ajax sin usar jQuery.
XMLHttpRequest es un objeto nativo del navegador que permite hacer solicitudes HTTP desde JavaScript.
En el ejemplo en funcionamiento vas a ver un formulario simple que solo pide el nombre y apellido al usuario para enviar la información al servidor usando esta técnica.
Formulario simple
En el cuerpo de tu página o dentro de la etiqueta <body> puedes agregar el formulario:
Es importante fijarse que el formulario tiene un nombre igual a «register» y que contiene 2 campos de tipo texto y un botón.
Por encima del formulario también he colocado un contenedor para depositar la respuesta que retorne el servidor.
LLamada Ajax con XMLHttpRequest
En el archivo .js que use tu proyecto puedes agregar lo siguiente:
const malert = document.querySelector('.alert');
const registrationButton = document.querySelector('button[name="submitRegister"]');
registrationButton.addEventListener('click', function(e) {
e.preventDefault();
let params = new FormData(document.forms.register);
let request = new XMLHttpRequest();
request.open("POST", "ajax.php");
request.send(params);
request.onload = function() {
malert.style.display = 'none';
malert.innerHTML = '';
malert.style.display = 'block';
malert.innerHTML = request.response;
};
});En primer lugar, creo 2 constantes que se usan en la llamada al evento en las que guardo:
- El contenedor que muestra el mensaje de confirmación.
- El botón que permite enviar la información al servidor.
Al botón del formulario le aplico la escucha del evento «click».
Cuando se haga clic en este botón ocurre lo siguiente:
- Con la función e.preventDefault() anulo la acción predeterminada del evento.
- En la variable params guardo los parámetros del formulario usando el objeto FormData.
- En la variable request creo una nueva instancia del objeto XMLHttpRequest.
- Con request.open() inicializo la instancia usando el método POST y el archivo ajax.php que debe estar en la misma raiz del proyecto.
- Con request.send() abro la conexión y envío la solicitud al servidor.
- Y, finalmente, con request.onload(), habilito el contenedor de confirmación para agregar la respuesta que retorna el servidor.
Recogida de información en el servidor
En este simple ejemplo el archivo ajax.php es el que recoge la información del servidor.
En este caso, tan solo realiza lo siguiente:
$name = $_POST['name'];
$lastname = $_POST['lastname'];
$message = 'La petición se procesó en el servidor.<br/>';
$message .= 'Nombre: '.$name.'<br/>';
$message .= 'Apellido: '.$lastname.'<br/>';
echo $message;Tan solo recibe los parámetros enviados desde el formulario mediante el método POST y prepara un mensaje retornarlo de vuelta.
En este archivo PHP se podría hacer infinidad de cosas tales como registrar la información en una base de datos, en un fichero, enviarla por email, etc.
Conclusiones
Bastante sencillo, ¿no?
Esta técnica es bastante antigua y, de hecho, debería haberla escrito hace mucho tiempo.
En cualquier caso, siempre pienso que nunca es tarde y que esto puede ayudar a muchos estudiantes que recién están practicando.
La principal ventaja que tiene usar esta técnica es que evitas tener que usar una librería externa como jQuery para hacer tus llamadas Ajax.
Quizá usando jQuery se ve más claro el código pero el resultado es el mismo.
La ventaja de usar el objeto XMLHttpRequest es que te evitas tener que cargar toda una librería jQuery en tu sitio y esto hace que tu proyecto sea más liviano.
Hernán Sosa
Publicado el 29/09/2022 10:22Descargué la carpeta, y no me muestra nada en el contenedor de arriba tras dar clic en el botón de enviar. ¿Cuál podría ser la razón de ello?
Jose Aguilar
Publicado el 03/10/2022 17:31Hola, Asegúrate de que se esté ejecutando correctamente el archivo .php. Revisa la consola del navegador para verificar que no haya ningún error JavaScript. Saludos
Ramses
Publicado el 09/11/2022 05:16Como le puedo pasar a través de un simple enlace a la capa alert informacion, algo como Pasar Info, esta genial tu tuto pero me gustaria ver ambas opciones por favor, gracias ????
Jose Aguilar
Publicado el 14/12/2022 11:46Si buscas información sobre el objeto FormData te darás cuenta que puedes agregarle más parámetros y podrías pasarle fácilmente ese nombre=Luis