El objeto XMLHttpRequest
Una parte central de AJAX radica en un objeto JavaScript incorporado en Navegadores/"Browsers" modernos llamado : XMLHttpRequest. Dicho objeto ya se encuentra establecido como un estándar en los siguientes navegadores : Firefox 1.0+, Internet Explorer 6.0+, Open 8+, Netscape 8+ y Apple Safari 1.2+, lo cual garantiza que aplicaciones diseñadas en AJAX sean funcionales en diversos navegadores.
La tarea de XMLHttpRequest radica en hacer llamadas remotas hacia aplicaciones de servidor. De cierta manera, puede ser considerado una especie de micro-navegador trabajando en el motor interno del propio "Browser", encargado de obtener informacion actualizada y desplegarla en la interfaz principal, sin mayores complicaciones para el usuario que observa el documento original.
XMLHttpRequest se utiliza directamente de código escrito en JavaScript, de una manera muy similar al uso de otros objetos basados en JavaScript, como lo sería DOM vía JavaScript ( Puede observar el uso de DOM vía JavaScript en la siguiente pagina :
Documento XML con DOM utilizado en Navegadores
)
El elemento <div>
Como parte complementaria de XMLHttpRequest -- y también formando parte central de la técnica AJAX -- se encuentra el elemento <div> del estándar HTML/XHTML.
El elemento <div> permite particionar una pagina en diversas secciones independientes una de la otra, para dar el efecto de documentos múltiples dentro de un documento maestro. El requerimiento de emplear elementos <div> en un diseño AJAX, radica en la necesidad de actualizar secciones especificas de un documento mientras otras permanecen estáticas, de no ser por estos elementos, tendría que ser actualizada la interfaz completa de un documento, al no haber un mecanismo para particionar las partes de una pagina.
El uso de <div> para fraccionar el contenido de una aplicación, también tiene sus raíces en otra técnica de diseño : DHTML o HTML Dinámico. ( Puede observar el uso de <div> y DHTML en las siguientes pagina :
Uso de DHTML Básico.
y
Uso de DHTML Avanzado (c/JavaScript).
).
Eventos JavaScript
Finalmente, contemplando tanto los elementos <div> así como el objeto XMLHttpRequest, se encuentran los eventos JavaScript ligados a un navegador. Estos eventos -- presentes en "Browsers" antes de aparecer AJAX -- rigen el momento cuando debe ser invocada la llamada a la aplicación de servidor actualizando la información del documento.
Los eventos JavaScript típicamente empleados en AJAX son onclick y onmousemover que representan las siguientes acciones: al momento que un usuario da un clic sobre el "mouse" y al momento que el apuntador del "mouse" sobrepasa un elemento HTML/XHTML, respectivamente.Lo anterior, no implica que son los únicos eventos que pueden ser utilizados con AJAX, sino simplemente representan los eventos más comunes para actualizar la información de un documento vía AJAX. Puede encontrar una lista completa de estos eventos JavaScript en :
Eventos JavaScript
.
 |
