2 - Ejemplo
ARTICULO
De Ajax podemos decir muchas cosas y encontrar muchos ejemplos en la Web que nos actualizan combos o que nos permiten realizar alguna acción sin necesidad de llevar a cabo un refresco de página. Así también podemos encontrar una infinidad de controles de asp.net Ajax que se encuentran libres en la Web, los cuales se pueden descarga y, pueden ser utilizados por los desarrolladores, que en mi opinión, son muy buenos cuando debes utilizarlos para cosas puntuales, pero cuando el cliente se vuelve exquisito, no podemos modificarlos. Por ello, en mi caso, prefiero desarrollarlos. Con esto, obtengo un control que puedo modificar a mi gusto.
Claro está que para realizar estas acciones de desarrollo de controles propios, se debe tener mucho conocimiento de javascript, como vengo mencionando desde el inicio del artículo.
Debo destacar que .Net ha mejorado sustancialmente el desarrollo de aplicaciones Web, esto ha generado que muchos de los desarrolladores de hoy en día, dejen de lado la administración de objetos de html en el cliente con javascript, como es el caso de manejo de estilos, creaciones de capas y refrescos de las mismas. El enriquecimiento de las páginas Web siempre está asociado a un buen desarrollo tanto en el cliente como en el servidor.
Ajax, AjaxPro y la tecnología con la que empiezo este artículo, nos permiten realizar un enriquecimiento en cuanto a tiempos de respuesta en un navegador Web, dando la sensación al usuario de que está trabajando en una aplicación de escritorio.
Cuando desarrollo aplicaciones Web con estas tecnologías, siempre me encuentro con un cliente que me pregunta ¡y el historial! y, a veces me dan ganas de responder, en una aplicación para Windows usted tiene un historial. Bueno, sobre este tema, los amigos de Microsoft me han facilitado una URL que comparto con ustedes en donde se describe un control de asp.net Ajax (No AjaxPro), que apalea este problema.
http://www.asp.net/learn/ajax-videos/video-149.aspx
El control History lo pueden encontrar en ASP.NET Futures
Ustedes se preguntarán por que partí este artículo con XMLHttpRequest y no con Ajax, la respuesta es muy simple, ya que Ajax engloba dentro de su Framework XMLHttpRequest, si bien su nombre lo indica (Asynchronous JavaScript And XML) la parte Asincrónica engloba XMLHttpRequest.
Los navegadores que conozco que permiten el uso de Ajax son:
Navegadores basados en Gecko (Mozilla, Mozilla Firefox, SeaMonkey, Camino, K-Meleon, Flock, Epiphany, Galeon y Netscape versión 7.1 y superiores)
Microsoft Internet Explorer para Windows versión 5.0 y superiores, y los navegadores basados en él.
Navegadores con el API KHTML versión 3.2 y superiores implementado, incluyendo Konqueror versión 3.2 y superiores, Apple Safari versión 1.2 y superiores, y el Web Browser for S60 de Nokia tercera generación y posteriores
Opera versión 8.0 y superiores, incluyendo Opera Mobile Browser versión 8.0 y superiores.
Si bien es cierto, que para las personas que trabajamos con Remote Scripting, Ajax, presenta un comportamiento de transferencia de datos desde una solicitud de cliente a un servidor y vise versa muy similar, pero con Ajax, se han mejorado la forma de transferir la información y, las entregas de esta, ya que se realizan a través de XML, en donde el resultado es un Html que es desplegado en la zona requerida o un resultado de filas con columnas, como generalmente se observa en los tutoriales de Ajax.
Buena, las ventajas de trabajar con Ajax son similares a las que describo para al trabajar con método asíncrono, aunque la transmisión de información está limitada, así como el tiempo de espera, aunque en la llamada al Namespace de Ajax desde javascript permita aumentar el tiempo.
Desventajas.
El manejo del Historial, ya que no queda registrado en todos los navegadores descritos, aunque los amigos de asp.net Ajax se la han currado y han creado un objeto que apalea el problema, no puedo asegurar de que funcione en todos los navegadores.
Solución
Utilizar el control descrito para los navegadores que lo soporten y tratar de modificar el hash en los otros navegadores, aunque creo que los amigos de asp.net Ajax tienen bastante controlado el problema.
En el ejemplo que plantearemos trataremos de realizar la misma acción que definimos anteriormente, con la diferencia de que ahora estaremos trabajando con otro tipo de funciones definidas en javascript, y todo se realizará en la misma página, para ello ahora trabajaremos con una sola página y, en este caso retornaremos el texto sin escribir una página Web, aunque mi consejo, para este tipo de tecnología, es utilizar Ajax con Xslt y Xml, con lo cual se obtendrá muy buenos resultados.
Como prerrequisito necesitamos descargarnos la dll de Ajax, luego debemos incluirlas en nuestro proyecto y agregar una referencia a esta.
Como siguiente paso antes de realizar el ejercicio debemos tener configurados los parámetros de uso en el web.config, en donde en el nodo
<httpHandlers>
<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
</httpHandlers>
Ahora si podemos empezar a configurar nuestra aplicación para realizar las solicitudes que desplegarán la información deseada. Para ello, en el archivo .aspx.vb que hemos creado, debemos agregar dentro del método que atiende el eventos load, las siguientes líneas de código Ajax.Utility.RegisterTypeForAjax(GetType(_Default))
Donde _Default, corresponde al nombre de la clase que está asociada a la página Web
Quedando de la siguiente forma:
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Ajax.Utility.RegisterTypeForAjax(GetType(_Default))
End SubEnd Class
Si desean, pueden cambiar el nombre de la clase, para identificar las llamadas que se hagan desde javascript, pero deben recordar actualizar el nombre en la sociación de la directiva Page en la página .aspx, que se encuentra en la primera linea del html.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
Yo cambiaré el nombre de la clase a AjaxEjemplo.
A continuación crearé el método que retornará la información según el parámetro entregado, este método puede tener diversos tipos String, XMLDocument, estructura de clases, etc.
Se debe considerar que si se devuelve una estructura de clase el innerHTML que captura la función de resultado tendrá un value y luego el dato, es decir innerHTML.value.dato, en donde el dato es uno de los parámetros de la clase. Adicionalmente se debe considerar que la clase debe ser definida como Serializada.
En este caso definiremos las funciones como String, ya que estamos retornando un resultado HTML, en el caso de que estemos trabajando con XSLT y XML.
Adicionalmente, agregaremos en el método una opción que retorne un error, para que se observe el efecto de error que también puede ser manejado en el cliente, quedando la función de la siguiente forma:
<Ajax.AjaxMethod()> _
Public Function funOpcionRescatar(ByVal opc As String) As String
Dim strReturn As String = ""
Try
If opc.Trim <> "" Then
Select Case opc
Case "1" : strReturn = "Ha seleccionado la opcion 1"
Case "2" : strReturn = "Ha seleccionado la opcion 2"
Case "3" : Throw New Exception("No existe la opcion 3")
End Select
End If
Catch ex As Exception
Throw ex
End Try
Return strReturn
End Function
Ahora definiremos las dos funciones en javascript que permitirán realizar la solicitud de datos y la captura de información, para ello crearemos un script con las siguientes líneas de código:
function funLlamadaAjax(opc){
AjaxEjemplo.funOpcionRescatar(opc, funLlamadaAjax_CallBack);
}
function funLlamadaAjax_CallBack(res){
if (res.error){
alert(res.error);
}else{
document.getElementById("divContenido").innerHTML = res.value;
}
}
Nótese, que en la primera función realizamos una llamada al método de Ajax que se ha creado en el servidor y, que le pasamos el nombre de la función que capturará los resultados.
La función que captura los resultados verifica que no existan errores, en el caso de que exista salta una excepción en el cliente, sino, se realiza el despliegue del resultado.
Es aquí en donde podríamos, a través de javascript actualizar la información de las zonas o capas que estamos utilizando, ya que si estoy retornando un esquema de clase serializada, existirán tantos datos como los que se hayan definido en el cuerpo de la clase. Así mismo podríamos retornar un array de datos, como por ejemplo un resultado de datatable o en el mejor de los casos retornar un resultado de una página que ya se ha ejecutado en el servidor como es el caso de trabajar con XSLT y XML.
Lo que nos queda es definir el cuerpo del HTML el cual quedará de la siguiente forma:
<body>
<div>
<a href="javascript:funLlamadaAjax(1);">Primera opción</a>
<a href="javascript:funLlamadaAjax(2);">Primera opción</a>
<a href="javascript:funLlamadaAjax(3);">Tercera opción</a>
</div>
<div id="divContenido">
</div>
</body>
Ejecuten la aplicación y podrán observar el comportamiento funcional de las solicitudes en Ajax.
Espero que este pequeño artículo les sirva de ayuda en la toma de decisiones para definir que utilizar.
No se si sea pronto o no, pero en el próximo artículo que escriba hablaremos de AJAXPro, que en su versión para Visual Studio es muy interesante. Sobretodo para las personas a las que nos gusta trabajar con controles personalizados, no digo que sea mejor o peor que lo antes planteado, solo digo que es una opción más que amplía nuestras perspectiva al momento de desarrollar aplicaciones.
