xhr, AJAX en menos de 1 KB

[dec]

Hola,

Je je je... No sé si os podrá interesar, probablemente, no, pero, por si queráis echar un vistazo, aquí tenéis una clase para javascript: xhr, que, puede usarse para trabajar con el famoso objeto XmlHttpRequest, de una forma más o menos sencilla, y, que, sólo ocupa 723 bytes, "minimizada".

Más información en este enlace

[roman]

Una pregunta: ¿qué jQuery no tiene ya la implementación de ajax? Lo pregunto porque me sorprende un poco que siendo tú el number one fan de jQuery, programes una función aparte y que -encima- ¡no es un plugin de jQuery!

Bueno, es un poco por molestar

Otra pregunta: en la documentación pones:

xhr.call({
  url : 'backend.php'
});

xhr.Success = function(xhr){
  alert(xhr.responseText);
}

¿No tendría que adjuntarse el evento primero, es decir, antes de la llamada?

Por ahí tenía yo una función js que lee los campos de un formulario y prepara los pares necesarios para mandarlos vía GET o POST. De esta manera, puedes partir de un formulario ya hecho y mandarlo con ajax. Si te interesa la busco y se la anexas a tu función.

// Saludos

[dec]

Hola,

Gracias por tu respuesta Román. Hombre, jQuery es mucha jQuery... esto no la sustituye, ni dios que lo pensó, como se suele decir. Se trataba de jugar un poco, de quitarme la obsesión (quizá un tanto estúpida) de la cabeza, en fin. Otra cosa es que, además de una especie de juguete, pueda usarse realmente, llegado el caso.

Poniéndome en un hipotético caso (vale, muy hipotético) de tener que hacer alguna petición HTTP vía "AJAX" y no necesite nada más (jQuery), usar la clase de que hablamos vale 723 bytes... así que puede ser una opción, no sé, hipotéticamente. Pero sí, jQuery tiene un muy completo soporte para AJAX, mucho mejor que el que xhr proporcione, sin dudarlo.

Lo del evento luego de la llamada a "call()", sí, es casualidad pero yo también lo he visto antes. Lo voy a cambiar, y, sin embargo, como la llamada se realiza "asíncronamente" (por defecto) todavía creo que funcionaría el asunto: al fin y al cabo el objeto "xhr" está disponible, pero, en todo caso, queda más fino (y posiblemente evite problemas) si el evento se sitúa antes de la llamada a "call()", sí.

Respecto del código que dices... me parece que hasta lo tengo guardado por aquí. No me importaría echarle un vistazo, empero, piensa que Xhr es "another 1 KB less "AJAX" library", no vayamos a jorobar el eslogan el primer día. Je je je je...

PD. Ya está cambiado el asunto del evento antes de "call()".

PD2. No me has dicho si te parece que estoy loco del todo o qué.

PD3. Adjunta por aquí el código que dices (por no buscarlo yo...) o envíamelo Román, por favor: igual cabe.

[Ñ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