El Proceso
Definición de elementos <div>
Como regla general, el primer paso que debe realizar en un diseño AJAX es : La partición del documento en diversos elementos <div>, esto le permite definir las áreas de su documento que desea actualizar constantemente a través de llamadas AJAX.
Dichos elementos, pueden recibir una serie de parámetros de configuración como lo serían : posiciones relativas y/o absolutas, colores de fondo, tipo de letra, entre otras variantes, describir todas estas características estaría fuera del alcance del tema de AJAX, sin embargo, un parámetro primordial para <div> en AJAX es un valor id, mismo que es empleado para referenciar una sección dentro del código JavaScript.
Definición de aplicaciones de servidor.
El siguiente proceso en el diseño de una aplicación AJAX, recae en la definición de la(s) aplicacion(es) de servidor encargada(s) de generar la información dinámica. En este sentido, no existe ninguna restricción sobre la tecnología o contenido generado por dicha aplicación, debido a que AJAX simplemente hace una llamada vía un URL -- como lo haría un "Browser"/Navegador. La aplicación de servidor puede estar escrita en Java, Visual Basic, C#, PHP, Perl, ya sea accesando una Base de Datos o texto simple, e inclusive puede ser un servicio web ("Web-Service"), el único requerimiento es que se encuentre accesible vía Web.
Ahora bien, antes de tomar la decisión de re-utilizar todas sus aplicaciones de servidor existentes y habilitarlas vía AJAX, tome en cuenta que todas las aplicaciones estándares de servidor están equipadas para retornar sus resultados a un "Browser", esto implica que una llamada a un URL trae consigo, no sólo información de importancia, sino además los elementos típicos de un documento web como: <html>, <body>, <title> y otros más.
En este sentido, tiene que tener cautela que la llamada a la aplicación de servidor (URL) realizada vía AJAX, sólo traiga consigo los datos que serán desplegados en el documento, y no los elementos HTML/XHTML de soporte típicamente generados por una aplicación de servidor, ya que esto puede generar despliegues extraños.
Lo anterior, no implica que la aplicación de servidor no pueda retornar elementos HTML, JavaScript o texto simple -- si lo puede hacer -- pero tome en cuenta que los resultados obtenidos de la llamada AJAX serán desplegados literalmente en el documento, este incluye desde elementos HTML/XHTML que pueden estar mal cerrados en la aplicación hasta errores generados al ser ejecutada dicha aplicación, los cuales puede afectar adversamente el despliegue final.
Por esta razón, es recomendable diseñe su aplicación de servidor exclusivamente para diseños AJAX, y realice pruebas directamente de un Navegador/"Browser" para confirmar el despliegue final, antes de proceder con su integración.
Vincular aplicación de servidor con XMLHttpRequest
Una vez definidas las aplicaciones de servidor que generarán la información a ser utilizada en el documento, es necesario vincular estas aplicaciones con el objeto XMLHttpRequest. La manera más eficiente de realizar este proceso es a través de funciones JavaScript colocadas en su propia librería -- o archivo .js -- declarada en el documento principal.
Al utilizar funciones JavaScript, es posible concentrar la lógica de AJAX/XMLHttpRequest en una manera estructurada y ordenada. Por ejemplo, una función puede contener el siguiente proceso : Llamar la aplicación ubicada en http://www.miservidor.com/aplicaciones/catalogo.php y actualizar el elemento <div id="menu"> con dicha información. Inclusive, dada la flexibilidad de utilizar funciones, es posible utilizar parámetros de entrada para especificar tanto el URL así como el elemento <div> que debe ser regenerado.
Sin embargo, el principal beneficio de utilizar funciones JavaScript es : la capacidad de invocar el proceso de actualización vía AJAX bajo diversas circunstancias, lo cual nos lleva al ultimo paso del proceso de diseño en AJAX : Definir los eventos que activarán el proceso de actualización o regeneración de la interfaz.
Ligar eventos JavaScript a funciones que emplean XMLHttpRequest
Anteriormente, ya se mencionaron algunos eventos JavaScript empleados en AJAX. Dichos eventos, así como otros pertenecientes a JavaScript, representan las acciones realizadas por el usuario a lo largo de su proceso de navegación en un documento. Por ejemplo, un evento puede representar el momento en que un usuario da clic sobre una gráfica, o bien, cuando es seleccionada una opción de una lista en una forma HTML.
En este ultimo paso de diseño AJAX, debe tomar la decisión sobre los eventos JavaScript que activarán el llamado a las funciones definidas previamente. Esto es, las acciones realizadas por el usuario que suscitarán una actualización de interfaz.
Con esto terminamos nuestro proceso de exploración sobre diseño con AJAX. A continuación, exploraremos algunas librerías disponibles para agilizar el proceso de desarrollo con AJAX, así como una aplicación diseñada con una de estas librerías.
Librerías especificas por plataforma para utilizar AJAX.
Como pudo haber notado del proceso de diseño con AJAX, este conlleva en su mayoría trabajar con elementos HTML/XHTML y JavaScript -- con la excepción de las aplicaciones de servidor empleadas para alimentar la información a la pagina principal. Sin embargo, a pesar de esto, en su estado inicial, la pagina principal que recibe un usuario -- que incluye elementos <div> HTML/XHTML, funciones JavaScript utilizando XMLHttpRequest y otros elementos más -- inicia su vida como una aplicación de servidor también.
Debido a esto, varias plataformas -- entre las que figuran J2EE y .NET -- han desarrollado mecanismos para generar estas paginas principales a través de controles y elementos especiales que agilizan la creación de aplicaciones AJAX. Dos de los mecanismos para las tecnologías antes mencionadas son los siguientes :
- ASP.NET : En la versión 2.0 de ASP.NET ha sido incorporada una funcionalidad llamada "Client Callback" (Rellamado de Cliente), aunque en su momento no fue apodado con el termino AJAX, la ejecución de esta técnica tiene como sus bases el conocido objeto
XMLHttpRequest. Puede consultar un articulo extenso sobre esta practica en : ASP.NET 2.0's Client Callback Feature - J2EE/JSP's-JSTL: En el mundo Java, AJAX puede ser empleado a través de JSTL's ("Java Standard Tag Library") -- también conocidos como "Tags" JSP hechos a medida. Dichos componentes, contienen la lógica necesaria para incorporar AJAX a una aplicación Java desarrollada en ambientes Web. Una librería extensa de este tipo puede ser consultada en : AJAX Tags (JSTL)
Aunque estos últimos mecanismos permiten agilizar un desarrollo con AJAX, su uso requiere profundizar forzosamente sobre tecnologías especificas. En el afán de cumplir con las expectativas de cualquier desarrollador -- independientemente de su plataforma de servidor predilecta -- a continuación utilizaremos una librería JavaScript -- implicando plataforma de servidor neutral -- para agilizar la creacion de aplicaciones AJAX : Prototype.