Como hacer una llamada Ajax con XMLHttpRequest

Name: Como hacer una llamada Ajax con XMLHttpRequest
Brand: Jose Aguilar
SKU: joseaguilarblog-7772
Availability: InStock
Rating: 5 (3 reviews)

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:

Source code

<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:

Source code

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:

Source code

$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!

(3 votos, promedio: 5 de 5)

Comparte en las redes sociales

¿Buscas trabajo de programador?

4 respuestas a “Como hacer una llamada Ajax con XMLHttpRequest”

Ramses dice:

09/11/2022 a las 5:16

Como 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 😀

Responder
- Jose Aguilar dice:
  
  14/12/2022 a las 11:46
  
  Si 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
  
  Responder
Hernán Sosa dice:

29/09/2022 a las 10:22

Descargué 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?

Responder
- Jose Aguilar dice:
  
  03/10/2022 a las 17:31
  
  Hola, 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
  
  Responder