AJAX

Ramón Saquete

Escrito por Ramón Saquete

El término AJAX fue acuñado en 2005 por el diseñador de UX, Jesse James Garrett, para describir una tecnología de peticiones asíncrona que empezaba a utilizarse en servicios como Google Maps o Gmail. Aunque diez años antes, Microsoft ya había creado esta tecnología con el nombre de Scripting remoto, con la primera versión del objeto de JavaScript XMLHttpRequest (abreviado como XHR) en Internet Explorer 5, que poco a poco fue adoptado por el resto de navegadores y finalmente incluido en las recomendaciones del W3C en el año 2006.

¿Para qué sirve AJAX?

La intención de esta tecnología es la de poder realizar peticiones asíncronas al servidor con JavaScript. Son asíncronas porque ni la interfaz, ni la ejecución de JavaScript se bloquean una vez lanzada la petición. Al contrario, la web sigue ejecutándose hasta que llega la respuesta del servidor, momento en que el código responsable de la petición recupera el control y realiza alguna acción con la información obtenida.

Esta acción suele consistir en actualizar partes del contenido de la página. De esta forma, cuando se actualiza sólo una parte de la página se evita realizar una recargar entera, reduciendo el tiempo de espera del usuario y dando sensación de fluidez. La única forma de lograr algo similar hasta el momento era utilizando iframes y JavaScript, pero era más lento porque obligaba a cargar una página dentro de otra.

¿Por qué aparece XML en el nombre?

AJAX es el acrónimo de Asynchronous JavaScript And XML debido a que, inicialmente, la información que se devolvía como respuesta era en formato XML (acrónimo de eXtended Markup Language). Sin embargo, este formato no tardó mucho en caer en desuso para ser sustituido por el formato JSON (JavaScript Object Notation), mucho más compacto y con una transferencia más rápida de información.

¿Cómo se realizan las peticiones AJAX?

Para realizar las peticiones AJAX se suele usar algún tipo de API REST para pasar al servidor la información sobre la acción solicitada, aunque hoy en día también es muy común el uso de APIs que utilizan Graph QL. Esta API permite además realizar consultas de base de datos en la propia petición.

Situación actual de la tecnología AJAX

La especificación del objeto XMLHttpRequest sigue evolucionando, como se puede ver en el WhatWG, permitiendo actualmente peticiones entre dominios distintos, envío de información binaria, saber cuánto se ha descargado para mostrar una barra de carga, etc.

Existe otra API más moderna que XMLHttpRequest para para hacer peticiones asíncronas, llamada API fetch, por lo que es común usar indistintamente las expresiones petición AJAX o petición fetch para este tipo de peticiones. Esta nueva API es más fácil de usar, pero de momento no permite hacer tantas cosas como el veterano XMLHttpRequest.

AJAX Request
En las herramientas para desarrolladores de Google Chrome, las peticiones AJAX, aparecen bajo la pestaña XHR, en dónde podemos ver diferenciadas las peticiones realizadas con el objeto XHR y la API fetch. También tenemos la pestaña WS, para ver las peticiones realizadas con Web Sockets.

Otra tecnología que permite el envío de información asíncrona son los Web Sockets, pero en este caso la comunicación es bidireccional. Por lo que, al contrario que con XHR o la API fetch, el servidor puede enviar información al cliente, forzándolo a actualizarse, sin que este le haya pedido nada. Aunque hay formas de implementar esta capacidad con XHR, lo que es conocido como Comet, AJAX Push o Reverse AJAX.

AJAX es la base del funcionamiento de las aplicaciones web SPA (Single Page Application), en las que, una vez que el usuario aterriza en la aplicación, nunca se produce una recarga de página entera.

Si AJAX y especialmente las SPAs no se implementan correctamente, pueden surgir problemas de indexabilidad que afectarán gravemente al SEO.

    Ramón Saquete
    Autor: Ramón Saquete
    Desarrollador web y consultor SEO técnico en la agencia de marketing online Human Level, es experto en WPO e indexabilidad.

    Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *