Javascript – #6.01. AJAX. Introducción

AJAX te puede sonar a muchas cosas: a un limpiador, a dos personajes de Marvel, un equipo de fútbol o una ciudad canadiense. Pero el AJAX que nos trae hoy aquí no tiene nada que ver con lo anterior.

AJAX es el acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), una técnica de desarrollo web que nos permite crear aplicaciones interactivas que se ejecutan en el lado del cliente (navegador) mientras se realiza una comunicación con el servidor en segundo plano.

El resultado es una petición al servidor con una obtención de datos sin necesidad de que la página se recargue, es decir, los datos se cargan en una parte de la página mientras que el resto de información se mantiene invariable, de modo que esa carga no interfiere en la visualización ni comportamiento de la página.

Las ventajas de utilizar AJAX son muchas: se reduce la velocidad de carga, se mejora la interactividad y, sobre todo, la usabilidad de las aplicaciones web.

Para trabajar con AJAX necesitamos, evidentemente, utilizar Javascript, que es el lenguaje que realiza las llamadas AJAX mientras que el acceso a los datos se realiza a través de un objeto llamado XMLHttpRequest. Sin embargo, y aunque el nombre pueda despistar, los datos no tienen por qué estar formateados en XML; podemos utilizar también archivos de texto, archivos JSON, etc.

En la siguiente imagen se puede ver un gráfico muy claro en el que se comparan las peticiones síncronas con las peticiones asíncronas utilizando AJAX:

Comparativa peticiones síncronas y asíncronas
Fuente: https://www.oreilly.com

En el vídeo de la lección podrás ver en detalle qué es AJAX, cómo funciona el objeto XMLHttpRequest y los distintos estados con los que trabaja: la base para entender el resto de vídeos de esta parte del curso: