Ajax es una técnica de programación donde se explotan tecnologías ya existentes como Javascript y XML, para mejorar considerablemente la interacción entre un usuario y una página Web. Esto se logra mediante la transmisión y recepción de información (postback) desde el cliente al servidor en segundo plano, evitando los molestos pantallazos que implica el envío de datos, la admisión de los mismos y la regeneración de la página Web por parte del browser. El uso adecuado de este modelo trae como consecuencia un aumento considerable de la usabilidad, velocidad y tiempo de respuesta de un sitio Web.
Antecedentes
Aunque parezca increíble, la capacidad real de utilizar estas técnicas ha estado entre nosotros desde 1999, cuando Microsoft lanzó la versión 5 de Internet Explorer, y con él un objeto llamado XMLHttpRequest ideado originalmente para optimizar la interfaz de usuario del acceso Web de Outlook (OWA) . Este objeto se encarga de establecer un canal de comunicación independiente del browser para enviar y recibir datos, y así evitar que el usuario se percate de lo que está sucediendo tras bambalinas. Ya que la información está siendo procesada en background.
Dado que este objeto es programable en Javascript, es posible escribir scripts que interactúen con el DOM de la página y de esta manera lograr páginas muy interactivas. Debido a su popularidad y su uso masivo, el World Wide Web Consortium (W3C) ha definido ya una especificación estándar para dicho objeto, y por lo tanto, ya lo implementan distintos navegadores como Firefox, Safari y Opera.
Implementación básica
Uno de los principales atractivos de Ajax, es que al usar tecnologías que ya se encuentran implementadas en los browsers actuales, no es necesario instalar nada para comenzar a usarlo.
En el siguiente ejemplo definimos una implementación básica en la cual buscamos que al momento de seleccionar un destino en el Panel 1, se actualice la información en el Panel 2, sin redibujar de nuevo la página.
Para lograr nuestro cometido, debemos de escribir un script como el siguiente:
var objxmlHttp=null;
// Devuelve una instancia correcta del objeto XMLHTTPRequest de acuerdo al browser usado.
function ObtenerObjetoxmlHttp()
{
try // Instancia para navegadores no Microsoft
{objxmlHttp=new XMLHttpRequest();}
catch (e) // Instancias para navegadores Microsoft
{ try
{ objxmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);}
catch (e)
{ objxmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);}
}
return objxmlHttp;
}
// Envía la forma y los datos seleccionados en el control <select>
function EnviarForma() {
objxmlHttp=ObtenerObjetoxmlHttp();
objxmlHttp.open(“POST”,”Servidor.aspx”, true, “”, “”);
objxmlHttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded;
charset=windows-1255”);
objxmlHttp.onreadystatechange=MostrarRespuesta;
objxmlHttp.send(“selLugares=”+document.getElementById(“selLugares”).selectedIndex);
}
// Procesa la respuesta del servidor y la muestra en el <div> del Panel 2
function MostrarRespuesta() {
if (objxmlHttp.readyState==4)
document.getElementById(“divDescripcion”).innerHTML=objxmlHttp.responseText;
}
</script>
Listado 1. Implementación de Ajax sin framework
Implementar un código como el anterior no representa mayores problemas cuando se trata de un ejemplo sencillo como el descrito. Sin embargo, conforme la interfaz de usuario tenga mayor complejidad, el código para implementarla se incrementará exponencialmente, haciéndolo difícil de crear y mantener.
Ante este panorama, muchos fabricantes y grupos han tratado de facilitar la vida a los desarrolladores mediante la creación de marcos de trabajo que hacen más rápido y sencillo el uso de Ajax. Entre las principales ventajas de utilizar frameworks están:
> Simplificación y reducción de la cantidad de código requerida.
> Estandarización del modelo de codificación.
> Integración con el modelo de programación de la tecnología del lado de servidor.
> Aumento de la productividad en el desarrollo.
Podemos dividir los frameworks de Ajax en las siguientes dos categorías:
> Frameworks de cliente: básicamente scripts de Javascript preescritos y listos para usarse con sólo insertarlos directamente en nuestra página Web.
> Frameworks de servidor: son librerías implementadas del lado del servidor, que ayudan a una integración browser/server. Estos frameworks suelen generar dinámicamente el Javascript requerido para Ajax de acuerdo al modelo de programación, por ejemplo: ASP.NET o Java Servlets / JSP’s.
A continuación presento algunos de los frameworks más usados actualmente en la red.
Frameworks de cliente
Prototype: es un framework muy sencillo de entender, y bastante popular. Para usarlo sólo es necesario incluir el archivo prototype.js y con esto estamos listos para poder utilizar los objetos que incluye la librería. El listado dos muestra el código que necesitaríamos para lograr el mismo objetivo que en el listado uno, pero usando Prototype.
<script language=”javascript” src=”prototype.js”></script>
<script language=”javascript”>
function EnviarForma(){
new Ajax.Request(‘Servidor.aspx’, {
method: ‘post’,
parameters: {selLugares:document.getElementById(“selLugares”).selectedIndex} ,
onSuccess:
function(strRespuesta){
document.getElementById(“divDescripcion”).innerHTML=strRespuesta.responseText;
}
});
}
</script>
Listado 2. Implementación con Prototype
Es evidente que el código anterior es mucho más limpio y sencillo que la implementación original. Sólo hacemos uso del método Request del objeto Ajax incluido en Prototype, y le pasamos como parámetros los detalles de nuestra petición. Podemos ver que Prototype ha manejado automáticamente la detección del browser, la suscripción del objeto y la interpretación de la respuesta.
Cabe señalar que Prototype no sólo incluye funcionalidad para Ajax, sino que también incluye funciones para manejo y optimización de arreglos, cadenas, objetos etc. Incluye métodos taquigráficos para hacer el código más legible, extiende el DOM, soporta JSON, y muchas otras características. Prototype tiene un compañero ideal llamado script.aculo.us que es otro script que extiende aun más la interactividad de las páginas mediante funciones de drag and drop, animaciones etc. y toma como base Prototype
The Dojo Toolkit: se basa en los mismos principios que Prototype, incluir un script del lado del cliente (en este caso dojo.js) para aumentar la funcionalidad de Javascript. Sin embargo, Dojo va más allá e introduce todo un conjunto de características como gráficos de vectores, un sistema de eventos muy completo, la capacidad de crear widgets (componentes basados en HTML + Javascript) y por supuesto, soporta Ajax. La desventaja de Dojo es que se ha vuelto sumamente complejo debido a su gran cantidad de funciones y su escasa documentación. No obstante, empresas como Sun e IBM están apoyando este proyecto, por lo que en un futuro cercano podríamos ver un mejor soporte.
Frameworks de servidor
Microsoft ASP.NET AJAX: la implementación que sugiere Microsft, obviamente gira en torno a su tecnología ASP.NET. Y nos ofrece una solución completamente integrada al .NET Framework 2.0, expuesta a través de controles de lado del servidor del ASP.NET. Quizá su principal beneficio es que todo se puede hacer visualmente sin necesidad de escribir una sola línea de código en Javascript; de tal forma que si ya usas ASP.NET, sólo debes instalar las extensiones de Ajax, arrastrar a tu página los controles adecuados y obtienes “Ajax instantáneo”; el .NET Framework se encarga de hacer “el trabajo sucio” por ti. La idea es muy simple: diseñas y programas tu página ASP.NET como de costumbre, y para agregar funcionalidad de Ajax realizas los siguientes pasos:
> Arrastras desde el toolbox de Visual Studio un control del tipo ScriptManager.
> Arrastras otro objeto llamado UpdatePanel y colocas dentro de él todo lo que quieres que sea mostrado asíncronamente, como por ejemplo: etiquetas, tablas de datos, cajas de texto, imágenes, y en general todo lo necesario.
> Defines los eventos que dispararán la comunicación en background y… ¡listo!
El listado tres muestra el código generado para lograr la funcionalidad que queremos con ASP.NET 2.0.
<asp:ScriptManager ID=”manEjemplo” runat=”server”/>
<asp:UpdatePanel ID=”upnContenedor” runat=”server”>
<ContentTemplate>
<asp:Label ID=”lblDescripcion” runat=”server”
Text=”Seleccione un destino y se le mostrara su descripcion” />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID=”drpDestinos” EventName=”SelectedIndexChanged”/>
</Triggers>
</asp:UpdatePanel>
Como podrán apreciar en este código, se declara el control ScriptManager (manEjemplo), y posteriormente el UpdatePanel que adentro tiene una etiqueta que será actualizada en forma asíncrona con Ajax. Al momento de visualizar la página, ASP.NET creará dinámicamente todo el Javascript requerido.
Con ASP.NET, además de obtener la funcionalidad de Ajax a través de Codeplex, también podemos obtener un conjunto de controles llamados Ajax Control Toolkit, que automatizan e imprimen mucha interactividad a nuestros sitios Web, como validadores, controles slide, controles acordeón, calendarios, búsquedas, tabs etcétera.
DWR: es el acrónimo de Direct Web Remoting, y es una librería Ajax para Java EE, que se instala en el servidor de aplicaciones (mediante un archivo .war) y su principal ventaja es que permite a los browsers utilizar métodos de Java ubicados en el servidor como si estuvieran realmente en el browser. Esto se logra mediante un servlet que procesa las peticiones de los browsers y envía las respuestas a los mismos; y código de Javascript generado dinámicamente encargado de procesar las respuestas del servidor. De esta manera, el uso de DWR se convierte en una gran alternativa para minimizar los costos y el tiempo de implementación de Ajax para los programadores en Java.
Google Web Toolkit (GWT): es un framework que proporciona el soporte a Ajax mediante la utilización de Java. Con GWT, el desarrollador escribe su página en Java (integrando las clases del GWT), y el compilador de la herramienta se encarga de generar el HTML y el Javascript correspondiente. El modelo de programación es muy parecido a Swing, y actualmente ya existen varios IDEs que proveen integración con GWT para facilitar el desarrollo. Entre los que están IntelliJ IDEA, Eclipse (a través del plugin Cypal Studio), y NetBeans (a través del plugin gwt4nb).
Conclusión
Los frameworks de Ajax facilitan y aceleran el desarrollo de las aplicaciones antes mencionadas. La elección del framework específico depende de tus necesidades y restricciones:
Para quienes desean implementar Ajax a través de scripting en el cliente, Prototype y Dojo son muy buenas opciones, que además de la funcionalidad básica de Ajax, proveen capacidades para extender las estructuras base de Javascript y del DOM, con la ventaja agregada de su independencia de la plataforma en el servidor.
Para los que desarrollamos en ASP.NET, sin lugar a dudas la opción natural es Microsoft ASP.NET AJAX debido a su completa integración con el modelo de controles de servidor de ASP.NET; la ayuda del IDE donde ni siquiera es necesario implementar una sola línea de código de Javascript, y el montón de controles incluidos en el Control Toolkit que harán a nuestros sitios verse espectaculares. Los programadores de Java tienen las opciones de DWR y Google Web Toolkit, entre las más conocidas.
Con esto, he presentado tecnologías representativas (por cierto, todas gratuitas), que a pesar de ser muy distintas entre sí, todas ellas facilitan y aceleran el desarrollo de aplicaciones con Ajax. Como podrán apreciar, gracias a estas herramientas puede ser muy sencillo implementar Ajax en nuestros sitios Web. Los invito cordialmente a programar sitios fantásticos sumergiéndose de lleno en Ajax.
El código fuente completo de los listados de este artículo se encuentra disponible en www.developersdotnet.com <<
Referencias
• www.prototypejs.org
• dojotoolkit.org
• script.aculo.us
• ajax.asp.net
• getahead.org/dwr
• code.google.com/webtoolkit
Acerca del autor
Miguel Ángel Morán Bolaños es Microsoft Most Valuable Professional (MVP) en C# y Microsoft Certified Trainer (MCT). Es Licenciado en Informática por la UNITEC y cuenta con 10 años de experiencia desarrollando profesionalmente. Actualmente colabora en Intersoftware como Consultor en TI. Mantiene, junto a un grupo de colegas, la comunidad DevelopersDotNet donde frecuentemente escribe y organiza eventos sobre tecnología. mmoran@developersdotnet.com
- Log in to post comments