AJAX

AJAX

Desde hace un tiempo la palabra AJAX es la palabra de moda en el mundo del desarrollo de aplicaciones web.

El termino “Ajax” fue acuñado por Jesse James Garret en su articulo “Ajax: A  New  Approach to Web Applications”, es un artículo en Inglés excelente que vale la pena traducir por completo.

Ajax no es una tecnología. Es realmente muchas tecnologías, cada una floreciendo por su propio mérito, uniéndose en poderosas nuevas formas.

AJAX incorpora:

El modelo clásico de aplicaciones Web funciona de esta forma: La mayoría de las acciones del usuario en la interfaz disparan un requerimiento HTTP al servidor web. El servidor efectúa un proceso (recopila información, procesa números, hablando con varios sistemas propietarios), y le devuelve una pagina HTLM al cliente.

Este es un modelo adaptado del uso original de la Web como un medio hipertextual, pero como fans de “The Elements of User Experience” sabemos, lo que hace a la Web buena para el hipertexto, no la hace necesariamente buena para las aplicaciones de software.

El modelo tradicional para las aplicaciones Web (izq.) comparado con el modelo de AJAX (der.).

Comunicación síncrona vs. Asíncrona

En el desarrollo clásico tanto de aplicaciones como sitios web la comunicación con el usuario es síncrona respecto de las interacciones del usuario, es decir:

1.El usuario realiza una petición al servidor.
2.El servidor envía la página solicitada.
3.El usuario comienza a “leer” la página.
4.Llega un momento dado en el cual el usuario desea cambiar de página y mediante formularios o links realiza una petición al servidor volviendo al paso número 1.

En cambio la comunicación asíncrona no implica sincronismo ante los eventos del usuario, sino que ante cualquier evento del usuario nosotros podemos proceder en consecuencia, es decir:

1.El usuario realiza una petición al servidor
2.El servidor envía la página solicitada
3.El usuario comienza a “leer” la página
4.Llega un momento dado en el cual el usuario quiere cambiar de página o alterar la información que contiene la misma. En ese momento dado la aplicación teniendo definidos los eventos posibles actúa en consecuencia a la interacción que haya podido suceder. Entonces podremos cambiar al usuario de página, o por el contrario modificar la misma para satisfacer al usuario. Estos cambios no implican cambiar de página.

 

Es por esto que una aplicación ajax termina con la idea “arrancar-frenar-arrancar-frenar”. Cada interacción de un usuario generaría un requerimiento HTTP para poder mostrar la nueva información, pero mediante ajax las peticiones al servidor pueden denegarse al “motor ajax” que es quien procesaría las peticiones contra el servidor, permitiendo o no al usuario interactuar con la página mientras el servidor está procesando la información, evitando de este modo los tiempo de carga en los cuales el usuario ve como su reloj de arena da vueltas mientas su navegador trata de componer la nueva página mientras recibe la información del servidor.

 

 

Ejemplos prácticos en producción 

Flickr Yahoo.-

Es un espacio gratuito donde todo el mundo puede subir sus fotos y exponerlas al resto del mundo. En un principio se utilizaba macromedia flash para poder mostrar las fotos, hacerlas rotar , insertar comentarios sobre ellas etc….

Desde hace ya un tiempo incorpora ajax haciendo la navegación mas ligera , accesible e intuitiva.  A día de hoy flickr cuenta con más de un millón de miembros, los cuales interactúan gracias a ajax con sus imágenes en tiempo real. Uno de los mejores detalles que incorpora flickr es la posibilidad de editar el título y  descripción ( entre otros ) en tiempo real sin necesidad de seleccionar la foto, encaminar al usuario a una página de edición donde rellenará un formulario con la nueva información.
Flickr permite pulsando en el título de la imagen convertir el mismo en un formulario, tras editar el título y pulsar el botón de guardar todo resto de formulario desaparece volviendo a la vista normal de la página. En ese momento la nueva información queda guardada en la base de datos para ser consultada por cualquier otro visitante. Este ejemplo demuestra que el peso de la aplicación no tiene porqué ( como suponíamos) crecer sustancialmente sino al contrario, produciéndose una reducción considerable en la información intercambiada entre servidor y cliente.

Google Suggest.-

Google Suggest permite comprobar instantáneamente el numero de resultados que una búsqueda va a tener mientras se está escribiendo la misma. ¿Útil?¿Pesado para el servidor? … si google puede, no es problema de ajax sino de los recursos a emplear.

Este ejemplo demuestra la utilidad de ajax para realizar búsquedas rápidas (ej: Datos personales, números de teléfono) o solucionar problemas a la hora de auto completar campos específicos dentro de formularios.

En la parte práctica copiaremos el ejemplo de google para buscar páginas web haciendo un pequeño código donde buscaremos el número de teléfono de una persona simplemente escribiendo una parte de su nombre o apellido.

Google Maps.-

Ajax es empleado en google maps para poder recargar pequeños cuadros de imagen que forman el plano visible. Por otro lado permite mostrar de una manera mas intuitiva herramientas de análisis , zoom etc…

La herramienta mas útil es el Drag & Drop que nos permite desplazarnos por la imagen arrastrándola en dirección contraria a donde queremos dirigirnos.

Yahoo!

 

 Oddpost (http://oddpost.com/learnmore)

El equipo de webmail Oddpost actualmente están trabajando en

rediseñar Yahoo! Mail siguiendo la filosofía AJAX.

Gmail

 

A la hora de hablar de Gmail, solo quiero hacer un comentario(reflexión personal)… Si gmail fuese de código abierto y se pudiese instalar en cualquier servidor como cliente de webmail… ¿quien usaría Squirremail , neomail o cualquier otro… ?

¿Para qué nos sirve AJAX ?

Ajax nos sirve principalmente para diseñar y programar interfaces de usuario mucho más haya de la web , rompiendo las limitaciones que la “sincronía” supone y abriendo una nueva puerta que nos permitirá desarrollar aplicaciones que en un principio solo podrían concebirse para el escritorio, en aplicaciones web. Este cambio permitirá complementar aplicaciones de escritorio con aplicaciones similares con el plus de la universalidad de Internet permitiendo acceder a información de manera remota pero siempre con una interface similar y un numeroso grupo de utilidades que revalorizarán el producto convirtiendo cualquier desarrollo en algo más que una “página web”.

 Ventajas / Desventajas

Desventajas

•El cliente necesita un navegador que soporte javascript .Hoy por hoy la mayoría de los navegadores soporta JavaScript. Internet Explorer, Mozilla, Firefox, Safari etc… Para esta desventaja tenemos una “excusa” , no estamos hablando de desarrollar páginas web con ajax, sino aplicaciones web, y como toda aplicación tiene unos requisitos mínimos, y siendo este javascript tampoco se discrimina un espectro muy amplio de usuarios.

•El mal uso de ajax/javascript puede mal emplearse sobrecargando el servidor de peticiones ej: Si hacemos que cada milisegundo haga una consulta con una base de datos… al administrador del sistema le pueden surgir instintos asesinos.

Ventajas

•Nos permite diseñar interfaces muchísimo mas dinámicas acercándonos a “aplicaciones de escritorio”.

•La comunicación asíncrona con el servidor nos permite varias cosas que reducen el “peso de la página” / “lineas de código que el cliente tiene que descargarse”

•Campos de select, si las opciones son muchas… no es necesario transmitirlas en la primera carga de la página, podemos producir la lista de opciones cuando el cliente pulse sobre el des plegable. Otra solución es hacer una búsqueda dinámica.

•La navegación por la aplicación mediante ajax nos permite evitar al cliente descargar la cabecera de todos los “documentos”,”pantallas” <html><head><tit….. etc… Podemos cambiar el contenido de cualquier objeto del DOM dinámicamente ante los eventos que controlamos con javascript.

•No requiere plugins o capacidades específicas de ciertos navegadores.

•Las aplicaciones son más interactivas, responden a las interacciones del usuario más rápidamente, al estilo desktop

•Se reduce el tamaño de la información intercambiada

Que hacer / Que NO hacer con ajax

Ajax puede parecernos útil o no , pero como en todos los aspectos de la vida, de nada se puede abusar. Por muy útil, potente o maravilloso que nos parezca no podemos utilizarlo en el 100% de la página sino para pequeños detalles donde aporte novedades y se diferencie del resto de productos.

Tampoco podemos utilizar ajax si nuestro objetivo es la accesibilidad, los requisitos mínimos son “mínimos” pero no podemos confiar a la suerte que todos nuestros clientes tengan un navegador que soporte javascript.
Por esto es necesario controlar las personas que entran a nuestra página, porque de lo contrario se encontraran con una aplicación que simplemente “no hace nada”.

Limites de Ajax

Al entender ajax “manda de una patada” los limites de la web muy lejos. Ajax nos permite hacer interfaces tan dinámicas como siempre hemos deseado pero la inaccesibilidad de flash, plugins de java, etc… no nos dejaban llegar.

Por otro lado a nivel “personal” ajax nos permite hacer muchas más cosas a las que estamos acostumbrados. Es por esto y por su “juventud” que es un espacio muy abierto para la innovación. Los limites personales los pone la imaginación de cada uno.

Estos limites “personales” pueden sufrir un placare tecnológico. Nos encantaría poder tener páginas web actualizadas al enano segundo donde todos los visitantes pudiesen intercambiar información y se refrescasen las ventanas de todos ellos mientras suben archivos y editan Bases de datos mientras graban ficheros de configuración. Pero hay que tener presente que del lado servidor, toda esa interactividad supone gastos cuantiosos. Es necesario llegar a un equilibro entre innovación, recursos y accesibilidad de los clientes.

EN CONCLUSION : AJAX, en resúmen, es el acrónimo para Asynchronous JavaScript + XML y el concepto es: Cargar y renderizar una página, luego mantenerse en esa página mientras scripts y rutinas van al servidor buscando, en background, los datos que son usados para actualizar la página solo re-renderizando la página y mostrando u ocultando porciones de la misma.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: