002. AJAX: Objeto XMLHttpRequest

Como Ajax trabaja parte con el cliente, parte con el servidor, es muy importante que Ajax lo ejecutemos desde un servidor web, usando el protocolo HTTP, no con el protocolo file, dándole simplemente doble click en el archivo. Hay que comenzar a trabajar en un entorno local. Vamos a crear una aplicación donde vamos a consumir una API externa.

Para poder traer información de un servidor (por ejm una petición a una base de datos o a una API externa), hay una API para comenzar a aprender, que se llama JSONPlaceholder, este servicio es una API falsa para hacer pruebas y prototipos.

Nota: podemos consumir tanto APIs públicas que tengamos en Internet como archivos JSON que tengamos de manera local.

Para que un documento XMLHttpRequest funcione necesitamos dar cuatro pasos:

  • La instancia.
  • Ejecutar un evento, el evento más importante del objeto XMLHttpRequest es readystatechange, que detecta el resto de eventos. Por lo que hay que hacer una asignación del evento o eventos si lo queremos manejar de manera independiente.
  • La instrucción que va a abrir la petición.
  • El cuarto paso es enviar la petición.

Resumen

Los 4 pasos que debemos hacer son:

  1. Instanciar el objeto XMLHttpRequest.
  2. Asignarle el o los eventos que vayamos a estar manipulando de la petición, la lógica de la programación va a ir en la callback de esta fase.
  3. Abrir la petición, estableciendo el método y el recurso o la URL o el endpoint con el método open().
  4. Enviar la petición con el método sent().

Archivos

Tendremos dos archivos, un archivo ajax.html y un archivo ajax.js, veamos la sintaxis de cada uno de ellos.

Sintaxis de ajax.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ajax</title>
  </head>
  <body>
    <h1>Ajax</h1>
    <h2>Objeto XMLHttpRequest</h2>
    <ol id="xhr"></ol>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <script src="ajax.js"></script>
  </body>
</html>

Sintaxis de ajax.js

(() => {
  const xhr = new XMLHttpRequest(),
    $xhr = document.getElementById("xhr"),
    $fragment = document.createDocumentFragment();
  xhr.addEventListener("readystatechange", (e) => {
    if (xhr.readyState !== 4) return;

    if (xhr.status >= 200 && xhr.status < 300) {
      let json = JSON.parse(xhr.responseText);
      json.forEach((el) => {
        const $li = document.createElement("li");
        $li.innerHTML = `${el.name} -- ${el.email} -- ${el.phone}`;
       $fragment.appendChild($li);
      });
      $xhr.appendChild($fragment);
    } else {
      console.log("Error");
      let message = xhr.statusText || "Ocurrió un error";
      $xhr.innerHTML = `Error ${xhr.status}: ${message}`;
    }
  });
  xhr.open("GET", "https://jsonplaceholder.typicode.com/users");
  xhr.send();
})();
Scroll al inicio