Como hacer una llamada Ajax con XMLHttpRequest

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:

<div class="alert"></div>
<form name="register" method="post">
    <input type="text" name="name" value="Jose">
    <input type="text" name="lastname" value="Aguilar">
    <button type="submit" name="submitRegister">Enviar</button>
</form>

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.

Ver demo Descargar

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.

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(2 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre