Ajax

Una de las palabras que definen Ajax es "asíncrono". De hecho, es una de las palabras que encontramos en el acrónimo "ajax". Este es un concepto interesante que tiene que ver no solo con Ajax, sino con el lenguaje Javascript en particular (aunque a decir verdad cada vez hay más lenguajes que permiten programación asíncrona).

Asíncrono en términos generales quiere decir que no tiene una relación temporal con otro proceso, o con la causa que lo produce. La definición linguística del término no acaba de aclarar el concepto en sí, así que vamos a tratar de explicarlo en términos informáticos y del lenguaje Javascript.

Asíncrono es todo proceso que tarda un tiempo en realizarse y que, durante ese tiempo, el motor de Javascript puede estar desocupado o realizando otras tareas. Cuando el proceso termina, entonces el motor de Javascript recibe una señal de recuperación y posiblemente un dato como respuesta, pudiendo seguir con la ejecución de código, así como realizar el tratamiento que corresponda sobre el dato recibido como respuesta.

El hecho de que Ajax sea asíncrono indica que el flujo de ejecución de solicitudes al servidor sigue ese patrón comentado. Cuando se hace la solicitud, el navegador se queda esperando una respuesta del servidor por un tiempo indeterminado. Sin embargo, durante ese tiempo de espera, el motor de Javascript permanece ocioso, o simplemente realizando otras tareas. Ese es el motivo por el que el navegador no se queda bloqueado esperando la solicitud del servidor, sino que el usuario puede continuar trabajando con la página. Una vez el servidor responde y nos llega la señal de retorno, se recibe el dato que el servidor pueda habernos hecho llegar. Ese dato puede ser tratado mediante código Javascript, para mostrarlo en el lugar donde se desee de la página, para mostrar un mensaje de éxito, error, etc.

En resumen, asíncrono en Ajax indica que la solicitud es no bloqueante y por tanto, mientras espera el navegador podrá atender otras instrucciones de Javascript, así como la interacción con los elementos de la página. Cuando recibe la respuesta, en el momento que sea, el navegador podrá retomar la ejecución de un código, que generalmente realizará acciones sobre la página que tengan que ver con el resultado recibido de la solicitud al servidor.

Al principio cada navegador implementaba Ajax de una manera particular, lo que hacía especialmente difícil el uso de esta tecnología, ya que había que escribir código duplicado, o triplicado, para realizar las solicitudes al estilo que requería cada cliente web.

Por ello es muy popular el uso de librerías para realizar Ajax. Una de las librerías más destacadas para Ajax, que hoy en día sigue usandose, es jQuery. jQuery dispone de varios métodos para realizar trabajo con Ajax, que nos aseguran que el código se ejecutará perfectamente en todos los navegadores.

Luego llegó la interfaz estándar de acceso a Ajax fetch, que es propia de los navegadores y trabaja con promesas. Fetch es un API estándar, por lo que no hace falta ninguna librería, ya que forma parte del Javascript que entienen los navegadores. Como trabaja con promesas es fácil realizar un código mantenible. El API de fetch funciona en cualquier navegador, a excepción de Internet Explorer y Opera Mini, por lo que hay que usar algún polyfill si queremos extender su funcionalidad a cualquier posible visitante.

Sin embargo, aunque fetch nos asegura un código bastante limpio y una interfaz estándar para las conexiones con Ajax, que nos ahorra la necesidad de usar librerías adicionales, sigue siendo bastante popular apoyarse en alguna biblioteca de funciones, ya que nos aportan funcionalidades adicionales para trabajo con Ajax y la consulta a servicios web, evitando tener que escribir mucho código. Una librería muy usada es Axios, que nos asegura compatibilidad con todo tipo de navegadores y facilita mucho las consultas a APIs REST. Por supuesto, los principales frameworks también disponen de funcionalidad de alto nivel para acceso a Ajax incorporada.

La llamada Web 2.0, que no tiene que ver con un estándar o una versión de la web en sí o su protocolo de comunicaciones (HTTP), es simplemente una nueva manera de concebir los sitios web. En este nuevo enfoque de la web los usuarios de los sitios web son los que generalmente crean el contenido de las páginas. Ejemplos típicos lo tenemos en Wikipedia o en cualquiera de las redes sociales.

