Objeto XMLHTTPRequest : Implementación y uso

La interfaz se presenta encapsulada en una clase. Para utilizarlo, la aplicación cliente debe crear una nueva instancia mediante el constructor adecuado. Es posible realizar peticiones síncronas y asíncronas al servidor; en una llamada asíncrona el flujo de proceso no se detiene a esperar la respuesta como se haría en una llamada síncrona, si no que se define una función que se ejecutará cuando se complete la petición: un manejador de evento.

XMLHttpRequest es una interfaz para realizar llamadas mediante HTTP, por lo que es recomendable un buen conocimiento de este protocolo. Es importante el manejo correcto de la cache en el servidor HTTP, en los proxy cache intermedios y en el navegador WEB.

Otro elemento importante es el manejo de juegos de caracteres, la codificación y decodificación de texto y su identificación mediante cabeceras HTTP y MIME. El estándar XMLHttpRequest recomienda UTF-8 para la codificación de cadenas de texto. La codificación particular de los datos transmitidos se determina según el siguiente algoritmo, utilizando la primera opción que corresponda.

• Si los datos transmitidos son XML o HTML, y así se identifica mediante la correspondiente cabecera Content-Type de HTTP, la codificación se detectará basándose en las reglas estándar de XML o HTML según corresponda.
• Si la cabecera HTTP especifica un tipo MIME mediante Content-Type e identifica un charset se utiliza dicho charset.
• Si los datos enviados especifican un BOM válido, se utilizará la variante UTF determinada por dicho BOM.
• Utilizar UTF-8.

Es importante tener esto en cuenta en entornos dónde se mezclen varias codificaciones, por ejemplo, pueden producirse errores de visualización de caracteres al incorporar funcionalidad AJAX a una página WEB codificada con ISO 8859-1.

Referencias [ www.programacionweb.net, es.wikipedia.org, www.w3.org, en.juantxu.net ]

Objeto XMLHTTPRequest : Evolución

La primera versión de la interfaz XMLHttpRequest fue desarrollada por Microsoft que la introdujo en la versión 5.0 de Internet Explorer. Esta primera versión se publicó utilizando un objeto ActiveX, lo que significa que puede ser utilizada desde cualquier entorno de desarrollo de software con soporte para esta tecnología, es decir, la práctica totalidad de plataformas generalistas de desarrollo para Microsoft Windows. Microsoft ha seguido manteniendo y actualizando esta tecnología incluyendo la funcionalidad dentro del Microsoft XML Parser (MSXML) en sus sucesivas versiones. A partir de la versión 7 de Internet Explorer la interfaz se ofrece de manera integrada. Al ser integrada, el acceso a la interfaz se realiza enteramente con objetos (JScript o VBScript) proporcionados por el navegador y no mediante librerías externas.

El proyecto Mozilla incorporó la primera implementación integrada de XMLHttpRequest en la versión 1.0 de la Suite Mozilla en 2002. Esta implementación sería seguida por Apple a partir de Safari 1.2, Konqueror, Opera Software a partir del Opera 8.0 e iCab desde la versión 3.0b352.

El World Wide Web Consortium presentó el 27 de septiembre de 2006 el primer borrador de una especificación estándar de la interfaz. La versión actual de 15 de abril de 2008, etiquetada como borrador final (last call working draft), es el resultado de varias revisiones.

Mientras no se alcance una versión definitiva, los desarrolladores de aplicaciones WEB deberán tener en cuenta las diferencias entre implementaciones o bien utilizar paquetes o frameworks que realicen esta función.

Referencias [ www.programacionweb.net, es.wikipedia.org, www.w3.org, en.juantxu.net ]

Objeto XMLHTTPRequest : Qué es y para qué sirve ?

También conocido como HXR, el objeto XmlHttpRequest es un objeto JavaScript que nos permite realizar peticiones al servidor web sin la necesidad de recargar la página que estamos visualizando en el navegador que, como ya se mencionó anteriormente, consiste en una de las principales ventajas de la programación AJAX. Esto es muy útil a nivel de diseño y de flexibilidad de la aplicación. Podemos recargar datos de modo encubierto, podemos manipularlos y mostrarlos sin que el usuario perciba un cambio de página y sin la molestia de la recarga. De este modo una vez que tenemos el objeto XmlHttpRequest podemos hacer peticiones encubiertas al servidor.

