Un poco de A.J.A.X

El siguiente artículo es para mostrar una de las tantas formas de trabajar con JavaScript e islas de datos XML de forma asincrona.
 

Siempre que aparece algo nuevo, un lenguaje nuevo, una nueva forma de desarrollar código, o un concepto nuevo, me pregunto si es realmente nuevo, o es algo que ya existe pero que solo se le están mejorando algunos aspectos.

 

Basándome en esta pregunta, si la respuesta es afirmativa, proceso a investigar sobre la fuente, el origen de este nuevo planteamiento; de esta forma me aseguro que, por un lado, me resultará mas fácil aprender su nueva versión, y por otro, me dará un conocimiento general del funcionamiento a “bajo nivel” lo que recae en poder solucionar de una forma analítica, problemas que no se pueden resolver de buenas a primeras con la nueva tecnología.

 

Todo esto nos acerca al tema, A.J.A.X., que en sus siglas en ingles significa: Asynchronous JavaScript Technology and XML, que sin mucho trámite podes entenderlo como: Usar JavaScript para acceder a datos XML de forma asíncrona.

En definitiva, ir y volver al servidor (Postback) con datos, sin tener la necesidad de recargar toda la página.

 

Ventajas

 

La pregunta obligada es ¿Por qué debo implementar este concepto en mis páginas Web? La respuesta: Por las mejoras notables que obtendremos dentro de nuestro producto final.

 

Supongo que esta pregunta se la pudo haber realizado en algún momento un desarrollador de sitios webs, cuando le dijeron que desde ese momento podía hacer aplicaciones web, las cuales comprendían un mundo de posibilidades comparado con un simple grupo de páginas HTML.

 

Estas mejoras, específicamente, van para el usuario final. Imaginemos que hemos creado un sitio web donde queremos mostrar, entre otras cosas, una pequeña ventana donde se desplieguen los titulares de las noticias más relevantes del medio. A su vez, estos titulares requieren que se actualicen cada una cantidad de minutos dados. Actualmente, para poder actualizar estos datos requeriríamos hacer un “postback” y recargar toda la página web lo que representa que el usuario deberá esperar unos instantes hasta que esta acción se dé para, así, poder seguir con sus actividades. Puede resultar verdaderamente desastroso para el éxito de nuestro sitio web si esto llegara a suceder.

 

A.J.A.X soluciona este tipo de problemas, que, como comentamos al principio, podemos ir y volver al servidor, con datos, sin que la página tenga que ser completamente recargada.

 

Lo malo

 

Todo tiene una contraparte, algo que equilibra la balanza. En este caso, es necesario decir que la implementación de esta tecnología requiere conocimientos avanzados de desarrollo web. Posiblemente con ATLAS (Proyecto creado por Microsoft para la utilización de A.J.A.X. en .Net), este defecto se vea aminorado, aunque no deje de representar un desafío, pero atractivo, implementar esta tecnología.

 

Las cartas sobre la mesa

 

Entonces, para poder crear nuestra propia rutina de A.J.A.X., pero desde sus raíces, necesitamos conocer un poco de JavaScript, otro poco de XML, y algo de HTML, en resumen, todo lo que compone una página web.

 

Nuestro primer paso, es crear una referencia a nuestra isla de datos, esto es, de donde obtendremos los datos para mostrarlos en nuestra página web.

 

<xml id=”IslaDeDatos” src=”MiIslaDeDatos.xml”></xml>

 

Esta declaración debemos hacerla en nuestra página, dentro del código HTML. El resultado de esta declaración, es, como veremos más adelante, la creación de un objeto similar a un recordset, el cual podrá ser navegado para obtener la información que en él se encuentra.

 

Este archivo puede ser del tipo:

 

<?xml version=”1.0” encoding=”utf-8” ?>

<Data>

            <Datos>

                        <ID></ID>

                        <Valor></Valor>

                       

            </Datos>

</Data>

 

La segunda etapa es crear un contenedor para nuestra información. En este caso, un contenedor ideal, por las ventajas que nos ofrece, es el control Panel de .Net o su equivalente en HTML, el tag <DIV>. En cualquier caso, lo que queremos es tener un lugar donde escribir nuestros datos al usuario.

 

<Div id=”MiContenedor” style=”width:200px; height:200px; overflow-x: hidden; overflow-y: scroll”></div>

 

Es necesario que comentemos un poco la estructura de este objeto. En primer lugar, adicionamos la propiedad ID, para que posteriormente, desde JavaScript, podamos manejarlo como un objeto, además, se colocan algunos estilos para darle formato a este contenedor, el cual tendrá 200 píxeles de largo por 200 de ancho, y se mostrará una barra de desplazamiento en el eje Y, por si los datos mostrados exceden el alto del contenedor.

 

Finalmente, solo necesitamos un poco de código JavaScript para recorrer nuestra fuente de datos y escribir esta información en el contenedor.

 

<script language=javascript>

            function CargarDatos()

            {

                        var _strOutput;

                        while(!IslaDeDatos.recordset.eof)

                        {

                        _strOutput = _strOutput + IslaDeDatos.recordset(‘Valor’) + “<br>”;

                        IslaDeDatos.recordset.movenext();

}

document.getElementById(‘MiContenedor’).innetHTML = _strOutput;

            }

</script>

 

Al igual que como con un simple recordset, solo debemos recorrerlo hasta que este al final del archivo. Mientras el bucle se lleva a cabo, formamos código HTML, para finalmente, escribirlo dentro de nuestro contenedor.

 

Cabe destacar que al código HTML generado, podemos adicionarle tantas propiedades como queramos, desde eventos onClick, hasta formar estructuras complejas como tablas HTML, botones, etc.

 

Finalmente, deberemos adicionar un botón a nuestro sitio web, el cual disparará la función JavaScript que carga los datos en el contenedor.

 

<input type=”button” onClick=”CargarDatos()” value=”Cargar”>

 

Un paso más allá

 

Hasta el momento, hemos creado algo, que aunque el cargado de datos es dinámico, la fuente de datos es completamente estática.

 

Entonces ¿Cómo podemos hacerlo totalmente dinámico? Muy fácil. Nuestra fuente de datos simplemente deberá apuntar a un objetivo que permita modificaciones dinámicas. Y por supuesto, que mejor fuente que una pagina web en ASP.net.

 

Entonces, si modificamos un poco nuestra fuente de datos, obtendríamos:

 

<xml id=”IslaDeDatos” src=”GeneradorXML.aspx”></xml>

 

En este caso, la isla de datos es una página web, entonces esta debe retornar un archivo XML el cual será leído por nuestro código JavaScript.

 

Un ejemplo simple de esta página sería:

 

Private Sub Page_Load(ByVal sender as System.Object, ByVal e as System.EventArgs) Handles MyBase.Load

 

            Dim _DataSet As New DataSet

            _DataSet.ReadXml(Server.MapPath(“MiIslaDeDatos.xml”))

            Response.ContentType = “Application/XML”

            Response.Write(“<?xml version=””1.0”” encoding=””utf-8”” ?>” & vbCrLf & _DataSet.GetXml)

 

End Sub

 

Indudablemente, en el ejemplo, nuestro objeto DataSet toma la información de una hoja XML estática, la misma que usamos al principio del ejemplo, pero con un poco de imaginación, podríamos generar nuestro XML desde una base de datos u otro medio.

 

También es posible enviar parámetros a la página web que genera la información para así, obtener valores modificados y personalizados.

 

Esta técnica la podemos implementar por medio de parámetros enviados en la ruta de navegación de la forma: GeneradorXML.aspx?Variable=Valor

 

Con esto solo nos queda crear una nueva llamada para nuestra isla de datos, para que los resultados sean actualizados.

 

<script language=javascript>

            function CargarDatos(strValor)

            {

                        var _strOutput;

                        IslaDeDatos.async = false;

                        IslaDeDatos.src = “GeneradorXML.aspx?Variable=” + strValor;

                        while(!IslaDeDatos.recordset.eof)

                        {

                        _strOutput = _strOutput + IslaDeDatos.recordset(‘Valor’) + “<br>”;

                        IslaDeDatos.recordset.movenext();

}

document.getElementById(‘MiContenedor’).innetHTML = _strOutput;

            }

</script>

 

Para esta acción, modificamos un poco la función JavaScript, agregándole dos líneas  fundamentales, en la primera, cambiando la propiedad ASYNC a falso, para que el cargado sea, en oposición, síncrona, garantizando de esta forma que la isla de datos este completamente cargada antes de comenzar con el bucle y evitar errores. La segunda línea es la que cambia la dirección del objeto que contiene nuestra isla de datos para pasarle nuevos parámetros.

 

En resumen

 

Como hemos podido ver la implementación de A.J.A.X. sin el uso de componentes adicionales no resulta tan complicado, simplemente necesitamos conocer las bases y un poco de imaginación para implementar el código que necesitemos para los casos específicos.



Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s