Introducción al AJAX con Mootools 1.2.1

Introducción.

De vuelta a Mootools, fue el primero de los frameworks de Javascript que utilicé hace un poco mas de un año.  Después he experimentado un poco mas con Prototype/Scriptaculous y ahora estoy empezando a leer un poco acerca de jQuery.  Sin embargo siempre me ha gustado Mootools y es hora de documentar, tal y como se hizo con Prototype, como se realizan los llamados asíncronos (AJAX) con él.

En este artículo voy a describir las cuatro maneras como es posible realizar llamados con AJAX utilizando MooTools.

  1. El método load de los elementos.
  2. El método Request.HTML.
  3. El objeto Request directamente.
  4. El método Request.JSON.

1. El método load de los elementos.

Este método lo tienen los elementos (componentes) de Mootools.  Es muy útil porque permite actualizar rápidamente cualquier elemento con el contenido HTML retornado por un llamado asíncrono.  A pesar de ser muy fácil de utilizar, carece de las opciones y la flexibilidad de los métodos siguientes, por ejemplo, del paso de parámetros.

Para hacer uso de este método se utiliza la siguiente instrucción.

$('componente').load(urlRemota);

Donde componente es el elemento que se desea actualizar (un div por ejemplo) y urlRemota es el URL que se invoca de manera asíncrona para obtener el código HTML con el que se reemplazará el contenido del elemento.

Para más información acerca de este método consultar la documentación de Request.HTML.

2. El método Request.HTML.

Este método es una facilidad implementada sobre el método analizado a continuación.  Permite obtener el mismo objetivo del método anterior con una mayor flexibilidad.

    var myHTMLRequest = new Request
        .HTML({
            url:       urlRemota,
            update:    'componente',
            method:    'post',
            data:      $('formulario'),

            onRequest: function()
            {
                // Al iniciar la solicitud.
            },

            onComplete: function(html)
            {
                // Al completarse la solicitud.
            },

            onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript)
            {
                // Si la solicitud se completó exitosamente.

                /*
                   responseTree - (element) The node list of the remote response.
                   responseElements - (array) An array containing all elements of the remote response.
                   responseHTML - (string) The content of the remote response.
                   responseJavaScript - (string) The portion of JavaScript from the remote response.
                */
            },

            onFailure: function(elemento)
            {
                // Si la solicitud se completó con problemas.
            }
        })
        .send();

De manera similar al método anterior, el atributo url define el URL que se invocará para obtener de manera asíncrona el código HTML para actualizar el elemento referenciado por el atributo update.  El atributo method define si se utilizará POST o GET para la invocación del llamado.

El resto de atributos son opcionales.   El atributo data permite especificar variables que van a ser incluídas con el requerimiento.  Pueden especificarse como un query string de la forma “var1=valor1&var2=valor2”, como un hash de la forma {“var1”: “valor1”, “var2”: “valor2”} o enviando un formulario por completo de la forma $(‘id_formulario’).

Los atributos onXXX son manejadores de eventos a manera de callbacks y son ejecutados según lo que acontezca durante la solicitud del llamado asíncrono.

  • onRequest: ha sido iniciado el proceso de la solicitud.
  • onComplete: la solicitud ha terminado.
  • onSuccess: la solicitud ya ha terminado y terminó exitosamente.
  • onFailure: la solicitud ya ha terminado y terminó de manera fallida.

Para más información acerca de este método consultar la documentación de Request.HTML.

3. El objeto Request directamente.