Para ello tenemos toda la riqueza que JavaScript, DOM y XML nos ofrece para poder procesar y manipular la información recibida. Normalmente la petición al servidor de datos se dispara con un determinado evento que llama a una función u objeto JavaScript que manejará la petición y manipulará los datos para integrarlos en el contenido de la página.

Referencias [ www.programacionweb.net, es.wikipedia.org, www.w3.org, en.juantxu.net ]

Antes de continuar… Por qué debo usar AJAX ?

En el capítulo anterior hablamos de ventajas y desventajas que tiene AJAX, sus conceptos y hasta su funcionamiento pero ¿Por qué debo usar AJAX y no otra metodología?

1. Porque está fundamentado en los estándares abiertos

Ajax está formado por las tecnologias Javascript, html, xml, css, y XML HTTP Request Object, siendo este último el único que “no es” estandar pero es soportado por los navegadores mas utilizados de internet como son los basados en mozilla, internet explorer, safari y opera.

2. Por sus ventajas en usabilidad

Permite a las páginas hacer una pequeña petición de datos al servidor y recibirla sin necesidad de cargarla página entera. El incremento de las actualizaciones “on the fly” elimina el tener que refrescar el navegador, algo bastante apreciado a la hora de operar en una aplicación web.

3. Porque es válido en cualquier plataforma y navegador

Internet explorer, los basados en mozilla y firefox son los que se llevan la palma en el mercado de internet y además son los navegadores en los que es mas fácil programar aplicaciones Web AJAX, pero ahora es posible construir aplicaciones web basadas en AJAX para que funcionen en los navegadores mas modernos. Es una de las razonas mas importantes por las que AJAX se ha vuelto tan popular. Aunque si bien muchos desarrolladores sabían que era posible usarse años atrás con Internet Explorer, no era viable realizarse. Ahora ya es posible su avance gracias a Mozilla y Firefox.

4. Porque es benéfico a las aplicaciones web

AJAX es la cara del presente en las aplicaciones web – las aplicaciones web conllevan ciertos beneficios sobre las aplicaciones sobre escritorio (apliaciones que dependan de un sistema operativo, librerias, lo que entendemos por programas compilados). Esto incluyó un menor coste de creación, facilidad de soporte y mantenimiento, menores tiempos a la hora de desarrollarlas, y sin necesidad de instalaciones; éstos son algunos de los beneficios que han llevado a las empresas y usuarios el adoptar aplicaciones web desde mediados de los 90. AJAX solo ayudará a las aplicaciones web a mejorar y conseguir un mejor resultado de cara al usuario final.

5. Porque no es dificil su utilización

Porque AJAX esta basada en los estándares que han sido utilizados durante muchos años, muchos desarrolladores web han tenido que utilizar las tecnologías que las aplicaciones AJAX requieren. Ésto significa que no es un gran esfuerzo el aprendizaje de los desarrolladores el pasar de un simple código HTML y aplicaciones web a una potente apliación AJAX. Tambié significa que los desarrolladores puedes actualizar poco a poco las interfaces de usuario hacia unas interfaces con AJAX; no necesita una re-escritura de la aplicación entera, se puede hacer incrementalmente.

6. Porque es compatible con Flash

Muchos desarrolladores tienen serias dudas sobre usar Flash o AJAX. Definitivamente hay ventajas y desventajas en ambas tecnologías según la situación que se de pero también hay muchas posibilidades y muy buenas para que amabas funcionen en conjunto.

7. Porque ha sido adoptado por las compañías grandes de la tecnología web

La difusión de AJAX en los líderes de la industria de internet prueba que el mercado acepta y valida el uso de esta tecnología. Todo el mundo esta migrando hacia AJAX incluyendo Google, Yahoo, Amazon, Microsoft (por nombrar unas pocos). Google Maps fue lo que captó la atenció de los desarrolladores web. Cuando empezaron a investigar como google era capaz de llevar esa increible herramienta dentro de un navegador sin necesidad de ningún tipo de plug-in, encontraron que AJAX estaba detrás del tema.

8. Web 2.0

El movimiento Web 2.0 está cada vez mas en auje y dando quebraderos de cabeza de muchos programadores, usuarios, y vendedores. Esto esta ayudando la adopción de AJAX. Las interfaces de AJAX son un componente clave de muchas de las aplicaciones Web 2.0, como puede ser BackPack (un organizador de disco online en entorno Web) y Google Maps. Afortunadamente gracias bombo que se le esta dando, acelerará la adopción de AJAX y la los beneficios de su uso lo mantendrá en escena. Una de las claves principales de Web 2.0 es el usar la red como plataforma para el desarrollo de aplicaciones, en vez de simples páginas web. Siendo importante la iteracción de los usuarios con la apliación en sí.

