Implementar loader en función

[Elalux]

Que tal Maestros, he aquí mi stiución:

Desde hace algún tiempo utilizo una función para cargar mediante AJAX el contenido de archivos externos en una página, a continuación pongo la función por si a alguien le es útil:

Por favor, prestar especial atención a la parte en negritas.

var XMLHttpRequestObject = false;

if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}

function getData(dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);

XMLHttpRequestObject.onreadystatechange = function()
{

if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}

XMLHttpRequestObject.send(null);
}
}

Para llamar a la función se usa la siguiente sintaxis:

evento="getData( 'archivo_solicitado.txt', 'id_del_div')"

evento= El evento que lanzará la función (onClick, onBlur etc) dependiento del tipo de campo.

archivo_solicitado.txt = Pues es el archivo que traeremos del servidor

id_del_div = Id de la etiqueta <div></div> dentro de la cual se pondrá el contenido del archivo solicitado

La función trabaja a la perfección, el problema vino cuando intenté modificar la función para hacer que aparezca una imágen (loader) en lo que se termina de recibir el archivo, después de devanarme los sesos por un rato, la mejor sulución que encontré fué la siguiente (lo que está en negritas es lo que agregué):

.
.
.
.
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}else{
obj.innerHTML = "<img src='bigrotation2.gif' border='0' align='absmiddle'>";
}
.
.
.

La función trabaja bien la primera vez que se usa, pero si por ejemplo, el archivo que llamó la función tiene un campo de formulario que vuelve a llamar a la función, entonces ya sólo aparace la imagen y nunca el contenido del nuevo archivo que se está solicitando.

No sé si me expliqué bién, la verdad los lenguajes del lado del navegador no son mi fuerte, agradezco desde ahora cualquier ayuda, si necesitan mas información o cualquier aclaración sobre el problema por favor no duden en solicitármelo.

Desde ahora muchas grácias.

Saludos todos.

[Elalux]

QUe tal maestros, bastó agregar la línea que se muestra en negritas para que el preloader funcione adecuadamente, aquí les dejo la función probada y funcionando:

var XMLHttpRequestObject = false;

if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}

function getData(dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
obj.innerHTML = "<center><p><p><p><img src='bigrotation2.gif' border='0' align='absmiddle'></center>";
XMLHttpRequestObject.open("GET", dataSource);

XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}

XMLHttpRequestObject.send(null);
}
}

Saludos.