Estamos comenzando el Manual de Ajax práctico, pero nunca viene mal algo de teoría para comenzar. Más que nada por aclarar un término como es "Ajax", que a veces causa algo de confusión a las personas que comienzan con Javascript. Además, quedemos también ofrecer algunas pistas sobre los modos de realizar procesos mediante Ajax en Javascript.

Un poco de historia sobre Javascript y Ajax

Allá por mediados de los años 90, época en la que Internet apenas asomaba en nuestras vidas cotidianas, y muchos eran los que todavía aún podrían prescindir de ella, era muy común oír hablar del lenguaje JAVA. Ninguna publicación especializada escapaba al fenómeno: las revistas se llenaban de artículos elogiando aquella tecnología, y vaticinando que el lenguaje de programación que cambiaría nuestras vidas.

Pocos hubiesen arriesgado que la base del verdadero fenómeno de los años siguientes se encontraría no en el todopoderoso JAVA, sino en un pequeño y humilde lenguaje de scripting, el cual se ejecuta en el contexto del navegador. Este lenguaje tomaría parte del nombre de la antigua tecnología y por ello muchos, durante un tiempo, confundirían erróneamente con su hermano menor. Aunque poco tendrían estos dos lenguajes en común salvo su sintaxis. Estamos hablando, claro, del lenguaje JavaScript.

No sería hasta comienzos del siguiente milenio cuando Javascript encontraría un socio del cual se nutriría con fuerza, sociedad de la cual se originaría una verdadera revolución que cambiaría la forma en que vemos y utilizamos la red de redes. Este socio es, claro está, el XML.

Sin ser un lenguaje propiamente dicho, XML ya tenía varios laureles en su haber: para ese entonces prometía generar un profundo cambio en el intercambio de información y la representación de la misma (de hecho por aquel entonces ya había dejado de ser una promesa para convertirse en una realidad).

Pero aquella fusión de la cual hablamos no ocurriría sino gracias al desarrollo de una nueva API dentro de los navegadores, construida mediante el objeto HTTPRequestObject.

Esta evolución del lenguaje data de febrero del año 2005, cuando Jesse James Garrett, arquitecto de la información, le daría un nombre al fenómeno acuñando el término AJAX: Asynchronous JavaScript and XML (JavaScript y XML asincrónicos). Tal vez, sin pretenderlo, con el nuevo término, de palabra corta y pegadiza, ayudara a que el fenómeno se expandiera aún con mayor fuerza.

Entendiendo Ajax

Si toda la historia anterior sobre Java, Javascript y XML no te ha aclarado demasiado, déjanos que te expliquemos Ajax mediante unos casos prácticos.

Si tienes una cuenta de Gmail, probablemente ya lo hayas experimentado. Cuando usas Gmail y abres mensajes, creas correos y los mandas, etc. La página no se recarga continuamente, con cada acción que solicitas al servidor. En cambio la página se va actualizando por partes, de una manera ágil y dinámica, mostrando lo que va ocurriendo a medida que el usuario hace uso de su casilla de correo. Todo eso ocurre mediante Ajax.

Otro ejemplo sencillo sería el botón de "like" de Facebook o Youtube. Cuando pulsas ese botón la página no se recarga por completo, sino que simplemente se actualiza una parte de la página para que veas que el like se ha realizado, subiendo un contador de likes.

Antes de Ajax, toda solicitud al servidor producia por necesidad la recarga de todo el contenido de la página y el refresco del navegador. Con Ajax en cambio es posible recibir datos (como el número de likes actual, o el contenido de un email) y realizar cambios en el documento HTML, en elementos de la página que muestren respuesta al usuario de sus acciones.

AJAX es, sin lugar a dudas, una de las novedades más atractivas y promisorias de la denominada Web 2.0. AJAX echa por tierra todo lo que conocíamos acerca de la manera de relacionarnos con Internet. Para los desarrolladores abre una nueva vía de realizar aplicaciones web, que son mucho más dinámicas y ágiles, imitando la respuesta de las aplicaciones de escritorio.

Esta tecnología redefine el término interactividad, pasando al siguiente nivel. A partir de esta pequeña revolución, esté expectante de lo que pueda ocurrir en los años subsiguientes en lo que a Internet se refiere, algo de lo cual ya puede verse con solo recorrer algunos de los blogs especializados, que a diario reflejan alguna noticia relacionada con algún nuevo servicio, sitio o aplicación que hace uso de las bondades de AJAX.

