Aprende a realizar peticiones Ajax con Fetch API ⚡ Ejemplo

Existe mucha confusión respecto a qué es Ajax, y sus diferencias con Fetch API, jQuery y Axios.

Este artículo aclara la diferencia entre estos conceptos y presenta un ejemplo práctico de cómo realizar peticiones con Fetch.

Ajax no es lo mismo que Fetch

Ambos conceptos están relacionados, pero no son exactamente lo mismo.

Las siglas AJAX significan Asynchronous JavaScript and XML.

Por tanto:

• Ajax no es un lenguaje de programación.
• Ajax no es una tecnología, sino más bien una técnica.
• Consiste en realizar peticiones HTTP asíncronas.
• Tradicionalmente se esperaba una respuesta en formato XML.

Años atrás, XML era el formato más usado para comunicar datos. Hoy en día, JSON es el formato más popular.

El término Ajax se continúa usando, para referirse a peticiones asíncronas realizadas desde una aplicación web.

El objetivo principal de Ajax desde sus inicios ha sido:

• Permitir crear páginas web más rápidas y dinámicas.
• Esto significa que la página carga una sola vez, y luego en segundo plano se actualiza o solicita más información.

Puedes usar Ajax fácilmente

En sus orígenes, hacer peticiones Ajax no era muy sencillo. Se tenía que usar un objeto XMLHttpRequest.

Hoy en día, fetch permite realizar peticiones HTTP de una manera mucho más legible.

Aquí tienes un ejemplo:

fetch('https://rickandmortyapi.com/api/character')
    .then((response) => response.json())
    .then((data) => console.log(data));

Con este código realizas una petición GET asíncrona a la API pública de Rick and Morty, para obtener los personajes de la serie, en formato JSON.

¡Ya no hay excusas! Aprende Fetch ahora mismo con el siguiente video 🙂:

En el video vamos un paso más allá:

• Además de consumir la API de Rick and Morty, mostramos los personajes en web.

• Es decir, cargamos sus imágenes bajo demanda.

No es lo mismo que jQuery ni Axios

jQuery y Axios son bibliotecas JavaScript.

Debido a que jQuery ofrece una función $.ajax(), muchas veces se cree que usar Ajax es usar dicha función de jQuery, pero no es así.

Puedes usar Ajax a través de jQuery, pero no es la única alternativa.

Años atrás, la función de jQuery ayudaba mucho a simplificar el uso de Ajax, ya que usar XMLHttpRequest resultaba más complicado.

Como jQuery incluye muchas más características además de Ajax, muchas veces se tenía que cargar todo jQuery sólo para usar dicha función.

Con el tiempo surgen alternativas más específicas. Un ejemplo es Axios, que por cierto ganó mucha popularidad.

Hoy en día, no es necesario incluir bibliotecas para realizar peticiones HTTP asíncronas de manera sencilla, ya que la API Fetch soluciona los problemas que teníamos antes con XMLHttpRequest.

# ajax # jquery # javascript