¿Qué es AJAX y cómo y cuándo usarlo?

¿Qué es AJAX y cómo y cuándo usarlo?

AJAX (Asynchronous JavaScript + XML) no es una tecnología en sí misma, sino una “nueva” forma de utilizar un stack tecnológico que ofrece una experiencia de usuario más fluida e interactiva. AJAX se basa en la utilización de HTML/XHTML, CSS, JavaScript, XML y XSLT. Además, hace un fuerte uso de la API DOM y el […]

Categorías: AJAX

Adrián Garzón Ximénez - Desarrollador Fullstack


AJAX (Asynchronous JavaScript + XML) no es una tecnología en sí misma, sino una “nueva” forma de utilizar un stack tecnológico que ofrece una experiencia de usuario más fluida e interactiva.

AJAX se basa en la utilización de HTML/XHTML, CSS, JavaScript, XML y XSLT. Además, hace un fuerte uso de la API DOM y el objeto XMLHttpRequest. Si eres principiante y no estás entendiendo nada, no te preocupes: a lo largo del artículo sabrás a qué tecnologías estoy haciendo referencia. En caso de que estés en un nivel intermedio, lo más probable es que al menos conozcas las tecnologías de las que estoy hablando.

Pues bien, la particularidad de AJAX es que, utilizando estas tecnologías comunes, rompe el flujo tradicional de las páginas y aplicaciones web. Ya no se trata de que el cliente haga una llamada al servidor cada vez que quiera consultar nuevos recursos y deba esperar a que se recargue su página.

Con AJAX la recarga funciona tras bambalinas. De modo que el flujo de uso es mucho más dinámico y adaptado a las acciones del usuario/a.

Vamos a explorar en mayor detalle este flujo tradicional, para poder entender por qué AJAX es tan rompedor. Luego veremos cómo funciona AJAX, algunas alternativas y cómo esta forma de utilizar la tecnología ha dado origen a frameworks tan populares como React.js o Vue.js.

El flujo de uso de una web app: tradicional VS. AJAX

Dediqué la primera lección de mi curso de introducción a HTML a hablar de cómo funciona la web. Tratándose de una introducción, di información sencilla y esquemática, pero que considero que es fundamental para poder introducirse en el desarrollo… y que no era del todo cierta.

Si estás haciendo ese curso no te preocupes: ya llegará el momento en que te lo cuente todo y entenderás por qué recurrí a una mentira piadosa. Pero si no, incluyo aquí ese resumen muy básico.

Tradicionalmente, la comunicación cliente-servidor se ha gestionado del siguiente modo:

  1. El cliente solicita al DNS la resolución de la IP a la que quiere hacer la consulta.
  2. Entonces le dirige una petición, orientada a una ruta específica a través de un puerto determinado (el 80, por defecto). Esta ruta se especifica en la URL.
  3. Recibida la petición, el servidor ejecuta la lógica que deba ejecutar y devuelve una respuesta. La respuesta (y aquí es donde empiezan las diferencias) contiene una serie de instrucciones ejecutables por el navegador, generalmente escritas en HTML, CSS y JS.
  4. El cliente recibe las instrucciones, recarga la página y muestra el nuevo recurso.

Este procedimiento provoca un comportamiento cada vez menos popular: la página del cliente se recarga cada vez que recibe nuevo contenido, para renderizarlo. Pero desde 2005 viene ganando peso un comportamiento alternativo, ofrecido por AJAX y del que no hablé en mi curso introductorio.

¿Cómo funciona AJAX?

AJAX aparece para ofrecer un comportamiento alternativo. Básicamente, hace la llamada al servidor “tras bambalinas”. En lugar de recibir un paquete de información (HTML, CSS y JS, por lo general) recibe otro tipo de objeto (JSON, en la mayoría de las ocasiones).

Este fichero es más ligero que el paquete que recibiría en el contexto original, pues probablemente no sea necesario volver a renderizar toda la página, sino simplemente mostrar la información o recursos recién recabados. Por tanto, la velocidad de descarga se reduce.

Pero, ¿cómo renderizamos los nuevos contenidos en la pantalla del cliente? Fácil: podemos hacer uso de la API DOM.

Un ejemplo de uso de AJAX

Imaginemos que desarrollamos un blog y queremos utilizar AJAX. Con el enfoque tradicional, cada post ocuparía una página, con su URL, y al navegar de un post a otro tendríamos que descargar todo el código de la nueva página.

Por supuesto, podemos optimizarlo con una buena política de caché. Pero nadie nos quita la recarga de la página, que ya enturbia la UX.

Sin embargo, si lo piensas detenidamente, cuando quieres cargar un nuevo post no necesitas cargar una página entera. Probablemente vayas a cambiar solo un puñado de los elementos que se muestran en pantalla: el contenido, el título, tal vez una imagen destacada y las categorías…

De modo que puedes recibir esta información en un objeto JSON y simplemente insertarla en el lugar de la información antigua. Acabas de navegar de una a otra página sin necesidad de recargar el navegador: otro punto a favor de la UX.

Otros ejemplos

Cuando hacemos la llamada al servidor utilizando AJAX podemos emplear cualquier método HTML. En el ejemplo anterior estaríamos haciendo una petición GET, que nos permitiría navegar por todo el sitio web tras una única carga inicial.