9. Porque es independiente del tipo de tecnología de servidor que se utilice

Así como AJAX funciona en cualquier navegador, es perfectamente compatible con cualquier tipo de servidor estándar y lenguage de programación Web. PHP, ASP. ASP.Net, Perl, JSP, Cold Fusion. El ser completamente compatible el desarrollo en éstas tecnologías ha ayudado a AJAX a que vaya cada vez mas en auge.

10. Y porque mejora la estética de la web

Con AJAX se puede interactuar la imaginación del desarrollador con la usabilidad de una apliación web de forma que se pueda realizar una aplicación que si no estuviera dentro de un navegador, podría pasar por una aplicacion normal de escrotorio.

Funcionamiento de AJAX : Interacciones síncronas y asíncronas, parte 2

Las peticiones HTTP al servidor se sustituyen por peticiones JavaScript que se realizan al elemento encargado de AJAX. Las peticiones más simples no requieren intervención del servidor, por lo que la respuesta es inmediata. Si la interacción requiere una respuesta del servidor, la petición se realiza de forma asíncrona mediante AJAX. En este caso, la interacción del usuario tampoco se ve interrumpida por recargas de página o largas esperas por la respuesta del servidor.

Desde su aparición, se han creado cientos de aplicaciones web basadas en AJAX. En la mayoría de casos, AJAX puede sustituir completamente a otras técnicas como Flash. Además, en el caso de las aplicaciones web más avanzadas, pueden llegar a sustituir a las aplicaciones de escritorio.

A continuación se muestra una lista de algunas de las aplicaciones más conocidas basadas en AJAX:

• Gestores de correo electrónico: Gmail, Yahoo Mail, Windows Live Mail.
• Cartografía: Google Maps, Yahoo Maps, Windows Live Local.
• Aplicaciones web y productividad: Google Docs, Zimbra, Zoho.
• Otras: Netvibes, Digg, Meebo, 30 Boxes, Flickr.

Funcionamiento de AJAX : Interacciones síncronas y asíncronas, parte 1

En las aplicaciones web tradicionales, las acciones del usuario en la página (clic en un botón, seleccionar un valor de una lista, etc.) desencadenan llamadas al servidor. Una vez procesada la petición del usuario, el servidor devuelve una nueva página HTML al navegador del usuario.

La técnica tradicional para crear aplicaciones web funciona correctamente, pero no crea una buena sensación al usuario. Al realizar peticiones continuas al servidor, el usuario debe esperar a que se recargue la página con los cambios solicitados. Si la aplicación debe realizar peticiones continuas, su uso se convierte en algo molesto

AJAX permite mejorar completamente la interacción del usuario con la aplicación, evitando las recargas constantes de la página, ya que el intercambio de información con el servidor se produce en un segundo plano.

Las aplicaciones construidas con AJAX eliminan la recarga constante de páginas mediante la creación de un elemento intermedio entre el usuario y el servidor. La nueva capa intermedia de AJAX mejora la respuesta de la aplicación, ya que el usuario nunca se encuentra con una ventana del navegador vacía esperando la respuesta del servidor.

En el siguiente esquema, la imagen de la izquierda muestra el modelo tradicional de las aplicaciones web. La imagen de la derecha muestra el nuevo modelo propuesto por AJAX:

Funcionamiento de AJAX : Tecnologías que lo componen

En el artículo “AJAX: a new aproach to web applications” Garret define a AJAX de la siguiente manera :

“Ajax no es una tecnología en sí mismo. En realidad, se trata de varias tecnologías independientes que se unen de formas nuevas y sorprendentes”.

Las tecnologías que forman AJAX son:

• XHTML y CSS, para crear una presentación basada en estándares.
• DOM, para la interacción y manipulación dinámica de la presentación.
• XML, XSLT y JSON, para el intercambio y la manipulación de información.
• XMLHttpRequest, para el intercambio asíncrono de información.
• JavaScript, para unir todas las demás tecnologías.

Introducción a AJAX : Desventajas

Críticas de usabilidad

