Una tarde con AJAX

Para empezar: ¿Qué es Ajax?

Asynchronous JavaScript And XML

Es una combinación de varias tecnologías que permite que las aplicaciones web se ejecuten en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, lo que significa aumentar la interactividad, velocidad y usabilidad en las aplicaciones.

Ventajas e inconvientes de utilizar Ajax

Como ventajas tenemos:

Las páginas no se recargan constantemente al interactuar con ellas.
El tiempo de espera para una petición se reduce. El usuario al hacer una petición al servidor, no envía toda la página.
Por la misma razón anterior el tráfico al servidor se reduce.
Está de moda. Las aplicaciones web de más éxito están basadas en Ajax. . El primer sistema conocido que implementó Ajax fue el trabajo en grupo del Microsft Exchange Server. Sin embargo, Google es el precursor de Ajax ya que lo ha popularizado enormemente. Entre las aplicaciones de Google que utilizan Ajax se encuentran: Google Groups, Google Suggest, Google Maps y Gmail.

Pero como todo no es de color de rosa, tenemos por otro lado:

Falta de integración con el botón retroceder del navegador. Al pinchar en el botón de retroceder del navegador vamos a la página anterior, no a la gestión anterior que estuviésemos realizando.
Falta de soporte para todos los navegadores. Navegadores soportados:
- Internet Explorer (a partir de la versión 5.5)
- Navegadores basados en Gecko a partir de la versión 7.1 (Firefox, Netscape, Seamonkey, K-meleon, Galeon…)
- Konqueror (a partir de la versión 3.5)
- Opera (a partir de la versión 8)
Falta de soporte para muchos navegadores móviles (PDA, móvil…).
No se pueden generar links específicos. Es muy difícil, por ejemplo, que muchas de las gestiones basadas en Ajax aparezcan en los resultados de los diferentes buscadores.
Accesibilidad: si queremos que nuestras páginas web sean accesibles, debemos dar una alternativa para aquellos/as usuarios/as que no tengan javascript habilitado, lo cual supone volver a los formularios y a las páginas web tradicionales.
Demasiado código Ajax hace lento el navegador.

Cuidado con los controles

En la página de ejemplos de Ajax Control Toolkit (http://www.asp.net/ajax/AjaxControlToolkit/Samples/) podemos encontrar ejemplos de utilización de los controles más comunes de Ajax para Microsoft.

Además de estos controles, vamos a utilizar EXTENSIONES para darle funcionalidad a nuestras páginas.

Ejemplos de algunas de las extensiones más utilizadas:

UpdatePanel: habilita secciones de una página para que se recarguen parcialmente sin devolución de datos.
UpdateProgress: sirve para mostrar el progreso de las actualizaciones parciales de una página.
Timer: sirve para provocar que una sección de una página se recargue automáticamente cada cierto tiempo.

Algunos problemas conocidos

ToolkitScriptManager

En ocasiones, cuando la recarga parcial de una página lleva bastante tiempo (por ejemplo en la carga de un grid), podemos encontrarnos con el siguiente mensaje:

La solución pasa por asignar un tiempo de espera más largo al objeto “ToolScriptManager”, mediante la propiedad “AsyncPostBackTimeout” (en segundos).

<ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManager1" AsyncPostBackTimeout="360""/>

ModalPopup

En ocasiones puede ocurrir que, en una página, mostremos un ModalPopup para mostrar cierta información al/a usuario/a, pero que además, desde ese ModalPopup queramos llamar a otro ModalPopup para realizar, por ejemplo, una búsqueda sin perder la información del primero.

El problema surge con los navegadores que no tienen tratan bien la propiedad position:relative de las hojas de estilo Css2 (como Internet Explorer 6). En este caso el segundo ModalPopup (que debería salir centrado en la pantalla) aparecerá en la esquina superior izquierda de la misma.

La solución pasa por evitar estos dobles popups, ocultando el primero cuando queramos mostrar el segundo.

El peligro de los UpdatePanels

En cuanto comenzamos a conocer la utilidad de los UpdatePanels podemos tener la tentación de incluir 6 o 7 UpdatePanels en cada página, para aprovechar su utilidad y las funcionalidades que nos brindan.

Pero el peligro está en su falta de transpariencia. Visualmente solo se recarga su contenido, y los desarrolladores tienden a pensar que solo se envía y recibe del servidor el contenido del UpdatePanel.

Las páginas asp.net utilizan la propiedad viewstate de sus controles para almacenar el estado y contenido de cada uno de ellos. Pues bien, esos estados y contenidos son enviados al servidor cada vez que se refresca un UpdatePanel. Dependiendo del número de controles de servidor que tengamos en la página (y no digamos ya si tenemos por ejemplo un GridView), se pueden estar enviando y recibiendo muchos datos para refrescar pequeñas porciones de la misma.

La recomendación, por tanto, es utilizar los UpdatePanels en su justa medida.

Pero: ¿por qué Ajax es más lento que una web “tradicional”?

Al incluir las librerías asp.net ajax en una página web, esta se vuelve muy lenta incluso para conexiones rápidas.

La razón de ello se encuentra en lo que hace “internamente” la página.

Asp.Net Ajax genera en cada página de 2 a 3 archivos .js dinámicos de unos 80kb.
Si además utilizamos controles del Ajax Control Toolkit genera varios .js adicionales de similar tamaño.

Al ser archivos .js dinámicos, algunos navegadores no los guardan en la caché, por lo que el sitio se vuelve más o menos lento cada vez que lo visitamos.
E incluso aunque lo guarde en caché, sigue siendo lento la primera vez que lo visitamos.

Además se suele notar en el navegador una latencia (de unos segundos) cada vez que se carga una página, como si el navegador se quedase “pensando” y siendo durante ese tiempo imposible interactuar con él.

Conclusión: lo que funciona más o menos rápido mientras hacemos pruebas en nuestra máquina local, se hace muy lento al probarlo por primera vez en un entorno real, sobre todo en la primera carga.

Arriba