Las aplicaciones web, en cuestión de 10 años, han pasado a convertirse en verdaderas aplicaciones empresariales, robustas y seguras. En muchas ocasiones, incluso, se ha llegado a sustituir una aplicación de escritorio por una intranet. Eso implica que la lógica de negocio, es decir, el núcleo de la aplicación se encuentra en un servidor.

Este artículo que vais a leer es aplicable a cualquier tecnología de páginas web dinámicas, así que intentaré abarcar a lo largo de diferentes artículos, modos de trabajo específicos para cada tecnología. Como primera parte de dos artículos que haré, explicaré la razón por la que surge la necesidad de AJAX, en el siguiente artículo ya veremos como implementar el sistema AJAX en una página. ¡Comencemos!

Modelo Web “Clásico”

El modelo web “clásico” es el que utilizan las tecnologías de servidor (JSP, PHP, ASP, .NET…) para realizar la comunicación entre el navegador del usuario y el servidor. Lo que nos dice este modelo, es que siempre que se necesite ejecutar una porción de código en el servidor o bien se necesite una página, el navegador realizará una petición (GET, POST…) y el servidor devolverá una respuesta, que será interpretada por el navegador.

De esta manera, si un navegador hace una petición mediante GET a una página (por ejemplo mediante un enlace de HTML), dicha página se mostrará en el navegador. Pero también implica que si el navegador hace una petición a un fichero XML, el xml se renderizará en el navegador.

Por lo tanto, esas llamadas al servidor se traducen en barras de carga, parpadeos de pantalla y en lo que yo llamo “El Efecto Web“.

El Efecto Web

El Efecto Web es un término que hace referencia a la experiencia del usuario en nuestra página. Para explicar este efecto, lo mejor es tener un ejemplo en mente.

Supongamos que estamos desarrollando una intranet, es decir, una aplicación que los empleados de una empresa van a utilizar para gestionar su trabajo. Y creamos un módulo de registro de clientes en dicha intranet. El formulario de registro tiene tres desplegables (País, Provincia, Población)

Cuando se seleccione el país, se deberá acceder al servidor a recuperar las provincias correspondientes a ese país. Y lo mismo ocurrirá con las poblaciones. Al tratarse de grandes cantidades de datos, este sistema, según el modelo web “clásico”, se traducirá en una barra de carga o incluso en un parpadeo de pantalla. Lo que puede hacer que una persona trabajando 8 horas al día con nuestra aplicación acabe con ataques epilépticos 😉

Otro problema del efecto web, es la poca comunicación con el usuario. Muchas veces, el propio usuario no sabe si la barra de carga sigue dando vueltas por que está haciendo algo en el servidor o por que va a dar un error. E incluso, debido al diseño de los navegadores actuales, puede que el usuario no vea la barra de carga. Así que se puede dar el caso del “usuario metralleta“, que es el que hace click en un botón, y al no ver resultados al momento en el navegador dice “Esto no funciona!” y tacatacataca a hacer click repetidas veces en el botón. Y todo es por culpa de la falta de comunicación con el usuario.

Modelo web AJAX

Es posible leer por internet algo así como “Tecnología AJAX“, pero eso es incorrecto, ya que AJAX no es una tecnología en sí, si no que estamos hablando de una metodología a la hora de utilizar tecnologías ya existentes.

AJAX es el acrónimo de Asynchronous Javascript And Xml. Por lo tanto, las tecnologías que deberíamos conocer (en mayor o menor medida) son:

  • HTML + CSS – Diseño de la página
  • Javascript – Lógica de la página
  • XML – Manejo de datos

El modelo web AJAX nos dice que ahora no va a ser el navegador directamente el que realice las peticiones al servidor, si no que habrá un Motor AJAX que será el encargado de enviar las peticiones y recibir las respuestas. Este motor es un bloque de código en Javascript. Aunque para nosotros en muchos casos será transparente, internamente está enviando las peticiones y recibe las respuestas en XML y de manera asíncrona, lo que quiere decir que el motor solicitará un elemento al servidor y, cuando éste le devuelva el elemento, recogeremos dicha respuesta con un Callback, donde le indicaremos qué hemos de hacer con la respuesta por medio de Javascript.

¿Qué conseguimos con AJAX? Pues combinar la funcionalidad de servidor con la capacidad de Javascript para modificar el HTML en tiempo real. Así, para empezar, se elimina el efecto web y en el ejemplo anterior podríamos, por ejemplo, indicar con un gif que se están recuperando las provincias al seleccionar un país. Con lo que habremos ganado comunicación con el usuario.

Pues con esto ya hemos visto la teoría de cómo funciona AJAX y por qué es importante en nuestras aplicaciones. En el siguiente artículo ya pasaremos a hacer algo de código.

¡Hasta la próxima!

Rupert.