[AJAX]Tecnología AJAX

Luego del boom de los .com, la web entró en una meseta hasta el año 2005 donde renació con lo que hoy es conocido como Web 2.0. Este resurgimiento ha sido fomentado, entre otras cosas, por cambio en el paradigma en la forma en que se publican los datos, la mejora en las telecomunicaciones y las nuevas tecnologías como AJAX que fomentaron a que el nuevo modelo de web sea mas interactivo y le permita al usuario tener una experiencia mas rica y mas interactiva con los contenidos a los cuales está accediendo.

Hoy ya no son los editores de contenidos quienes publican la información y el resto de la comunidad es un mero espectador, sino que es la comunidad misma la que crea, participa y juzga el contenido de los portales. Pero estas nuevas activadas, que ahora realiza la comunidad, deben ir acompañadas por mejoras tecnológicas que permitan, a gente que no es experta en sistemas informáticos, realizarlas de una manera sencilla, simple, dinámica y productiva.

Las tecnologías AJAX están presentes en las interfaces gráficas de GMAIL, MySpace, Knowii, Meebo, entre otras.

AJAX es el acrónimo de Asynchronous Javascript and XML y es una técnica de programación donde se combinan y se explotan tecnologías ya existentes como JavaScript y XML, para lograr enviar y recibir mensajes en segundo plano sin que el usuario note que la pagina web que navegando esta procesando algunas tareas, es decir sin que se realicen postbacks. El uso adecuado de AJAX trae como consecuencia un aumento considerable de la usabilidad, productividad, velocidad y tiempo de respuesta de un sitio web.

AJAX ASP.NET Framework

Uno de los frameworks de AJAX mas usados es AJAX ASP.NET, que será el usado en este artículo a modo de ejemplificación para mostrar algunas de las tareas que podemos realizar con esta tecnología.

Este framework permite implementar AJAX en sitios ASP.NET mediante el uso de controles de servidor. Siguiendo con la forma de trabajo de ASP.NET, los desarrolladores programan sus aplicaciones de la manera convencional y cuando desean usar una funcionalidad AJAX solo debe agregar unos de los controles que las extensiones AJAX ASP.NET proveen y el framework se encarga de realizar la generación del Javascript correspondiente para realizar los procesos en segundo plano.
También existe la posibilidad de usar este framework mas a fondo, optimizando el rendimiento, programando ciertas tareas desde Javascript combinando con Servicios Web para evitar el procesado completo del ciclo de vida de una pagina ASP.NET.

Es un framework muy potente, que si integra perfectamente con Visual Studio y ASP.NET 2.0, y también cuenta con un AjaxControlToolkit, que es un conjunto de controles que permiten llevar la interactividad al máximo.

Utilizando AJAX ASP.NET Framework en un caso real

Utilizando este framework es muy interesante, entre otras cosas, obtener datos de un servicio web asíncronamente y devolver el resultado del mismo sin hacer un postback de la página, optimizando el rendimiento y llevando el uso del framework a su máximo poder.

Supongamos que tenemos un conjunto de web services que resuelven nuestra lógica de negocios, se encargan de interactuar con la base de datos, resolver las reglas de negocio, etc. Solo queda por hacer un front-end que obtenga los datos que se desean presentar desde el servicio web.

El webservice que usaremos de ejemplo recibe por parámetro, por ejemplo, un nombre, y devuelve "Hola + parámetro".
Por lo que nuestro cliente del webservice tiene un textbox donde ingresar el nombre, un botón para solicitar la respuesta del webservice y un label donde se mostrara la respuesta. La idea es evitar el postback al presionar el botón y mostrar el resultado en el label asíncronamente sin refrescar la página completa.

Podríamos consumir el webservice sin hacer uso de AJAX, simplemente, creando una webreference en nuestro proyecto del cliente y en el evento Click del botón hacer la llamada al webservice y setear el resultado en el label, pero esto nos implicaría un full postback de la pagina.

La solución para implementar AJAX en una llamada a un webservice es hacer uso del ASP.NET AJAX Framework, combinado con JavaScript del lado del cliente para hacer la llamada al webservice y para la actualización del label con el resultado.
Analicemos esta solución paso por paso.

Lo primero que debemos hacer es indicarle al webservice como debe responder a una llamada JavaScript. Para esto debemos primero modificar el web.config de nuestro proyecto que tiene el webservice agregándole algunas configuraciones.

<?xml version="1.0"?>

  </sectionGroup>

</configSections>

<system.web>

<pages>

</controls>

</pages>

</assemblies>

</compilation>

</httpHandlers>

</httpModules>

</system.web>

<system.webServer>

</modules>

</handlers>

</system.webServer>

</configuration>