Pero también podríamos hacer otro tipo de peticiones. Por ejemplo, podemos hacer una petición POST en un formulario (login, pago, contacto…) de modo que en vez de recargarse la página tras completarse la petición veamos una barra de progreso, un spinner o similar, y un mensaje de confirmación una vez completada la operación. Otro punto positivo para la experiencia de usuario.

O podríamos hacer una petición PUT, PATCH o DELETE para insertar, editar o eliminar información de nuestra base de datos (piensa en una tabla de usuarios, una lista de películas, o lo que quiera que utilice la app) y recargar dinámicamente nuestra lista sin necesidad de recargar la página.

En definitiva, AJAX abre las puertas a una experiencia más similar a la de las aplicaciones de móvil modernas. De hecho, permite el enfoque Single Page Application (SPA), que consiste en hacer una primera carga inicial e ir modificando posteriormente la interfaz a medida que el usuario/a vaya solicitando el acceso a recursos específicos.

¿Cómo utilizar AJAX?

Como vemos, para usar AJAX vamos a necesitar una forma de hacer peticiones al servidor sin recargar la página. Para ello podemos utilizar JavaScript, y necesitaremos alguna clase que proporcione esta funcionalidad.

Enviando la petición al servidor

Esta clase es XMLHttpRequest (si bien para dar soporte a IE también habría que utilizar XMLHTTP). Lo primero que deberemos hacer es inicializar la clase. Es decir, crear una instancia.

Una vez cambie el estado de nuestra instancia de XMLHttpRequest se emitirá un evento, que podremos escuchar mediante el método onreadystatechange. De modo que le podremos asociar la función que queramos ejecutar cuando cambie este estado.

También es cierto que muchas personas utilizan la configuración básica de XMLHttpRequest, basada en el uso del evento loaded, al que podemos acceder con el listener onloadend. Pero en este artículo empezaré utilizando onreadystatechange.

Definido el comportamiento de nuestra conexión, deberemos abrirla con el método open() y enviarla con el método send().

Al método open deberemos proporcionarle como parámetros:

  • El método, escrito en mayúsculas.
  • La URL.
  • Y un booleano que indica si la petición es asíncrona.

Si necesitamos enviar información al servidor (como un cuerpo de la petición) lo haremos en el método send(). En este caso puede ser necesario que configuremos el tipo MIME de la petición, configurando el header “Content-Type”. Luego veremos un ejemplo, pero empecemos por uno más sencillo.

Gestionando la respuesta del servidor

Si todo ha ido bien, el servidor indicado en la URL habrá recibido nuestra petición, realizado la lógica necesaria y enviado una respuesta. Esta respuesta tendrá una propiedad readyState con un código:

  • 0. No inicializada.
  • 1. Leyendo.
  • 2. Leído.
  • 3. Interactiva.
  • 4. Completa.

Podemos utilizar este código para saber si nuestra petición va por buen camino o no. Una vez llegue al estado 4 (completada) la conexión se habrá terminado, por lo que ya deberíamos tener la respuesta definitiva. Así que ahora toca desgranar su contenido.

Ahora, nuestra instancia de XMLHttpRequest va a tener una propiedad status. Sobre los códigos de respuesta HTTP hablaremos en otro artículo, pero de momento puedes consultar la referencia de la W3C.

En cualquier caso, si hemos recibido un status 2xx (generalmente 200, si la respuesta lleva información) se supone que todo habrá ido bien. Por lo que podemos acceder a nuestra respuesta a través de dos nuevas propiedades:

  • responseText. Devuelve una cadena de texto. ¡Recuerda que puedes utilizar el método JSON.parse() para transformar la cadena de texto y trabajar con su contenido como un objeto de JavaScript!
  • responseXML. Devuelve un objeto XMLDocument que podemos recorrer con JS.

[codepen_embed height="300" default_tab="css,result" slug_hash="wvygzdz" preview="true" editable="true" user="agarzon48"]See the Pen
AJAX - XMLHttpRequest 0.1
by Adrián Garzón (@agarzon48)
on CodePen.[/codepen_embed]

Resumen: uso básico de AJAX

En resumen, el flujo de uso básico de AJAX es:

  1. Creamos una instancia de XMLHttpRequest.
  2. Utilizamos el escuchador onreadystatechange para saber en qué estado se encuentra la petición. Sabemos que el estado 4 es completada y, por tanto, deberíamos tener acceso al contenido de la respuesta, por lo que podemos asociarle la función a ejecutar.
  3. Usamos la propiedad status para saber qué código de respuesta hemos obtenido. Idealmente, necesitamos un 2xx, que indica éxito.
  4. Si el readyState es 4 y el status es 2xx implica que la respuesta nos ha llegado bien. Por tanto, accedemos a ella con responseText o responseXML.

En la siguiente publicación veremos otras formas de sacarle partido a AJAX

Mantente al tanto de mis próximos recursos sobre AJAX

  • ¿Qué es AJAX y cómo y cuándo usarlo?
  • Fetch API.
  • Eventos enviados por el servidor.
  • Cómo conectar AJAX y PHP.
  • Cómo gestionar XML y datos binarios con AJAX.
  • La API de lectura de archivos en AJAX.
  • ¿Qué es axios, cómo utilizarlo y cuáles son sus ventajas?