Gif en AJAX DUDA SIMPLE

[standby1900]

Primero quiero decirles que soy muy novato en todo lo que tenga que ver en AJAX y que he realizado una funcion para enviar los datos por el post que la verdad la utilizo mucho y seria un gran problema tener que cambiarla a estas altura y lo que me trae a crear este post es que quiero agregarle un GIF que se vea mientras la pagina se esta cargando y por lo que he leido y visto en no lo puedo lograr.
Por lo que investige todos lo hacen cuando readyState == 1, pero yo intente con eso en la function cargarpagina poner un if con (readyState == 1) o en else de (readyState == 4), en las dos opciones se me queda siempre el GIF y nunca muestra la pagina.

Código:

function cargaDivPrincipal(url, id_contenedor){
    var pagina_requerida = false;
	if (window.XMLHttpRequest) {
		pagina_requerida = new XMLHttpRequest();
	}else if (window.ActiveXObject){ 
		try {
			pagina_requerida = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e){ 
			try{
			pagina_requerida = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e){}
		}
	}
	else
		return false;
		pagina_requerida.onreadystatechange=function(){ 
		cargarpagina(pagina_requerida, id_contenedor)
	}

	pagina_requerida.open('POST', url, true); 
	pagina_requerida.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        var textDato = document.getElementById("textDato");
	

        var query = "textDaro= " + textDato.value;
         pagina_requerida.send(query);
        
}

Y la funcion que aparece en negrita:

Código:

function cargarpagina(pagina_requerida, id_contenedor){
    if (pagina_requerida.readyState == 4){
         if (pagina_requerida.status==200 || window.location.href.indexOf("http")==-1){
            document.getElementById(id_contenedor).innerHTML= pagina_requerida.responseText;
         }
    }
			
}

Saludos.

StandBy1900

[cesarpunk]

Antes del onreadystatechange=function() debería estar el innerHTML que contiene el GIF y despues de todo va el responseText, mira este ejemplo:

Código:

	document.getElementById('div').innerHTML = '<img src="images/sending.gif">';
	ajax.open("POST", "web.php",true);
	ajax.onreadystatechange=function(){
		if (ajax.readyState==4) {
			c.innerHTML = ajax.responseText
		}
	}

[standby1900]

Muchas gracias por tu respuesta, intentare y luego te comento.

No he podido hacerlo, he modificado casi toda la funcion, he intentao en varias lados y nada!!!

Por favor ayudaaaa!!!

lo ultimo que intente fue una modificacion en la funcion:

Código Javascript:

function cargarpagina(pagina_requerida, id_contenedor){
    
switch (pagina_requerida.readyState){
                    case 1:
                              document.getElementById(id_contenedor).innerHTML= "<center><img src='URLIMAGENGIF'/><br/></center>";
                              break
                    case 4:
                              if(pagina_requerida.status==200 ){
                                    document.getElementById(id_contenedor).innerHTML= pagina_requerida.responseText;
                              }
                              break
                    }
            
}
 

pero no me ha funcinado, no se porque porque veo que a varios si... por favor ayuda!!!
Siempre se me queda el GIF y nunca me muestra la verdadera respuesta!!!!



Saludos.