Aporte: Clase para envío y recepción de datos de manera asincrónica

[mariano_donati]

Hola a todos. Quiero contribuir con esta clase que hice que me ha servido de mucho en lo que llevo trabajando con ajax.
Algunos comentarios acerca de que es lo que les permite hacer:

• Enviar formularios de manera asincrónica
• Cargar páginas de manera asincrónica
• Envío de datos mediante POST o GET
• Tres formatos de respuesta:
  • texto
  • xml
  • json

• Tres eventos aceptados: al cargar, antes de completarse y una vez que se ha completado la carga

Ejemplo de uso

Enviando un formulario con HttpRequest

Código javascript:

function send_form(form_id)
{
 
        var request = new HttpRequest();
 
        request.setMethod('POST');
        request.setResponseType(3);         // RESPUESTA CON FORMATO JSON
 
        request.onload = function(){
             alert('Enviando...');
        }
 
        request.oncomplete = function(){
             var response = request.getResponse();
             alert(response.success);
        }
 
        request.sendForm(form_id);
 
}
 

Espero que a alguien más le sea útil. Por supuesto, cualquier sugerencia, crítica, aporte, duda, siempre será bienvenida.

Código javascript:

/************************************************
  HTTPREQUEST
  -----------------------------------------------
  Envia y recibe datos de manera asincrónica.
  -----------------------------------------------
  + loadAsync(url:String, f:Function, method:String)
  + addVar(value:Var)
  + getResponse():(String|XmlString|Json)
  + getState():Int
  + getStatus():Int
  + getMethod():String
  + getResponseType():Int
  + setMethod(value:String)
  + setResponseType(value:Int)
  - initialize()
  - create():AjaxObject
  - createQueryString()
  -----------------------------------------------
************************************************/
 
function HttpRequest()
{
    var request;
    var response;
    var method;
    var responseType;
    var vars;
    var varsLength;
    var instance;
    
    var RESPONSE_TYPE_TEXT = 1;
    var RESPONSE_TYPE_XML  = 2;
    var RESPONSE_TYPE_JSON = 3;
    
    var READY_STATE_UNINITIALIZED  = 0;
    var READY_STATE_LOADING           = 1;
    var READY_STATE_LOADED         = 2;
    var READY_STATE_BEFORECOMPLETE = 3;
    var READY_STATE_COMPLETE       = 4;
    
    instance = this;
    
    initialize();
    
    // Inicializa por defecto el objeto HttpRequest
    function initialize()
    {
        request = create();
        method  = 'GET';
        responseType = RESPONSE_TYPE_TEXT;
        vars = new Array();
        varsLength = 0;
    }
    
    // Crea el objeto Ajax
    function create()
    {
        if ( window.XMLHttpRequest )
            return new XMLHttpRequest;
        else if ( window.ActiveXObject )
            return new ActiveXObject('Microsoft.XMLHTTP');
        else
            return null;
    }
    
    // Crea la cadena variable=valor que se envia junto con la petición al servidor
    function createQueryString()
    {        
        if ( vars.length == 0 || method.toLowerCase() == 'get' )
            return null;
        
        var i;
        var end;
        var querystring;
        
        end = vars.length;
        querystring = vars[0];    
        for ( i=1 ; i<end ; i++ )
            querystring += '&' + vars[i];
            
        return querystring;
    }
    
    // Se ejecuta cuando la petición está en el estado 2
    this.onload             = function(){return false;}
    // Se ejecuta cuando la petición está en el estado 3
    this.onbeforecomplete     = function(){return false;}
    // Se ejecuta cuando la petición ha finalizado en su totalidad
    this.oncomplete         = function(){return false;}
    
    // loadAsync: Carga una url de manera asincrónica
    // Args -> url: página que se va  a cargar
    //           f: función que se va a ejecutar cuando la petición finalice
    //           m: método por el que se envian las variables (GET|POST)
    this.loadAsync = function(url,f,m)
    {
        var handler;
        var instance;
        
        handler = arguments[1] || this.oncomplete;    
        method  = arguments[2] || method;        
        
        instance = this;
        request.onreadystatechange = function()
        {
            switch ( request.readyState )
            {
                case 2:
                           instance.onload.call();
                        break;
                case 3:
                        instance.onbeforecomplete.call();
                        break;
                case 4:
                        handler.call();
                        break;
                default:
                        break;
            }
        }
 
        request.open(method,url,true);
        if ( method.toLowerCase() == 'post' )
        {
            request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            request.setRequestHeader("Content-length", varsLength);
        }
        request.send(createQueryString());
    }
    
    this.sendForm = function(formId){
        
        var form = document.getElementById(formId);
        var elementsCount = form.elements.length;
        var element;
 
        for ( i=0 ; i<elementsCount ; i++ )
        {
            element = form.elements[i];
            switch(element.type.toLowerCase())
            {
                case 'text':
                case 'textarea':
                case 'checkbox':
                case 'radiobutton':
                case 'hidden':
                case 'password':
                    instance.addVar(element.name+'='+element.value);
                    break;
                case 'select-one':
                    instance.addVar(element.name+'='+element.options[element.selectedIndex].value);
                    break;
                default:
                    break;
            }
        }
        
        instance.loadAsync(form.action);
        
    }
    
    // addVar: Agrega una cadena de tipo variable=valor para enviar al servidor
    // Args -> value: cadena de tipo variable=valor que se agrega
    this.addVar = function(value)
    {
        vars[vars.length] = value;
        varsLength += value.length;
    }    
    
    // getResponse: Devuelve la respuesta del servidor
    this.getResponse = function()
    {
        switch ( responseType )
        {
            case 1:
                    return request.responseText;
                    break;
            case 2:
                    return request.responseXML;
                    break;
            case 3:
                    return eval('('+request.responseText+')');
                    break;
            default:
                    break;
        }
    }
    
    // getState: Devuelve el estado en el que se encuentra la petición actual
    this.getState = function()
    {
        return request.readyState;
    }
    
    // getStatus: Devuelve el estado en el que terminó la petición actual
    this.getStatus = function()
    {
        return request.status;
    }
    
    // getMethod: Devuelve el método utilizado en la petición actual
    this.getMethod = function()
    {
        return method;
    }
    
    // setMethod: Establece el método en el que se enviarán las variables al servidor
    this.setMethod = function(value)
    {
        method = value;
    }
    
    // getResponseType: Devuelve el tipo de respuesta que tendrá el servidor en la petición actual
    this.getResponseType = function()
    {
        return responseType;
    }
    
    // setResponseType: Establece el tipo de respuesta que queremos obtener del servidor con la petición actual
    this.setResponseType = function(value)
    {
        responseType = value;
    }
 
}