Pero además también incluye una nueva experiencia de usuario, más dinámica, más parecida al funcionamiento de las aplicaciones tradicionales. Ahí es donde Ajax jugó un papel fundamental. Gracias a que Ajax permite hacer consultas contra el servidor, para obtener contenido e interaccionar con el servidor sin necesidad de recargar la página, se pudo crear una nueva experiencia de uso, más atractiva y rápida. Los usuarios de pronto podían enviar comentarios, darle al botón "me gusta", valorar una web y cosas similares, sin necesidad que se recargase todo el contenido de la página.

Esta experiencia no era posible antes de Ajax y permitió que aplicaciones como Gmail o las propias redes sociales ofrecieran a los usuarios un modo rápido de usar los servicios, con lo que la web se volvió también un lugar adecuado para el nacimiento de todo tipo de aplicaciones modernas.

Ajax tiene una limitación importante. El flujo de solicitud de los datos al servidor debe de iniciarse en el cliente. Por tanto, el usuario (o el Javascript de la página) debe ser el que produzca esa comunicación con el servidor.

Esta limitante es importante sobre todo en aplicaciones en tiempo real, como los chats, donde Ajax a solas no es la mejor de las opciones. Para ello es importante conocer Web Sockets, que es otra tecnología de los navegadores que tiene la diferencia que las comunicaciones pueden comenzar en el servidor. Es decir, el servidor en el momento que lo necesite puede enviar datos al cliente, sin que éste lo haya solicitad.

En Javascript puedes programar comportamientos Ajax de diversas maneras, unas más fáciles que otras, unas más compatibles con más navegadores que otras. Vamos a enumearlas con sus ventajas e inconvenientes:

XMLHttpRequest

Este es el sistema de realización de Ajax más tradicional existente en Javascript.

• Ventajas: Funciona en navegadores muy antiguos. No requiere de ninguna librería para funcionar.
• Desventajas: El código es poco claro, complejo y difícil de mantener y de expandir.

Fetch

Es la interfaz moderna para el trabajo con Ajax, que funciona mediante promesas de Javascript.

• Ventajas: Generas un código más claro y mantenible, gracias a la estructuración por medio de promesas. No requiere ninguna librería para funcionar, ya que es Javascript nativo. No requiere tanto código como el ajax basado en XMLHttpRequest y es más fácil de entender.
• Desventajas: No funciona en Internet Explorer (aunque sí lo hace si cargas un polyfill). Si se quiere gestionar el acceso a servicios web (que devuelven JSON) requiere encadenar dos promesas y el acceso a la configuración de la solicitud http y el examinar la response del servidor se hace a bastante bajo nivel.

jQuery

Es una librería para manipulación del DOM, que ofrece muchas utilidades interesantes, como por ejemplo para trabajo con Ajax. Permite realizar conexiones por Ajax sencillas y compatibles con la mayoría de los navegadores.

• Ventajas: Funciona en todos los navegadores, incluso Internet Explorer bastante viejos. Te asisla de la mayoría de las complejidades de las solicitudes http por Ajax, aportando justo lo que necesitas, con poco código.
• Desventajas: requiere cargar una librería que sirve para muchas otras cosas además de Ajax y que por tanto es un poco pesada (al menos si solo la usamos para Ajax).

Axios

Es una librería que solamente sirve para hacer Ajax y que se basa en promesas, lo que permite un código Javascript bastante "estándar" y sencillo de entender y mantener. Ofrece una cantidad enorme de utilidades encaminadas al tratamiento de las conexiones ajax contra servicios web y el trabajo con la respuesta, a alto nivel.

• Ventajas: facilita el proceso de obtención de datos de servicios web, configuración de las solicitudes en el servidor, las headers, los métodos del HTTP (GET, POST, PUT...) , examinar la respuesta y obtener el json de una manera rápida y directa. Permite un código claro y conciso.
• Desventajas: requiere el uso de una librería adicional, aunque en este caso es menos de 20KB, lo que es bastante razonable en lo que a peso respecta, para las ventajas que ofrece. La interfaz de trabajo está montada encima de módulos commonjs, por lo que resulta menos práctico para usarla con ES6 modules, por lo que te obliga a usar una herramienta como Webpack o similares para integrarla bien en un proyecto frontend.

