Ejemplos de uso de AJAX

En este artículo vamos a ver algunos ejemplos de uso comunes de AJAX y cómo crear aplicaciones web interactivas y eficientes. Al utilizar AJAX y realizar solicitudes al servidor sin tener que recargar la página completa, podemos mejorar la experiencia del usuario mostrando formularios interactivos o búsquedas en tiempo real. Este artículo forma parte de la serie introducción a AJAX. Una serie de artículos donde se explican todas las funcionalidades y utilidades de usar AJAX, mejorando la experiencia del usuario y optimizando el desarrollo de aplicaciones web.

Envío de formularios con AJAX

Uno de los ejemplos de uso comunes en AJAX en aplicaciones web son los formularios y su interacción con el usuario. El uso tradicional de los formularios requieren una recarga completa de la página que puede interrumpir la experiencia del usuario. AJAX permite enviar datos de formularios al servidor sin recargar la página, proporcionando una experiencia de usuario más fluida. Imaginemos un formulario de contacto donde los usuarios pueden enviar mensajes sin que la página se recargue.

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Envío de formulario AJAX</title>
</head>

<body>
  <h1>Formulario de contacto</h1>
  <form id="contactForm">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <label for="message">Message:</label>
    <textarea id="message" name="message" required></textarea>
    <button type="submit">Send</button>
  </form>
  <div id="responseMessage"></div>

<script>
  document.getElementById('contactForm').addEventListener('submit', function (event) {
    event.preventDefault();
    let formData = new FormData(this);
    let xhr = new XMLHttpRequest();
    xhr.open('POST', 'https://api.example.com/contact', true);

    xhr.onload = function () {
      if (xhr.status === 200) document.getElementById('responseMessage').textContent = 'Message sent successfully!';
      else document.getElementById('responseMessage').textContent = 'Error: ' + xhr.status;
    };

    xhr.onerror = function () {
      document.getElementById('responseMessage').textContent = 'Request failed';
    };

    xhr.send(formData);
  });  
</script>

</body>
</html>

En este código HTML y JavaScript definimos un formulario junto con una petición AJAX. Muchas partes del código ya se han comentado en otros artículos de esta serie, así que sólo explicaremos lo más interesante de este ejemplo.