Esta es la forma mas flexible de utilizar AJAX con MooTools ya que permite realizar la solicitud y manipular que se desea hacer con el resultado obtenido, ya no necesariamente actualizar un elemento.

    var myRequest = new Request({
        url:    urlRemota,
        method: 'post',
        data:   $('formulario'),

        onRequest: function()
        {
            // Al iniciar la solicitud.
        },

        onComplete: function(html)
        {
            // Al completarse la solicitud.
        },

        onSuccess: function(responseText, responseXML)
        {
            // Si la solicitud se terminó exitosamente.

            /*
                responseText - (string) The returned text from the request.
                responseXML - (mixed) The response XML from the request.
            */

            // Aquí se implementa que hacer con la respuesta del llamado asíncrono
            // cuando el procedimiento fue exitoso.

            /*
                Actualizando manualmente el componente,
                reproduce la funcionalidad de Request.HTML:

                $('componente').set('html', responseText);
            */
        },

        onFailure: function(xhr)
        {
            // Si la solicitud se completó con problemas.

            /*
                xhr - (XMLHttpRequest) The transport instance.
            */

            // Aquí se implementa que hacer con la respuesta del llamado asíncrono
            // cuando el procedimiento fue fallido.
        },

        onCancel: function()
        {
            // La solicitud fue cancelada.
        },

        onException: function(headerName, value)
        {
            // La transmisión de la cabecerá falló.

            /*
                headerName - (string) The name of the failing header.
                value - (string) The value of the failing header.
            */
        }
    }).send();

Se incluyen dos manejadores de eventos adicionales.

  • onCancel: la solicitud ha sido cancelada.
  • onException: la transmisión de la cabecera (header) provocó una excepción.

Se incluyen además, entre otras cosas, la propiedad running que permite verificar si el objeto myRequest se encuentra o no actualmente procesando una solicitud y al método cancel() que permite cancelar la solicitud activa, generando consecuentemente un evento de cancelación (ver onCancel).

Para más información acerca de este método consultar la documentación de Request.

4. El método Request.JSON.

Es una facilidad construída sobre el objeto Request que permite manipular respuestas de llamadas asíncronas en formato JSON (Javascript Object Notation).

    var jsonRequest = new Request.JSON({
        url:    urlRemota,
        method: 'post',
        data:   $('formulario'),

        onRequest: function()
        {
            // Al iniciar la solicitud.
        },

        onComplete: function(responseJSON)
        {
            // Al completarse la solicitud.
        },

        onSuccess: function(responseJSON, responseText)
        {
            // Si la solicitud se terminó exitosamente.

            /*
                responseJSON - (object) The JSON response object from the remote request.
                responseText - (string) The JSON response as string.
            */

            /*
                La información recibida del llamado asíncrono se puede obtener como atributos
                del objeto responseJSON, por ejemplo acceder a responseJSON.nombres
            */
        },

        onFailure: function(xhr)
        {
            // Si la solicitud se completó con problemas.

            /*
                xhr - (XMLHttpRequest) The transport instance.
            */
        }
    }).send();

Para más información acerca de este método consultar la documentación de Request.JSON.

Ejemplo funcional.

La aplicación de ejemplo obtiene información dinámica del servidor de manera asíncrona, para actualizar los campos DIV de la página utilizando cada una de las cuatro técnicas descritas en este artículo.

Para la generación de la información dinámica del lado del servidor se utilizaron dos scripts muy simples desarrollado en PHP, uno de ellos genera una cadena constante junto con la fecha actual y el otro prepara la respuesta JSON a partir de la información recibida.  Además muestra la información recibida a través del POST.  El script ContenidoRemoto.php es utilizado para los métodos 1, 2 y 3 mientras que el script Contenido RemotoJson.php es utilizado para el método 4.

Para consultar el ejemplo funcionando en el servidor de demostración se debe seguir este enlace.

Para consultar el código fuente de cada uno de los archivos que componen el ejemplo se deben seguir los enlaces dispuestos a continuación: index.php, ContenidoRemoto.php y ContenidoRemotoJson.php.

Enlaces.

MooTools 1.2

Por fin salió la nueva versión de MooTools, la versión 1.2 que promete ser una mejora completa de toda la librería de JavaScript.

Como he mencionado anteriormente he tenido buenas experiencias con esta librería, sería muy interesante volver a trabajar con ella un proyecto para estudiar esta nueva versión.

La gente de MooTools ha rediseñado también su página para el lanzamiento de la nueva versión incluyendo la página de la documentación y de las demostraciones.  La descarga del paquete se puede realizar desde una versión preconstruída o construír su propia distribución de core eligiendo que componentes agregar, ahora también con los módulos extra por separado.

Para la paz mental de los desarrolladores y facilitar la migración de proyectos de la versión 1.1 a la 1.2 han publicado dos scripts de compatibilidad para los componentes de core y lo adicionales.