Este es un resumen de las interfaces de acceso a Ajax más frecuentes y recomendables, las dos nativas y las principales librerías. Sin embargo, no nos podemos olvidar que muchos frameworks implementan además sus propios accesos a Ajax, por lo que si usas algo como Angular o VueJS tendrás sus propios mecanismos y librerías de acceso a servidores por HTTP.

Además de todas estas interfaces de trabajo con Ajax en Javascript, muchas veces los frameworks ofrecen nuevos mecanismos integrados en su conjunto de herramientas, como es el caso de Angular que realiza un tratamiento de Ajax particular.

La primera de las interfaces de programación para realizar conexiones con Ajax es XMLHttpRequest. Se trata de la primera clase (de Programación Orientada a Objetos) disponible para hacer Ajax, creada desde el inicio de esta tecnología del navegador. Esta interfaz hoy es bastante estándar, disponible desde Internet Explorer 6 y las primeras versiones de los otros navegadores. Aunque al principio tenía diferencias significativas dependiendo del navegador.

El modo de hacer Ajax consiste en crear un objeto de la clase XMLHttpRequest y luego indicar qué URL se desea abrir con el método open(), para posteriormente realizar la solicitud con el método send().

Esta solicitud es asíncrona, por lo que tendremos que expresar una función callback para realizar cualquier comportamiento cuando se reciba la respuesta. Para ello se define la función, asignando a un evento "onload" (disponible desde IE 10, antes había que usar "onreadystatechange").

El código de un ejemplo básico de Ajax con XMLHttpRequest sería el siguiente:

var xhr = new XMLHttpRequest();
xhr.open("GET", 'dato.json');
xhr.send();

xhr.onload = function(e) {
  console.log(xhr.responseText)
}

En este ejemplo estamos accediendo a un archivo json llamado "dato.json". Como no indicamos más que el nombre del archivo, quiere decir que este debería estar situado en la misma carpeta que la página que se está ejecutando en el navegador.

Otro detalle importante es que las conexiones Ajax se realizan por HTTP y para que estos ejemplos funcionen la página que los ejecute también debe haberse accedido por HTTP, es decir, debe estar situada en un servidor web. Tienes más información en la página destinada a XMLHttpRequest.

La interfaz de fetch trabaja con promesas Javascript, por lo que permite organizar el código de una manera más versátil y mantenible. El único problema es que para recuperar un dato con fetch hay que encadenar dos métodos que devuelven promesas, lo que complica un poco los ejemplos.

Este sería un ejemplo de fetch en el que se recibe por Ajax un contenido almacenado en un archivo de texto.

fetch('contenido.txt')
  .then(response => 
    response.text()
  ).then( result => 
    document.getElementById('content').innerText = result
  ).catch(error => 
    console.log(error)
  );

Como se puede apreciar, el método fetch devuelve una promesa, que tratamos con el primer "then". Esa primera promesa entrega todo lo que sería la respuesta, incluyendo diversa información de la llamada Ajax (protocolo http). Pero si queremos acceder a lo que es el texto de la respuesta, tenemos que invocar el método text() sobre el objeto de la respuesta, lo que nos devuelve la segunda promesa, que debemos tratar con un segundo "then".

Si estamos poco acostumbrados a las promesas en Javascript puede resultar un poco complejo, pero en la práctica permite organizar el código de una manera bastante optimizada. En este referencia puedes ver otros ejemplos de fetch.

Además de las librerías del lado del cliente para poder hacer Ajax, como las mencionadas jQuery o Axios, también existen frameworks backend que permiten hacer Ajax. Estos frameworks tienen la característica de permitir hacer Ajax, pero sin necesidad de que intervenga código del lado del frontend.

En la actualidad hay dos ejemplos interesantes de tecnologías backend para hacer Ajax:

InertiaJS: Permite crear aplicaciones SPA renderizadas mediante código del cliente, pero sin la complejidad de este tipo de aplicaciones y permitiendo seguir con la arquitectura habitual del backend. Ellos dicen que no es un framework, porque justamente es capaz de integrarse con el framework backend que se esté utilizando.

Livewire: Es un paquete de Laravel para construir aplicaciones dinámicas, con Ajax, sin necesidad de escribir Javascript. Simplemente se escribe PHP en el código de los controladores, pudiendo acceder a las bases de datos y devolver vistas que se mostrarán en el cliente sin recargar la página.

Un precursor de estos frameworks para PHP era Xajax, sin embargo esta librería se dejó de mantener hace tiempo.