Antes que te vayas
Inscríbete en nuestro curso gratuito de Laravel
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.
Ambos conceptos están relacionados, pero no son exactamente lo mismo.
Las siglas AJAX significan Asynchronous JavaScript and XML.
Por tanto:
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:
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.
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
.
Comparte este post si te fue de ayuda 🙂.
Cualquier duda y/o sugerencia es bienvenida.
Regístrate
Inicia sesión para acceder a nuestros cursos y llevar un control de tu progreso.
Cursos recomendados
Domina JS con este curso práctico y completo! Fundamentos, ejemplos reales, ES6+, POO, Ajax, Webpack, NPM y más.
Ingresar al cursoDesarrollemos un Messenger! Aprende sobre Channels, Queues, Vuex, JWT, Sesiones, BootstrapVue y mucho más.
Ingresar al cursoAprende Laravel desde cero y desarrolla aplicaciones web reales, en tiempo récord, de la mano de Laravel.
Ingresar al cursoInscríbete en nuestro curso gratuito de Laravel