Gif de precarga sobre clase cargadorContenidos

[hechicero0410]

Hola a todos,

Como sabran la clase cargadorContenidos es extraida de una manual de ajax, la verdad es muy util, sin embargo, en ella no se muestra como colocar una imagen de precarga... si alguien me puede ayudar con ese detalle se los agradeceria. a continuación anexo la clase en mención.

Código Javascript:

var net = {
    READY_STATE_UNINITIALIZED: 0,
    READY_STATE_LOADING: 1,
    READY_STATE_LOADED: 2,
    READY_STATE_INTERACTIVE: 3,
    READY_STATE_COMPLETE: 4
};
 
net.CargadorContenidos = function (url, funcion, metodo, parametros, contentType, funcionError) {
    this.url = url;
    this.metodo = metodo;
    this.parametros = parametros;
    this.contentType = contentType;
    this.req = null;
    this.onload = funcion;
    this.onerror = (funcionError) ? funcionError : this.defaultError;
    this.cargaContenidoXML ();
}
 
net.CargadorContenidos.prototype = {
    
    cargaContenidoXML: function () {
        var ie = navigator.userAgent.toLowerCase().indexOf('msie')!=-1;
    
        if (ie) {
            try {
                this.req = new ActiveXObject ("Msxml2.XMLHTTP");
            } 
            catch (e) { // en caso que sea una versión antigua
                this.req = new ActiveXObject ("Microsoft.XMLHTTP");
            }
        }
        else {
            this.req = new XMLHttpRequest();
        }
        if(this.req) {
            try {
                
                var loader = this; // imagen del objeto this para utilizarla en el metodo onReadyStateChange
                loader.req.onreadystatechange = function () {
                    loader.onReadyState.call (loader);
                }
                this.req.open (this.metodo, this.url, true);
                if (this.contentType) {
                    this.req.setRequestHeader("Content-Type", this.contentType);
                }
                this.req.send(this.parametros);
            }
            catch (err) {
                this.onerror.call(this);
            }
        }
    },
    
    onReadyState: function() {
        var req = this.req;
        var ready = req.readyState;
        if (ready == net.READY_STATE_COMPLETE) {
            var httpStatus = req.status;
            if (httpStatus == 200  || window.location.href.indexOf("http") == -1) {
                this.onload.call(this);
            }
            else {
                this.onerror.call(this);
            }
        }
    },
    
    defaultError: function() {
        alert (
            "Se ha producido un error al obtener los datos"
            + "\n\nreadyState:"
            + this.req.readyState
            + "\nstatus: "
            + this.req.status
            + "\nheaders: "
            + this.req.getAllResponseHeaders()
        );
    }
}
 

[caricatos]

Iniciado por hechicero0410

...Como sabran la clase cargadorContenidos es extraida de una manual de ajax...

Pues yo no lo sabía (tampoco tengo interés)

Como respuesta, los objetos Ajax se activan con su métod "send()", o sea que si quieres mostrar algún gif animado supongo que lo más lógico es que lo hagas antes o después de esa instrucción (mejor antes); y las respuestas se obteienen con su readyState == 4 (podría ser 3, pero no hay que fiarse)

Saludos

[hechicero0410]

Gracias por tu respuesta caricatos...

primero que todo con el "como sabran" queria referirme a que la clase no la desarrolle por mi cuenta y hacer referencia mas o menos al manual del cual fue tomada... al parecer no te agrado mucho, lo ciento es mi primera solicitud de ayuda en los foros, como veras no soy muy bueno en ello. Ahora volviendo al tema mi intencion es mostrar una imagen de loading antes de que se muestre el contenido que recibo como respuesta; te mostrare un ej de como estoy llamando y mostrando la informacion

Llamada a la clase:

Código Javascript:

var cargador = new net.CargadorContenidos ('ejemplo.php', funcion_respuesta, 'GET', null, null);
 

ahora como recibo la respuesta:

Código Javascript:

function funcion_respuesta () {
               document.getElementById ('divEjemplo').innerHTML = this.req.responseText;
    }
 

La idea es que el elemento divEjemplo va a variar y no se como determinar este elemento en la clase y lo unico que obtengo de la clase es el "this.req.responseText"

No se si me explico bn lo que quiero hacer si me podrias dar otra luz te lo agradeceria; puesto que no entendi muy bien tu anterior respuesta.

De antemano te agradezco tu colaboracion.