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