Evolución de Ajax

AJAX no es una tecnología propiamente dicha. Es, como dijimos, una fusión de tecnologías. Pero ¿qué es lo que hace tan poderoso a AJAX?

A decir verdad, basa su fortaleza en sus dos pilares fundacionales:

• Un lenguaje JavaScript cada vez más poderoso, que ha ido mejorando con el correr de los años y se ha ido asentado gracias a la definición de normas y estándares que se fueron adoptando (por fin) de manera cada vez más amplia
• La versatilidad del XML y en general los lenguajes de intercambio de información.

En este caso también, como suele decirse, el todo es más que la suma de sus partes.

Gracias a AJAX, atrás quedaron los vetustos formularios cuyas páginas debían ser recargadas para el envío. Atrás quedaron también los interminables listados de información que nuestro navegador bajaba, información de la cual tal vez sólo necesitábamos una pequeña parte. AJAX hace que la información sea cargada de manera precisa, fácil y ágil.

Es gracias a todo esto que, volviendo al caso de Gmail, enviar un mensaje en este servicio de correo electrónico no implica recargar todos los mensajes de nuestra bandeja de entrada una vez enviado. O abrir un mensaje antiguo para recuperar un dato que precisamos no significa tener que volver a solicitar y descargar toda la interfaz del sistema (imágenes, HTML, scripts, etc.) otra vez.

Para hacer una analogía rápida, AJAX hace más parecidas las aplicaciones web a aplicaciones standalone. Pero con todas las ventajas de lo que una aplicación web implica.

Pero la cosa no termina en Gmail. Lo que hace tan emocionante a AJAX es que diariamente, nuevas aplicaciones y servicios son lanzados haciendo uso de esta tecnología. Servicios que nos aportan un plus extra por su agilidad, velocidad y simplicidad de uso. Casos de éxito como flickr, Digg, del.icio.us, Writely (un procesador de textos montado totalmente en la web), Microsoft Outlook, Google Drive, y un larguísimo etcétera son un claro ejemplo de ello.

¿Y dónde aparece JSON?

Hemos hablado mucho de XML, ya que Ajax comenzó por ahí pero lo cierto es que actualmente cuando se usa un lenguaje de intercambio de datos en la web, casi siempre se trabaja con JSON.

JSON es un lenguaje que usa la notación de objeto Javascript para transferir información. Es generalmente más ligero que HTML y de más fácil procesamiento por los sistemas informáticos, por lo que resulta idóneo para el mundo de la web.

Así pues, cuando las aplicaciones web transfieren datos que tienen que representar en el navegador, generalmente lo hacen con JSON. Así que es justo decir que actualmente el tándem Ajax se produce más comúnmente con Javascript y JSON que con Javasctipt y XML.

¿Hasta dónde llegará AJAX?

Hemos visto con el paso de los años que Ajax ha conseguido cambiar el tipo de aplicaciones que se ven en la web, permitiendo todo tipo de desarrollos lo más variopintos que nos podamos imaginar. Ha conseguido que la Web se haya convertido en toda una plataforma para las aplicaciones, sin importar lo complejas que sean.

Todas las SPA explotan las capacidades de Ajax para hacer aplicaciones frontend capaces de funcionar sin refrescar el navegador del usuario. También las PWA tienen a Ajax como una de las tecnologías de base para poder funcionar.

En resumen, podemos decir que Ajax es el motor de todas las aplicaciones web modernas.

Modos de realizar Ajax

En este artículo nos vamos a quedar en la teoría, sin ver ejemplos prácticos, pero no te preocupes porque en DesarrolloWeb.com tenemos muchos artículos útiles para aprender. Lo que queremos es explicarte cuáles son las alternativas más destacables para hacer Ajax.

• XMLHttpRequest: que consiste en el método más tradicional implementado por los navegadores. Aunque a decir verdad hoy no se usa realmente, porque existen mecanismos más sencillos.
• Fetch: Es la nueva manera de realizar Ajax, implementado mediante promesas.
• Librerías de terceros como jQuery o Axios, que nos permiten un lenguaje de más alto nivel para acceder de manera sencilla a las funcionalidades de Ajax.

Te recomendamos la lectura del bloque Alternativas de Ajax para obtener más información y enlaces.

Además, para ver ejemplos de todos estos mecanismos de trabajo con Ajax tienes el Manual de Ajax práctico.