addEventListener('submit', function (event) { ... } Establecemos la petición AJAX dentro del evento submit del formulario. Al detectarse el evento «submit» del formulario la petición AJAX entra en acción realizando las siguientes acciones:
- event.preventDefault(): Evitar que el formulario se envíe de manera tradicional, lo que recargaría la página.
- let formData = new FormData(this); Se crea un objeto FormData para recopilar los datos del formulario y se envía al servidor utilizando el método send(); de XMLHttpRequest.
- <div id="responseMessage"></div> Dependiendo de la respuesta del servidor, se actualiza el contenido del div con el resultado de la operación.

Contenido en tiempo real con AJAX

Otros ejemplos de uso comunes en AJAX son las aplicaciones web que muestran datos en tiempo real, como redes sociales o paneles de administración, donde es crucial actualizar el contenido sin recargar la página. AJAX permite realizar solicitudes periódicas para actualizar la información de manera continua. Supongamos que queremos mostrar actualizaciones en tiempo real de los comentarios de un post.

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contenido en tiempo real</title>
</head>

<body>
  <h1>Comentarios post</h1>
  <div id="comments"></div>
  <script>
    function fetchComments() {
      let xhr = new XMLHttpRequest();
      xhr.open('GET', 'https://api.example.com/comments', true);
      xhr.responseType = 'json';

      xhr.onload = function () {
        if (xhr.status === 200) {
          let comments = xhr.response;
          let commentsDiv = document.getElementById('comments');
          commentsDiv.innerHTML = '';
          comments.forEach(function (comment) {
            let commentElement = document.createElement('p');
            commentElement.textContent = comment.text;
            commentsDiv.appendChild(commentElement);
          });
        } else console.error('Error: ' + xhr.status);
      };

      xhr.onerror = function () {
        console.error('Request failed');
      };

      xhr.send();
    }

    setInterval(fetchComments, 5000);    
  </script>

</body>
</html>

En este código HTML y JavaScript definimos un <div id=comments></div> donde se insertarán los comentarios que se reciban en cada solicitud AJAX. Muchas partes del código ya se han comentado en otros artículos de esta serie, así que sólo explicaremos lo más interesante de este ejemplo.

fetchComments() Es la función que utilizaremos para realizar una solicitud AJAX y obtener los comentarios más recientes.
onload = function () Es donde actualizaremos el contenido del <div> con la respuesta AJAX.
setInterval() Utilizamos esta función para llamar cada 5 segundos a nuestra función AJAX y mantener los comentarios actualizados en tiempo real.

Uso de AJAX para búsquedas dinámicas

Uno de los ejemplos de uso más comunes en AJAX son las búsquedas dinámicas que permiten a los usuarios ver resultados mientras escriben en un campo de búsqueda. Esto es posible por la doble dirección de AJAX de enviar y recibir datos del servidor en tiempo real y mostrar los resultados sin recargar la página. Imaginemos un campo de búsqueda que muestra resultados en tiempo real a medida que el usuario escribe.

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Búsqueda dinámica</title>
</head>

<body>
  <h1>Búsqueda</h1>
  <input type="text" id="search" placeholder="Término a buscar ...">
  <div id="results"></div>
  <script>
    document.getElementById('search').addEventListener('input', function () {
      let query = this.value;
      if (query.length < 3) {
        document.getElementById('results').innerHTML = '';
        return;
      }

      let xhr = new XMLHttpRequest();
      xhr.open('GET', 'https://api.example.com/search?q=' + encodeURIComponent(query), true);
      xhr.responseType = 'json';

      xhr.onload = function () {
        if (xhr.status === 200) {
          let results = xhr.response;
          let resultsDiv = document.getElementById('results');
          resultsDiv.innerHTML = ''; 

          results.forEach(function (result) {
            let resultElement = document.createElement('p');
            resultElement.textContent = result.title;
            resultsDiv.appendChild(resultElement);
          });
        } else {
          console.error('Error: ' + xhr.status);
        }
      };

      xhr.onerror = function () {
        console.error('Request failed');
      };

      xhr.send();
    });    
  </script>

</body>
</html>

En este código HTML y JavaScript definimos un <input> de búsqueda junto con un <div id=results></div> donde se insertarán los resultados que se reciban en cada solicitud AJAX. Muchas partes del código ya se han comentado en otros artículos de esta serie, así que sólo explicaremos lo más interesante de este ejemplo.

addEventListener('input', function () { ... } El evento input en el campo de búsqueda envía una solicitud AJAX cada vez que el usuario escribe.
- if (query.length < 3) Solo se realizan búsquedas si la consulta tiene al menos 3 caracteres para evitar solicitudes innecesarias.
- encodeURIComponent(query) Es una función que codifica query para que sea seguro incluirlo en una URL.
- onload = function () La consulta de búsqueda se envía al servidor y los resultados se muestran dinámicamente en el <div id=results></div>.

Uso de AJAX para validar formularios

Otros de los ejemplos de uso comunes en AJAX es la validación de formularios en tiempo real. Esto permite verificar la validez de los datos del formulario mientras el usuario los introduce. AJAX facilita la validación con el servidor sin necesidad de enviar el formulario completo. Supongamos que queremos validar si un nombre de usuario está disponible en el registro mientras el usuario escribe en el campo.

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Validar formulario en tiempo real</title>
</head>

<body>
  <h1>Registro</h1>
  <form id="registerForm">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>
    <div id="usernameFeedback"></div>
    <button type="submit">Registrar</button>
  </form>
  <script>
    document.getElementById('username').addEventListener('input', function () {
      let username = this.value;
      let feedback = document.getElementById('usernameFeedback');

      if (username.length < 3) {
        feedback.textContent = 'Username must be at least 3 characters long';
        feedback.style.color = 'red';
        return;
      }

      let xhr = new XMLHttpRequest();
      xhr.open('GET', 'https://api.example.com/check-username?username=' + encodeURIComponent(username), true);
      xhr.responseType = 'json';

      xhr.onload = function () {
        if (xhr.status === 200) {
          let isAvailable = xhr.response.available;
          feedback.textContent = isAvailable ? 'Username is available' : 'Username is taken';
          feedback.style.color = isAvailable ? 'green' : 'red';
        } else {
          feedback.textContent = 'Error checking username';
          feedback.style.color = 'red';
        }
      };

      xhr.onerror = function () {
        feedback.textContent = 'Request failed';
        feedback.style.color = 'red';
      };

      xhr.send();
    });
  </script>

</body>
</html>

En este código HTML y JavaScript definimos un formulario junto con <div id=usernamefeedback></div> donde mostrar información de vuelta al usuario en cada petición AJAX. Muchas partes del código ya se han comentado en otros artículos de esta serie, así que sólo explicaremos lo más interesante de este ejemplo.

addEventListener('input', function () { ... } Se envía una solicitud AJAX al servidor cada vez que el usuario escribe en el campo de nombre de usuario.
- if (username.length < 3) Solo se realizan búsquedas si la consulta tiene al menos 3 caracteres para evitar solicitudes innecesarias y se informa al usuario.
- onload = function () El servidor devuelve si el nombre de usuario está disponible o no y el feedback se actualiza en tiempo real.
- Se muestra un mensaje de error si la solicitud falla o si el servidor devuelve un error.