Una de las mayores críticas contra el uso de AJAX en aplicaciones web es que puede facilmente acabar con el comportamiento normal del botón atrás del navegador. Las diversas expectativas entre volver a una página que se ha modificado dinámicamente y la vuelta a una página estática pueden ser sutiles. Los usuarios normalmente esperan que haciendo click en atrás mientras están en una aplicación web les llevará a la última página cargada, y en aplicaciones AJAX lo más seguro es que esto no ocurra. Los desarrolladores han implementado varias soluciones a este problema, muchos de los cuales giraron alrededor de crear o usar IFrame invisibles para invocar los cambios que hacen que se genere el historial usado por el botón atrás del navegador. Google Maps, por ejemplo, realiza búsquedas en un IFrame invisible y luego inserta los resultados en la página web visible; es posible seguir el comportamiento del usuario vía callbacks que son llamados cada vez que se pulsa el botón atrás, recuperando el estado de la aplicación que existía en ese momento.

Un problema relacionado es que las actualizaciones dinámicas hacen difícil al usuario agregar a los marcadores/favoritos un momento particular de la aplicación. Existen soluciones a este problema, muchas de las cuales utilizan el fragmento identificador del URL (la parte de una URL precedida del signo ‘#’) para no perderla de vista, y permitir a los usuarios volver a ese momento exacto. Esto es posible porque muchos navegadores permiten al JavaScript actualizar dinámicamente el fragmento identificador del URL, por lo que las aplicaciones Ajax pueden mantenerlo a medida que el usuario va cambiando el estado de la página. Esta solución también mejora el funcionamiento del botón atrás.

Tiempos de respuesta

El intervalo entre la petición del usuario y la respuesta del servidor debe tenerse en cuenta durante el desarrollo de AJAX. Sin el feedback claro al usuario, carga de datos elegante, y dirección apropiada del objeto XMLHttpRequest los usuarios pueden experimentar esperas en la intefaz de la aplicación web, algo que los usuarios pueden no esperar o comprender. Como soluciones a estas esperas, frecuentemente se recomienda el uso de feedback visual para informar al usuario de la actividad en segundo plano y/o precarga de contenido y datos.

En general el impacto potencial de la espera no ha sido “resuelto” por ninguno de los toolkits y frameworks para AJAX de codigo abierto disponibles hoy en día.

JavaScript

Aunque AJAX no necesita ningún tipo de plug-in para el navegador, requiere que los usuarios tengan el JavaScript activado. Esto se aplica a todos los navegadores que soportan esta tecnología excepto para Microsoft Internet Explorer 6 y anteriores los cuales necesitan también tener el ActiveX activado, ya que el objeto XMLHttpRequest está implementado junto con el ActiveX en este navegador. Internet Explorer 7, por otra parte, va a implementar esta interfaz como un objeto JavaScript nativo y por tanto no se va a necesitar ActiveX para que AJAX pueda funcionar con normalidad.

Como ocurre con las aplicaciones DHTML, las de AJAX deben de ser probadas rigurosamente para adaptarse a los diferentes navegadores y plataformas. Han ido apareciendo numerosas librerías de programación a medida que AJAX ha ido madurando que pueden ayudar en esta tarea. Asimismo, se han desarrollado técnicas para asistir en el diseño de aplicaciones que ofrecen funcionalidades alternativas para los usuarios que no tienen el JavaScript activado.

Nombre

Ha habido varias críticas en torno al término AJAX, reclamando que Adaptive Path (el consultorio que creó la palabra) u otros defensores lo usan como un vehículo de marketing para técnicas antes usadas.

Introducción a AJAX : Ventajas

Interactividad

Las aplicaciones AJAX se ejecutan en la máquina cliente, manipulando la página actual dentro de sus navegadores usando métodos de Document Object Model. Puede ser usado para multitud de tareas como actualizar o eliminar registros, expandir formularios web, devolver peticiones simples de búsqueda, o editar árboles de categorías; todo sin tener la necesidad de tener que recargar toda la página de HTML cada vez que se realiza un cambio. Generalmente sólo requiere enviar pequeñas peticiones al servidor, y se devuelven respuestas relativamente cortas. Esto permite el desarrollo de aplicaciones interactivas con más interfaces de usuario más reponsivas gracias al uso de las técnicas DHTML.

Portabilidad

Las aplicaciones de Ajax utilizan características bien documentadas presentes en todos los navegadores importantes en la mayoría de las plataformas existentes. Aunque esta situación podría cambiar en el futuro, en este momento, los usos de Ajax son efectivos entre plataformas.

Mientras que la plataforma de Ajax está más restringida que la plataforma de Java, las aplicaciones actuales de Ajax llenan con eficacia la parte de los Java applets: ampliar el navegador con mini-aplicaciones ligeras.

Introducción a AJAX : Cómo surgió ?

La historia de AJAX está relacionada en gran medida con un objeto de programación llamado XMLHttpRequest. El origen de este objeto se remonta al año 2000, con productos como Exchange 2000, Internet Explorer 5 y Outlook Web Access.

Todo comenzó en 1998, cuando Alex Hopmann y su equipo se encontraban desarrollando la entonces futura versión de Exchange 2000. El punto débil del servidor de correo electrónico era su cliente vía web, llamado OWA (Outlook Web Access).

Durante el desarrollo de OWA, se evaluaron 2 opciones: un cliente formado solo por páginas HTML estáticas que se recargaban cada vez y un cliente realizado completamente con HTML dinámico. Alex Hopmann pudo ver las dos opciones y se decantó por la basada en DHTML. Sin embargo, para ser realmente útil a esta última le faltaba un componente esencial: algo que evitara tener que enviar continuamente los formularios con datos al servidor.

Motivado por las posibilidades futuras de OWA, Alex creó en un solo fin de semana la primera versión de lo que denominó XMLHTTP. La primera demostración de las posibilidades de la nueva tecnología fue un éxito, pero faltaba lo más difícil: incluir esa tecnología en el navegador Internet Explorer.

Si el navegador no incluía XMLHTTP de forma directa, el éxito del OWA se habría reducido enormemente. El mayor problema es que faltaban pocas semanas antes de que se lanzara la última beta de Internet Explorer 5 antes de su lanzamiento final. Gracias a sus contactos en la empresa, Alex consiguió que su tecnología se incluyera en la librería MSXML que incluye Internet Explorer.

Esa es la única razón para el nombre del objeto: XMLHTTP. Aunque solo está relacionado con HTTP y no con XML, tenían que encontrar una buena excusa para justificar su inclusión en la librería XML de Internet Explorer.

En febrero de 2005, Jesse James Garret, de Adaptive Path, publicó un artículo online titulado “Ajax a New Approach to Web Applications”, a través del cual explica sus creencias sobre el acercamiento de la brecha abierta entre la Web y las aplicaciones de escritorio tradicionales.

Desde ese momento, comenzaron a sucederse verdaderas oleadas de artículos sobre Ajax, ejemplos de códigos por toda la red de Internet. Y es desde entonces que muchas empresas han desarrollado y apostado por AJAX, muchas de ellas Bancos y Cajas de Ahorros, Amazon, eBay , Google con sus aplicaciones de Maps, Gmail y Suggest, así como una gran estándar como el CMS WordPress con algunos de sus plugins.

A pesar de la popularidad de AJAX, se ha encontrado con muchos detractores  y controversia, algunos piensan que promociona la creación de presentaciones con JavaScript y se crea una extraña mezcla de técnicas similares a las de los antiguos tiempos de desarrollo de los script en el lado del servidor de Internet, otros aseguran que la carga de datos por vía XML es muy pesada y, como tal, dicha tecnología no es aconsejable utilizarla con mucha cantidad de información a enseñar al usuario y, por último, los que indican que dicha tecnología ya funciona hace tiempo en la red y su creación es una operación de marketing a nivel mundial.

Existen proyectos con dicha tecnología para utilizarla en entornos en los que no se mueve mucha información entre el Cliente y Servidor y no son necesarios gestores de Base de Datos como Oracle, MySql, DB2, Sql…, sino estructuras simples con formato XML, que unen las tecnologías de las  página Web con la tecnología AJAX.

Cada vez está más extendido en las páginas Web, la unión de la tecnología de Google Maps con sus diferentes formatos de mapas (Callejero, Satélite o Hibrido) , con las diferentes localizaciones de grandes corporaciones para posicionar o visitar su propia corporación de empresas, clientes y proveedores. La técnica que utiliza Google Maps (Callejero, Satélite o Híbrido), hacen que AJAX sea una maravilla a nivel tecnológico y visual. El usuario puede disfrutar y navegar por el mapa mundi e incluso localizar la ubicación exacta donde se encuentra el sitio deseado, es intuitivo y tiene toda la ayuda necesaria para que el usuario pueda sentirse seguro al navegar por la página con tecnología AJAX.