Crear solicitudes AJAX con XMLHttpRequest

Introducción

En este laboratorio, los participantes explorarán el poderoso mundo de AJAX (Asynchronous JavaScript and XML) y aprenderán a crear aplicaciones web dinámicas utilizando XMLHttpRequest. El tutorial completo cubre los conceptos fundamentales de la comunicación web asincrónica, guiando a los aprendices a través del proceso de enviar y recibir datos de los servidores sin recargar la página.

Los participantes adquirirán habilidades prácticas en la creación de objetos XMLHttpRequest, la configuración de métodos de solicitud HTTP, el manejo de estados de respuesta del servidor y la implementación de técnicas básicas de recuperación de datos AJAX. Al entender estos principios fundamentales, los desarrolladores podrán construir experiencias web más responsivas e interactivas que mejoren la participación del usuario y el rendimiento de la aplicación.

Comprender AJAX y solicitudes asíncronas

En este paso, aprenderás sobre AJAX (Asynchronous JavaScript and XML) y cómo revoluciona la comunicación web. AJAX permite que las páginas web actualicen el contenido dinámicamente sin recargar toda la página, creando una experiencia de usuario más suave y reactiva.

¿Qué es AJAX?

AJAX es una técnica de desarrollo web que permite a las aplicaciones web enviar y recibir datos de un servidor de manera asincrónica (en segundo plano) sin interferir en la visualización y el comportamiento de la página existente. Esto significa que puedes actualizar partes de una página web sin actualizar toda la página.

Características clave de las solicitudes asincrónicas

No bloqueante: A diferencia de las solicitudes sincrónicas tradicionales, AJAX permite que el navegador continúe ejecutando otras tareas mientras espera la respuesta del servidor.
Comunicación en segundo plano: Los datos se pueden intercambiar con el servidor sin interrumpir la interacción actual del usuario.
Actualizaciones parciales de la página: Solo se pueden actualizar partes específicas de una página web, lo que mejora el rendimiento y la experiencia de usuario.

Demostración del concepto básico de AJAX

Vamos a crear un archivo HTML simple para ilustrar el concepto de solicitudes asincrónicas. Usaremos el WebIDE para crear este ejemplo.

Abra el WebIDE y cree un nuevo archivo ~/proyecto/ajax-demo.html:

<!doctype html>
<html>
  <head>
    <title>Demostración de AJAX</title>
  </head>
  <body>
    <h1>Ejemplo de AJAX</h1>
    <button id="loadData">Cargar datos</button>
    <div id="result"></div>

    <script>
      document
        .getElementById("loadData")
        .addEventListener("click", function () {
          console.log("Botón pulsado: Iniciando solicitud AJAX");
          // La solicitud asincrónica se implementará en pasos posteriores
        });
    </script>
  </body>
</html>

Casos de uso reales de AJAX

Sugerencias de búsqueda con autocompletado
Actualizaciones en vivo del contenido
Envío de formularios sin recargar la página
Sondeo para nuevas notificaciones
Recuperación de datos de APIs

¿Por qué importan las solicitudes asincrónicas?

Las solicitudes asincrónicas resuelven varios desafíos de desarrollo web:

Mejora la experiencia de usuario
Reduce la carga del servidor
Aplicaciones web más rápidas y reactivas
Intercambio de datos más eficiente

Crear objeto XMLHttpRequest

En este paso, aprenderás a crear un objeto XMLHttpRequest, que es el mecanismo central para realizar solicitudes asincrónicas en JavaScript. Construiremos sobre el archivo HTML del paso anterior y agregaremos la funcionalidad de XMLHttpRequest.

Abra el archivo ~/proyecto/ajax-demo.html en el WebIDE y actualice la sección de script para crear un objeto XMLHttpRequest:

<!doctype html>
<html>
  <head>
    <title>Demostración de XMLHttpRequest</title>
  </head>
  <body>
    <h1>Ejemplo de solicitud AJAX</h1>
    <button id="loadData">Cargar datos</button>
    <div id="result"></div>

    <script>
      document
        .getElementById("loadData")
        .addEventListener("click", function () {
          // Crear objeto XMLHttpRequest
          var xhr = new XMLHttpRequest();

          // Registrar la creación del objeto XMLHttpRequest
          console.log("Objeto XMLHttpRequest creado:", xhr);
        });
    </script>
  </body>
</html>

Comprender el objeto XMLHttpRequest

El objeto XMLHttpRequest (XHR) es una API integrada del navegador que te permite:

Crear solicitudes HTTP
Enviar datos a un servidor
Recibir datos de un servidor
Actualizar partes de una página web sin recargar

Métodos clave de XMLHttpRequest

open(): Inicializa una nueva solicitud
send(): Envía la solicitud al servidor
onreadystatechange: Registra el estado de la solicitud

Compatibilidad con navegadores

XMLHttpRequest está soportado en todos los navegadores modernos, lo que lo hace una opción confiable para las comunicaciones AJAX. El desarrollo web moderno también utiliza la API Fetch, pero XMLHttpRequest sigue siendo ampliamente utilizado.

Salida de ejemplo

Cuando haces clic en el botón "Cargar datos", verás un registro en la consola que demuestra la creación del objeto XMLHttpRequest:

Objeto XMLHttpRequest creado: XMLHttpRequest {...}

Configurar métodos de solicitud HTTP

En este paso, aprenderás a configurar los métodos de solicitud HTTP utilizando XMLHttpRequest. Actualizaremos el archivo ajax-demo.html para demostrar cómo configurar diferentes tipos de solicitudes HTTP.

Abra el archivo ~/proyecto/ajax-demo.html en el WebIDE y modifique la sección de script:

<!doctype html>
<html>
  <head>
    <title>Métodos de solicitud HTTP</title>
  </head>
  <body>
    <h1>Métodos de solicitud AJAX</h1>
    <button id="getButton">Solicitud GET</button>
    <button id="postButton">Solicitud POST</button>
    <div id="result"></div>

    <script>
      // Configuración de la solicitud GET
      document
        .getElementById("getButton")
        .addEventListener("click", function () {
          var xhr = new XMLHttpRequest();

          // Configurar la solicitud GET
          xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);

          // Establecer encabezados de solicitud
          xhr.setRequestHeader("Content-Type", "application/json");

          // Registrar detalles de la solicitud
          console.log("Solicitud GET configurada");

          // Enviar la solicitud
          xhr.send();
        });

      // Configuración de la solicitud POST
      document
        .getElementById("postButton")
        .addEventListener("click", function () {
          var xhr = new XMLHttpRequest();

          // Configurar la solicitud POST
          xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true);

          // Establecer encabezados de solicitud
          xhr.setRequestHeader("Content-Type", "application/json");

          // Preparar los datos para enviar
          var data = JSON.stringify({
            title: "foo",
            body: "bar",
            userId: 1
          });

          // Registrar detalles de la solicitud
          console.log("Solicitud POST configurada");

          // Enviar la solicitud con datos
          xhr.send(data);
        });
    </script>
  </body>
</html>

Métodos de solicitud HTTP

Los métodos de solicitud HTTP más comunes son:

GET: Recuperar datos de un servidor
POST: Enviar datos para ser procesados por el servidor
PUT: Actualizar datos existentes
DELETE: Eliminar datos

Métodos clave para configurar solicitudes

open(method, url, async):
- method: Método HTTP (GET, POST, etc.)
- url: Punto final del servidor
- async: Booleano para solicitud asincrónica (generalmente true)
setRequestHeader(): Establecer encabezados de solicitud
send(): Enviar la solicitud (con datos opcionales)

Salida de ejemplo

Cuando haces clic en los botones, verás registros en la consola:

Solicitud GET configurada
Solicitud POST configurada

Manejar los estados de respuesta del servidor

En este paso, aprenderás a manejar los diferentes estados de una XMLHttpRequest y a procesar las respuestas del servidor. Actualizaremos el archivo ajax-demo.html para demostrar el manejo de respuestas.

Abra el archivo ~/proyecto/ajax-demo.html en el WebIDE y modifique la sección de script:

<!doctype html>
<html>
  <head>
    <title>Manejo de respuestas del servidor</title>
  </head>
  <body>
    <h1>Estados de respuesta AJAX</h1>
    <button id="fetchData">Obtener datos</button>
    <div id="result"></div>

    <script>
      document
        .getElementById("fetchData")
        .addEventListener("click", function () {
          var xhr = new XMLHttpRequest();
          var resultDiv = document.getElementById("result");

          // Registrar los estados de la solicitud
          xhr.onreadystatechange = function () {
            // Registrar el estado listo actual
            console.log("Estado listo:", xhr.readyState);

            // Verificar si la solicitud está completa y exitosa
            if (xhr.readyState === 4) {
              if (xhr.status === 200) {
                // Respuesta exitosa
                try {
                  var data = JSON.parse(xhr.responseText);
                  resultDiv.innerHTML = `
                                <h3>Datos recibidos:</h3>
                                <pre>${JSON.stringify(data, null, 2)}</pre>
                            `;
                  console.log("Solicitud exitosa");
                } catch (error) {
                  resultDiv.innerHTML = "Error al analizar la respuesta";
                  console.error("Error de análisis:", error);
                }
              } else {
                // Manejo de errores
                resultDiv.innerHTML = `Error: ${xhr.status}`;
                console.error("Solicitud fallida", xhr.status);
              }
            }
          };

          // Configurar y enviar la solicitud
          xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
          xhr.send();
        });
    </script>
  </body>
</html>

Estados listos de XMLHttpRequest

XMLHttpRequest tiene 5 estados listos:

0: NO ENVIADA (solicitud no inicializada)
1: ABIERTA (conexión establecida)
2: CABECERAS RECIBIDAS (solicitud recibida)
3: CARGANDO (procesando solicitud)
4: HECHO (solicitud completada)

Conceptos clave de manejo de respuestas

Utilice onreadystatechange para registrar el progreso de la solicitud
Verifique readyState === 4 para solicitudes completadas
Verifique status === 200 para respuestas exitosas
Utilice responseText o responseXML para acceder a los datos
Implemente el manejo de errores para diferentes códigos de estado

Salida de ejemplo

Cuando haga clic en "Obtener datos", verá registros en la consola:

Estado listo: 1
Estado listo: 2
Estado listo: 3
Estado listo: 4
Solicitud exitosa

Implementar la recuperación básica de datos AJAX

En este paso, aprenderás a recuperar y mostrar datos de una API utilizando AJAX. Crearemos una aplicación simple de gestión de usuarios que obtiene y muestra información de usuarios.

Abra el archivo ~/proyecto/ajax-demo.html en el WebIDE y reemplace su contenido con el siguiente código:

<!doctype html>
<html>
  <head>
    <title>Aplicación de gestión de usuarios</title>
    <style>
      #userList {
        margin-top: 20px;
        border: 1px solid #ddd;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Gestión de usuarios</h1>
    <button id="fetchUsers">Obtener usuarios</button>
    <div id="userList"></div>

    <script>
      document
        .getElementById("fetchUsers")
        .addEventListener("click", function () {
          var xhr = new XMLHttpRequest();
          var userListDiv = document.getElementById("userList");

          xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
              if (xhr.status === 200) {
                try {
                  var users = JSON.parse(xhr.responseText);

                  // Limpiar el contenido anterior
                  userListDiv.innerHTML = "<h2>Lista de usuarios</h2>";

                  // Crear la lista de usuarios
                  users.forEach(function (user) {
                    var userDiv = document.createElement("div");
                    userDiv.innerHTML = `
                                    <p>
                                        <strong>Nombre:</strong> ${user.name}<br>
                                        <strong>Email:</strong> ${user.email}<br>
                                        <strong>Empresa:</strong> ${user.company.name}
                                    </p>
                                `;
                    userListDiv.appendChild(userDiv);
                  });
                } catch (error) {
                  userListDiv.innerHTML =
                    "Error al analizar los datos de usuario";
                }
              } else {
                userListDiv.innerHTML = `Error al obtener usuarios: ${xhr.status}`;
              }
            }
          };

          // Obtener usuarios de la API de JSONPlaceholder
          xhr.open("GET", "https://jsonplaceholder.typicode.com/users", true);
          xhr.send();
        });
    </script>
  </body>
</html>

Conceptos clave de la recuperación de datos

Utilice una API pública (JSONPlaceholder) para la demostración
Obtener múltiples registros de usuario
Analizar la respuesta JSON
Crear dinámicamente elementos HTML
Manejar posibles errores

Salida de ejemplo

Cuando haga clic en "Obtener usuarios", verá una lista de usuarios con sus detalles:

Lista de usuarios
Nombre: Leanne Graham
Email: Sincere@april.biz
Empresa: Romaguera-Crona

Nombre: Ervin Howell
Email: Shanna@melissa.tv
Empresa: Deckow-Crist

... (más usuarios)

Mejores prácticas

Siempre validar y limpiar los datos
Implementar el manejo de errores
Utilizar try-catch para el análisis de JSON
Crear una interfaz de usuario dinámica y reactiva

Resumen

En este laboratorio, los participantes exploran los fundamentos de AJAX y la comunicación web asíncrona, aprendiendo a crear experiencias web dinámicas sin recargar la página completa. El laboratorio introduce conceptos clave como solicitudes no bloqueantes, intercambio de datos en segundo plano y actualizaciones parciales de la página, demostrando cómo XMLHttpRequest permite una interacción sin problemas entre clientes web y servidores.

Al trabajar a través de ejemplos prácticos y comprender los principios básicos de AJAX, los aprendices obtienen ideas sobre cómo implementar aplicaciones web reactivas que pueden recuperar y mostrar datos dinámicamente. El laboratorio cubre técnicas esenciales para crear objetos XMLHttpRequest, configurar métodos HTTP, manejar respuestas del servidor y recuperar datos de manera asíncrona, proporcionando una base integral para las prácticas de desarrollo web moderno.