Que Cosa Es Ajax Y Para Qué Es Bueno

Ajax no es una tecnología en si misma, sino un término que se refiere al uso de un grupo de tecnologías.

Las aplicaciones tradicionales web esencialmente envían formularios, completados por un usuario, a un servidor web. Este responde enviando una nueva página web. Dado que el servidor debe enviar una nueva página cada vez, las aplicaciones corren más lenta y torpemente que sus contrapartes nativas.

Photo credit: Jesper Noer

Las aplicaciones Ajax, por el contrario, pueden enviar peticiones al servidor web para traer solamente los datos que son necesarios, generalmente utilizando SOAP o algún otro dialecto de servicio web basado en XML.

En el cliente, JavaScript procesa la respuesta del servidor web.

El resultado es una interfase con mayor respuesta, dado que la cantidad de datos intercambiados entre el navegador web y el servidor web es reducida enormemente. También se ahorra mucho tiempo de procesamiento en el servidor web, ya que una parte importante de dicho procesamiento se realiza en el lado del cliente.

(Fuente: Wikipedia)

Esta es una excelente introducción de Eddie Traversa a su Tutorial Ajax, ¿Para Qué Es Bueno?, el cual no solamente provee una excelente introducción al principiante, sino que además analiza técnicas de codificación específicas y da ejemplos:

Para mi manera de pensar, Ajax es más una progresión natural de un conjunto existente de técnicas que algo completamente nuevo.

Inclusive dentro de esa progresión, las cosas son marcadamente diferentes respecto a años anteriores en un par de áreas claves:

• Ajax provee un mecanismo para mezclar y hacer coincidir xml con xhtml.
• Ajax reduce significativamente tener que traer cosas continuamente de un servidor (el scripting remoto iframe es comparable razonablemente aquí).
• Ajax supera algunos cuellos de botella de velocidad que el desarrollo web tradicional también ha caído preso. En muchos casos un sitio basado en Ajax cargará más rápido comparado con un sitio web tradicional.
• Cuando esta bien hecho, reduce significativamente los tiempos de carga inicial.

Antes de proceder, hay que destacar que Ajax no es una panacea. Tiene algunos problemas que necesitan ser superados para que continúe madurando. Pero es un campo promisorio para involucrarse y a medida que pasen los años, probablemente va a afectar en gran medida la forma en la cual pensamos cómo construir páginas y aplicaciones Web.

También es necesario aclarar que Ajax no es una tecnología en si sino una técnica que combina bien con otras tecnologías y técnicas. Por ejemplo XML, DHTML, CSS, XHTML.

De hecho, Ajax realmente es DHTML con el objeto xmlhttprequest incrustado. Es asombroso pensar a como un objeto puede cambiar el todo el campo de juego.

Tal como están las cosas actualmente en el campo Ajax, casi tenemos dos extremos ocurriendo.

En un extremo del continuum tenemos desarrolladores construyendo todo tipo de complicadas etiquetas JavaScript que en muchos casos son innecesarias y excesivas.

En el otro extremo de la escala tenemos pequeños ejemplos flotando alrededor de la web que demuestran cómo cargar XML en un documento o hacer algún tipo de procesamiento de formularios centrados en Ajax.

Mientras que ambos extremos del espectro tienen una parte para jugar en el progreso de la web, no estoy convencido que los principios de Ajax y cómo pueden ser mejor aprovechados por un desarrollador hayan sido transmitidos de la manera apropiada.

Ajax en si es una técnica, pero para usar efectivamente la técnica uno tiene que familiarizarse con la filosofía que está detrás de la misma.

En otras palabras, no es simplemente el uso de la técnica lo que es importante, sino más bien desarrollar una mentalidad y abordaje al desarrollo web que es central.

A la fecha, he mencionado el término Ajax un número de veces pero no he descrito el objeto central que hace que Ajax sea Ajax.

En el corazón de Ajax está el objeto xmlhttprequest y su equivalente ActiveX de Microsoft.

Es éste el objeto que permite que los datos sean transferidos asincrónicamente.

En el caso de que usted no tenga una idea clara de lo que significa asincrónico, es la capacidad de manejar procesos independientemente de otros procesos. Sincrónico, lo opuesto de asincrónico, entonces significa que el proceso depende de otro proceso. Para ilustrar lo utilicemos un escenario clásico de página web.

Supongamos que tenemos la página A y en esa página tenemos un número de elementos, incluyendo un par de etiquetas script y de estilo. Con la transferencia sincrónica de datos la etiqueta script necesitan ser analizado antes de que sea analizado el siguiente elemento. De esta forma el siguiente elemento para hacer analizado por el navegador depende de la etiqueta script que ha sido analizado primero. Efectivamente estamos creando un cuello de botella en una conexión entre la página web y el navegador. Las etiquetas de estilos y los elementos de enlace en la sección head del documento crea el mismo efecto de cuello de botella. Ellos tienen que ser analizados uno a la vez antes de que otros elementos de la página puedan ser descargados.

Una vez que han sido analizados, los elementos en la sección body pueden usar conexiones concurrentes para acelerar el proceso de descarga. Por ejemplo, muchos servidores manejan entre 2 a 4 conexiones concurrentes entre página web y navegador.

Consecuentemente, esto significa que 2 a 4 imágenes u otros elementos de página podrá ser cargados al mismo tiempo. Aún antes que el proceso comience lo que está entre las etiquetas head tiene que ser analizado primero, lo cual puede demorar considerablemente la carga de las páginas web.

Con más razón si usted está utilizando múltiples CSS y etiquetas JavaScript.

Casi todas las páginas web y blogs en la Internet utilizan este método. No es difícil ver porque esto puede ser un problema en términos de aumentar la velocidad de carga de la página.

Los métodos de carga asincrónicos difieren de este escenario porque el proceso de carga está manejado independientemente de cada uno de los otros y hasta un grado importante sufrirá el cuello de botella del diseño tradicional de páginas Web.

Lo central de esta técnica es utilizar inicialmente JavaScript al mínimo y luego empujar todas las etiquetas relacionadas en la sección head, incluyendo el resto de las etiquetas JavaScript, CSS etc. a través de un objeto xmlhttprequest.

Este método utiliza múltiples conexiones en vez de la única que usan muchas página web tradicionales y por lo tanto acelera las cosas considerablemente.

¿Está usted probando algún código Ajax?

Eddie Traversa lo acompaña en el paseo de este tutorial totalmente documentado sobre la codificación Ajax. Fíjese...

Acerca del autor:
Eddie Traversa ha estado desarrollando para la web durante más de diez años, escribió varios artículos sobre JavaScript y DHTML, y tiene un sitio con recursos para los desarrolladores en
http://www.dhtmlnirvana.com/