Tantas cosas por aprender en tan poco tiempo.

Manipulación fácil del DOM de una tabla con MooTools

Como mencioné anteriormente, he utilizado MooTools en algunos de los proyectos que he realizado con la Fundación donde trabajo. Una de las funcionalidades que frecuentemente se requiere implementar es la de permitir agregar y remover dinámicamente filas o registros a una tabla, para esto utilizamos JavaScript. El diseño que mas utilizamos es la mas simple de todas: manipular el DOM de la tabla localmente en el cliente y dejarle el trabajo a la aplicación del lado del servidor de manejar el almacenamiento de los registros.

Históricamente realicé una primera versión de esta funcionalidad utilizando las funciones de manipulación del árbol DOM de JavaScript pero no tenía experiencia con ellas y apenas estaba aprendiéndolas por lo que su diseño poco eficiente con una implementación terrible. Después conocí las librerías de JavaScript e hice una segunda versión utilizando MooTools; el resultado fue algo mejor, sin embargo no muy eficiente: debía crearse funciones JavaScript (implementación incluída) por cada tabla que se fuera a manipular :-|. Aún no conocía el buen uso de las funciones $ y $$.

Ahora he creado una nueva versión que como lo que me gusta … es muy simple. Permite agregar y remover filas de cualquier tabla e inclusive permite manejar varias tablas en la misma página que se identifican con su atributo id a través de un único conjunto de funciones que se incluyen a través de una etiqueta <script>.

En el script se definen dos funciones: TDAgregarRegistro(tablaId) y TDRemoverRegistros(tablaId) que permite agregar y remover filas (seleccionadas) de una tabla respectivamente.

El usuario deberá por su parte definir las siguientes funciones para determinar comportamiento de las funciones base.

  1. obtEstructuraRegistro(tablaId): determina la estructura de las filas o registros de la tabla.
  2. obtPropiedadesCampo(tablaId): determina las propiedades o atributos de un campo de la tabla.
  3. obtPropiedadesFila(tablaId): determina las propiedades o atributos de una fila de la tabla.

Cada una de estas funciones recibe el id de la tabla a la cual se hace referencia, con este valor la función deberá determinar su respuesta, la cual es un arreglo asociativo. Por la simplicidad requerida por la solución, por ahora se soportan dos tipos de campos: de texto y de selección.

Enlaces:

Artículo relacionado: Manipulación fácil del DOM de una tabla con Prototype.

Introducción a MooTools

MooTools es una librería de JavaScript que promete abstraer un nivel mas la generación de código en este lenguaje facilitando el desarrollo rápido e independiente de navegador. Incluye además soporte para efectos visuales, manipulación del árbol DOM, AJAX y JSON entre otras cositas interesantes.

Valerio Proietti, el desarrollador de MooTools lo define de las siguiente manera en su página web.

Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

MooTools code respects strict standards and doesn’t throw any warnings. It’s well commented and has meaningful variable names: a joy to browse and a snap to understand.

MooTools is compatible and fully tested with Safari, internet explorer 6 and 7, Firefox (and its mozilla friends), Opera and Camino.

Hasta ahora no le he dado un uso extenso a la librería pero me ha parecido interesante y útil, lo suficiente para incluírla en dos de los proyectos que desarrollo en la Fundación.

A mi manera de ver esta librería tiene dos problemas que contrastan contra sus múltiples ventajas.

  1. Es el producto de un desarrollador versus el producto de una comunidad entera como sucede con otros proyectos de código abierto.
  2. La cantidad y calidad de la documentación que se encuentra en Internet es baja si se compara con otras librerías como Prototype.

Con respecto al segundo punto, mas allá del API, los demos y el Mootorial de CNET no he encontrado documentación oficial o elaborada. Hacen falta publicaciones y tutoriales completos y elaborados que permitan conocer de manera concisa y rápida a esta librería.

La excepción del comentario es el sitio de Jourmoly en el cual hay algunos artículos de MooTools que me fueron muy útiles hace un par de meses cuando estaba apenas aprendiendo y que aún me remito a ellos cuando entre tantos lenguajes y librerías se me olvidan algunos detalles.

Actualmente el sitio tiene publicados artículos acerca de los siguientes temas.