AJAX — JS: API del DOM

• XMLHttpRequest
• Fetch
• URL
• Control de acceso HTTP (CORS)

Manipular el árbol DOM hace que nuestros sitios web sean más interactivos, pero estas técnicas no son suficientes para crear widgets autónomos o aplicaciones completas con backend (Single Page Application).

Muchos servicios ofrecen la posibilidad de integrar diferentes widgets, como por ejemplo uno de clima.

El funcionamiento es simple: insertas el código proporcionado por el servicio en tu documento HTML. Este código carga el widget y realiza consultas periódicas al servidor para obtener datos actualizados, como cuando un usuario hace clic en "Mostrar clima de la próxima semana".

La tecnología clave aquí es AJAX, que permite realizar solicitudes HTTP directamente desde el navegador de manera asíncrona. Aunque su nombre proviene de "Asynchronous JavaScript and XML", AJAX no se limita únicamente a trabajar con XML.

XMLHttpRequest

Antes de la aparición de HTML5, los navegadores proporcionaban un objeto especial llamado XMLHttpRequest:

// Ejemplo de una solicitud típica utilizando XMLHttpRequest
// Solo para fines de familiarización

const request = new XMLHttpRequest();
request.onreadystatechange = () => {
  if (request.readyState == 4 && request.status == 200) {
    document.getElementById('demo').innerHTML = request.responseText;
  }
};
request.open('GET', '/api/v1/articles/152.json', true);
request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
request.send();

Trabajar con este objeto era muy incómodo, por lo que todos utilizaban una envoltura creada dentro de la biblioteca jQuery. Se hablará más sobre esto en la lección dedicada a jQuery.

Fetch

Con la aparición del estándar HTML5, se introdujo un nuevo mecanismo para realizar solicitudes HTTP:

// Ejemplo de una solicitud típica utilizando fetch
// const promise = fetch(url[, options]);
fetch('/api/v1/articles/152.json')
  .then((response) => {
    console.log(response.status); // => 200
    console.log(response.headers.get('Content-Type'));
    return response.json();
   })
  .then((article) => {
    console.log(article.title); // => 'Cómo utilizar fetch?'
  })
  .catch(console.error);

Como se puede ver, fetch es una función que devuelve una promesa. Trabajar con ella es conveniente y agradable. Además, gracias a los polyfills, no tienes que preocuparte por si algún navegador no admite este mecanismo.

Ten en cuenta que response.json también devuelve una promesa. Los datos se pueden obtener no solo con json, sino también con las funciones blob, text, formData y arrayBuffer.

Enviar un formulario mediante una solicitud POST:

const form = document.querySelector('form');

fetch('/users', {
  method: 'POST',
  body: new FormData(form),
});

Enviar un formulario como JSON:

fetch('/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Hubot',
    login: 'hubot',
  })
})

A pesar de todas sus ventajas, fetch es un mecanismo bastante de bajo nivel. Por ejemplo, al trabajar con JSON, tendríamos que establecer manualmente los encabezados y realizar diferentes manipulaciones con los datos que podrían automatizarse.

En la práctica, esto ha llevado a la creación de varias bibliotecas que funcionan de manera similar, pero ofrecen muchas más posibilidades. Además, muchas de estas bibliotecas son isomórficas, lo que significa que funcionan de la misma manera tanto en el navegador como en el servidor. Una de las bibliotecas más populares es axios.

URL

Es una mala idea concatenar cadenas para trabajar con rutas o URLs. Es fácil cometer errores y terminar realizando tareas que podrían automatizarse.

Por un lado, podemos usar bibliotecas externas, que hay muchas disponibles. Pero, por otro lado, los navegadores ya tienen un mecanismo incorporado para manejar esto. Para los navegadores más antiguos, a menudo se agregan polyfills:

const url = new URL('../cats', 'https://www.example.com/dogs');
console.log(url.hostname); // => www.example.com
console.log(url.pathname); // => /cats

url.hash = 'tabby';
console.log(url.href); // => https://www.example.com/cats#tabby

url.pathname = 'démonstration.html';
console.log(url.href); // => https://www.example.com/d%C3%A9monstration.html

Lo bueno es que fetch puede trabajar directamente con el objeto URL:

const response = await fetch(new URL('https://www.example.com/démonstration.html'));

Aquí hay un ejemplo de cómo trabajar con parámetros de consulta:

// https://some.site/?id=123
const parsedUrl = new URL(window.location.href);
console.log(parsedUrl.searchParams.get('id')); // => 123
parsedUrl.searchParams.append('key', 'value');
console.log(parsedUrl.toString()); // => https://some.site/?id=123&key=value

Control de acceso HTTP (CORS)

A diferencia del backend, las solicitudes HTTP en el cliente pueden ser utilizadas por personas malintencionadas para robar datos. Por lo tanto, los navegadores controlan dónde y cómo se realizan las solicitudes.

Materiales adicionales

1. ¿Qué es una API?
2. Curso "Protocolo HTTP"