Este seria el web.config completo que deberíamos tener. Con este web.config nuestro webservices seguirán funcionando si los invocamos con SOAP pero también podrán ser invocados desde JavaScript.

El siguiente paso de decorar el webservice agregando lo siguiente:

[System.Web.Script.Services.ScriptService()]

El código completo del webservice nos debería haber quedado de la siguiente forma:

using System;

using System.Web;

using System.Collections;

using System.Web.Services;

using System.Web.Services.Protocols;

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.Web.Script.Services.ScriptService()]

public class SimpleService : System.Web.Services.WebService {

public SimpleService (){}

[WebMethod]

public string SayHello(String inStr) {

return "Hello : " + inStr + "; Thanks for visiting.";

}

Hasta este momento hemos preparado todos nuestros componentes del lado del servidor para que sean capaces de responder la llamada JavaScript que se le hará al webservice, en otras palabras, tenemos un AJAX-Enabled WebService.

Ahora debemos crear un cliente para probar este AJAX-Enabled WebService. Recordemos que no necesitamos crear una webreference.
Lo primero que debemos hacer es agregar un ScriptManager a la pagina .aspx.
El ScriptManager es un componente que forma parte de las extensiones que se agregan a ASP.NET 2.0 para crear aplicaciones AJAX.
El ScriptManager es el encargado de enviar dinámicamente el código JavaScript que el cliente necesita para realizar todas las funcionalidad que nos permite hacer el AJAX ASP.NET Framework.
El conjunto completo de componentes que tenemos disponibles cuando agregamos el ASP.NET AJAX Framework son ScriptManager, ScriptManagerProxy, Timer, UpdatePanel y UpdateProgress.

Necesitamos agregar controles, pero no vamos a utilizar controles del servidor, no son necesarios, utilizaremos controles HTML puros.
Nuestra página .aspx debería tener esta estructura:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<title>Untitled Page</title>

</head>

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

</div>

</form>

</body>

</html>

Debemos indicarle al ScriptManager cual es el path al webservice, por lo que agregaremos el webservice a la colección de webservices del ScriptManager de la siguiente forma:

<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>

<asp:ServiceReference Path="SimpleService.asmx" />

</Services>

</asp:ScriptManager>

Ahora hemos indicado al ScriptManager que el código va a llamar a un webservice vía JavaScript, entonces el ScriptManager le solicita al servidor que le envié el código JavaScript necesario para conectarse al webservice, esto nos ahorra escribir todo el código JavaScript necesario para conectarnos a un webservices, como por ejemplo, crear a mano un objeto XmlHttpRequest y demás.

Ahora crearemos una función en JavaScript que será ejecutada en el evento onclick del botón que agregamos a nuestra pagina HTML. La llamada al webservice no se hace directamente llamando al método sino que se hace a través de un proxy. También queremos hacer esta llamada asíncrona para no tener que detener la ejecución de la aplicación hasta que el webservice nos devuelva la información que le solicitamos.
Debemos agregar código JavaScript a nuestra pagina .aspx de la siguiente forma:

<!--

function Button1_onclick() {

ret = SimpleService.SayHello(document.getElementById('Text1').value, OnComplete, OnTimeOut, OnError);

return(true);

}

function OnComplete(args) {

document.getElementById('Text2').innerText = args;

}

function OnTimeOut(args) {

alert("Service call timed out.");

}

function OnError(args) {

alert("Error calling service method.");

}

// -->

</script>

Recordemos que no estamos llamando al método SayHello directamente sino que lo hacemos a través de un proxy que recibe algunos otros parámetros más que el string que recibe el método SayHello.
El primer parámetro es el del método SayHello, por lo cual le pasamos el contenido de la caja de texto.
El segundo parámetro es el nombre de la función JavaScript que será llamada cuando el webservice nos devuelva exitosamente la información que le solicitamos de manera asíncrona.
El tercer parámetro es el nombre de la función JavaScript que será llamada en el caso que el webservice no responda.
El cuarto parámetro es el nombre de la función JavaScript que será llamada en el caso que se produzca un error, esto significa que el webservice atendió mi petición pero no puedo responder debido a un error.

En la función OnComplete, parseamos la respuesta del webservice en nuestro caso, solamente asignamos el texto que nos envió el webservice al label donde queremos mostrar la respuesta en la página.

Por ultimo debemos agregar que función debe llamarse al ejecutarse el evento onclick del botón.

En este momento tendríamos el cliente que va a consumir el webservice listo.

Conclusiones

Muchas son las ventajas de utilizar este framework pero las más importantes son: implementar aplicaciones AJAX altamente performantes, reutilizar los webservice que ya tenemos creados y crear fácilmente aplicaciones ricas para el usuario mejorando la productividad y la performance.