xhr, AJAX en menos de 1 KB

[Ñuño Martínez]

Interesante, interesante...

Resulta que estoy con un pequeño proyecto y estaba buscando la forma de trabajar con AJAX un poco más a mi estilo. Me hice un módulo en el trabajo y hasta ahora creí que era el que iba a incluir en el proyecto, pero después de ver esto ya no estoy seguro.

No creo que lo incluya tal cual en mi proyecto (entre otras cosas, la GPL nunca fue de mi agrado, prefiero Zlib, MIT o FreeBSD), pero como mínimo voy a reescribir mi módulo.

[dec]

Hola,

Gracias Ñuño. La licencia es ahora LGPL, empero, no creo que tengamos problemas. ¿Verdad?

[roman]

Siempre he pensado que esto de Ajax se ha manejado como algo oscuro y complicado y hasta se escriben libros dedicados a ello, cuando en verdad no es más que:

1. Crear un objeto de tipo XHTTPRequest
2. Usarlo para enviar una petición HTTP
3. Asignar su evento OnReadyStateChange

La parte más "difícil" es la 1 porque se debe crear el objeto según qué navegador y qué versión, pero una búsqueda en Google nos dará múltiples versiones.

En la parte 2 simplemente hay que especificar el método de la petición (GET, POST o HEAD) y si el envío es síncrono o asíncrono. No hay mucho que pensarle, debe ser asíncrono a no ser que -en las condiciones actuales- queramos fastidiar al usuario congelando su navegador.

Lo interesante está en la parte 3, en dónde esencialmente sólo nos interesa esperar a recibir el readyState = 4 indicando que ya se competó la respuesta y determinar el status de la misma: =200 ok, !=200 not ok (básicamente).

Y ya, no hay nada más. De verdad.

Es más, la X de ajax no sé ni quién la use, porque normalmente veo que se usa la respuesta de tipo texto en lugar de xml, y si se quiere algo más estructurado, mejor usar json, que puede manejarse directamente con javascript.

Lo que sí hay extra son las facilidades para recibir esta respuesta, como es la de ponerla en automático en un <div> y traducir el onreadystatechange en eventos cómodos para el programador. Es lo que ha hecho David.


Ahora, como yo no soy dado a las licencias gpl, mit, lgpl y cosas así, pues les pongo aquí lo que alguna vez hice, lo pongo al dominio público, osea para que cada cual haga con el lo que desee. Lo único interesante -posiblemente- es la clase HTTPParams y la función parseForm para leer los campos de un formulario ya hecho y traducirlo en los pares key=value que se envían con la petición HTTP. Pero la verdad es que la he usado muy poco porque no estoy convencido (todavía) de enviar formularios vía ajax.

/******************************************************************************

    Función createRequest

    Crear un objeto HttpRequest según los distintos navegadores

    Desde luego, esta función puede refinarse tanto como sea necesario.

******************************************************************************/

function createRequest()
{
    if (window.XMLHttpRequest)
    {
        return new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
        return new ActiveXObject('Microsoft.XMLHTTP');
    }

    return null;
}

/******************************************************************************

    Clase HttpParams

    Almacena pares [key, value] para ser enviados en una petición HTTP

*******************************************************************************/

function HttpParams()
{
    this.items = new Array();
}

// Agrega un par a la lista
//
HttpParams.prototype.add = function(key, value)
{
    this.items[this.items.length] = [key, value];
}

// Construye la cadena a ser enviada
//
HttpParams.prototype.getQueryString = function()
{
    var result = '';

    for (var i = 0; i < this.items.length; i++)
    {
        var item = this.items[i];

        if (result)
        {
            result += '&';
        }

        result += item[0] + '=' + item[1];
    }

    return encodeURI(result);
}

/******************************************************************************

    Función parseForm

    Extrae la información de un formulario y la coloca en un objeto HttpParams

******************************************************************************/

function parseForm(form)
{
    var elements = form.elements;
    var params = new HttpParams();
    var element;

    for (var i = 0; i < elements.length; i++)
    {
        element = elements.item(i);

        if (!element.name)
        {
            continue;
        }

        switch (element.type.toLowerCase())
        {
            case 'text': case 'password': case 'hidden': case 'textarea':
                params.add(element.name, element.value);
                break;

            case 'select-one':
                if (element.value)
                {
                    params.add(element.name, element.value);
                }
                break;

            case 'select-multiple':
                options = element.options;

                for (j = 0; j < options.length; j++)
                {
                    option = options.item(j);

                    if (option.selected)
                    {
                        params.add(element.name, option.value);
                    }
                }
                break;

            case 'radio':   case 'checkbox':
                if (element.checked)
                {
                    params.add(element.name, element.value);
                }
                break;
        }
    }

    return params;
}

/******************************************************************************

    Clase Ajax

    Interfaz para el envio de peticiones HTTP através de un objeto HTTPRequest

******************************************************************************/

function Ajax(url)
{
    this.url = url;
    this.params = new HttpParams();
    this.async = true;
    this.request = null;
    this.handler = null;
}

Ajax.prototype.send = function(method)
{
    // Crear un objeto HttpRequest
    //
    // Estos objetos no parecen ser reusables por lo que hay que crearlos cada
    // vez que enviemos una petición HTTP
    //
    this.request = createRequest();

    // Si la llamada es asíncrona, establecer el procesador de eventos
    //
    if (this.request && this.async)
    {
        var self = this; // extraño ¿no?

        this.request.onreadystatechange = function()
        {
            // cuando se llame a este evento, this es una copia del objeto
            // por ello es que debemos usar self
            //
            if (self.request.readyState == 4 && self.request.status == 200 && self.handler != null)
            {
                // llamar al manejador del usuario
                self.handler();
            }
        }
    }

    if (method.toLowerCase() == 'post')
    {
        this.request.open(method, this.url, this.async);
        this.request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        this.request.send(this.params.getQueryString());
    }
    else
    {
        this.request.open(method, this.url + '?' + this.params.getQueryString(), this.async);
        this.request.send(null);
    }

    // Si la llamada fue síncrona, llamar al manejador ahora
    //
    if (!this.async && this.handler != null)
    {
        this.handler();
    }
}

Ajax.prototype.getText = function()
{
    return this.request.responseText;
}

Ajax.prototype.getXml = function()
{
    return this.request.responseXml;
}

Ajax.prototype.parseForm = function(form)
{
    this.params = parseForm(form);
}

// Saludos

[dec]

Hola,

Gracias por el código Román. Hombre, está claro que al final no se hace sino lo mismo. Sin embargo, hay formas y formas. No tienes sino darte una vuelta en busca de "bibliotecas" que permiten trabajar "a alto nivel" con el objeto XmlHttpRequest famoso. No ya algo como jQuery, que, implementa no sólo métodos como "get" y "post", sino "load", "getScript", "getJSON", y algunos más, que lo que hacen es ponernos las cosas más sencillas: y precisamente por lo que dices: sabemos lo que hay que hacer, pero, delegamos esto en jQuery, ahorrándonos así trabajo y algunas cosas más, como estar pendiente de posibles problemas, incompatibilidades, etc., puesto que ya lo hacen por nosotros.

Pero, he dicho que no sólo bibliotecas como jQuery encontrarás si buscas este tipo de "AJAX libraries"... Así unas se basarán en funciones, "get", "post", etc., otras, como la que he presentado en este hilo, utilizarán un sólo método, al que es posible pasar diferentes argumentos opcionales. Todas, más o menos, sirven para lo mismo: en un par de líneas de código nos permiten hacer peticiones HTTP en segundo plano, de una manera o de otra, evitándonos tener que preparar por nuestra cuenta el objeto "XmlHttpRequest", su "onreadystatechange", etc. Como estas "bibiliotecas" son diferentes, unas se adaptarán mejor o peor a nuestra forma de hacer las cosas.

Sé que no llevabas mala intención, y, respecto de la licencia del poco código que he presentado aquí, no creo que haya que hacerse problemas, pero, el argumento que has utilizado arriba me ha sonado como si yo te dijese, "Hombre, para qué vas a usar la VCL de Delphi y el componetne "TButton", si puedes crear tu propio botón empleando la API de Windows"... Je je je je... claro que podría crear el botón usando el API de Windows, pero, ¡dónde va a parar! Y por eso, entre otras cosas, utilizamos entornos como Delphi. Pero, en fin, conste que te doy la razón, porque, en efecto, al final se trata de hacer uso del objeto XmlHttpRequest de una forma o de otra. Uno mismo podría hacerlo por su cuenta.

PD. Ahora voy a echar un vistazo al código que has puesto arriba. Y gracias.

[roman]

Empezado por dec

Sé que no llevabas mala intención, y, respecto de la licencia del poco código que he presentado aquí, no creo que haya que hacerse problemas, pero, el argumento que has utilizado arriba me ha sonado como si yo te dijese, "Hombre, para qué vas a usar la VCL de Delphi y el componetne "TButton", si puedes crear tu propio botón empleando la API de Windows"... Je je je je... claro que podría crear el botón usando el API de Windows, pero, ¡dónde va a parar! Y por eso, entre otras cosas, utilizamos entornos como Delphi. Pero, en fin, conste que te doy la razón, porque, en efecto, al final se trata de hacer uso del objeto XmlHttpRequest de una forma o de otra. Uno mismo podría hacerlo por su cuenta.

¿Cuándo me has visto con mala intención?

La intención era simplemente desmitificar el ajax. Concuerdo contigo en que hay bibliotecas que nos facilitan las cosas y desde luego que conviene usarlas. Pero a ver, cuando uno ve en la librería (uf, esta vez si está bien usado el término ) un libro de 200 o 300 páginas, con título: Aplicaciones WEB con Ajax, uno se piensa que debe ser todo un mundo que explorar, cuando en realidad son sólo los tres puntos que puse arriba.

Una vez que uno es conciente de eso, ya con confianza escoge la biblioteca que más le acomode o se fabrica uno la propia (actualmente prefiero usar una ya hecha).

// Saludos

[dec]

Hola,

¿Demasiados libros? Bueno, decía Cervantes (o Alonso Quijano, o El Quijote), que no hay libro malo. No sé, ¿no? En esos libros digo yo que enseñarán otras cosas aledañas a las apliaciones en que se piense hacer un uso extensivo de este tipo de "técnicas". Yo no soy tan optimista como Cervantes: debe haber algún que otro libro malo por ahí, en muchos sentidos, pero, en fin.

PD. No tenías que haber puesto tu código. Me ha dado ideas.

[dec]

Hola,

Echa un vistazo Román (bueno, los demás también podéis).