Ajax load image not going away once initiated

[tec4]

I'm trying to integrate a load image with an ajax Google maps search tool but when I try to set up the loader image, I cannot seem to get it to go away once the responce has been successful.

Example Code:

function downloadUrl(url, callback) {
 var request = window.ActiveXObject ?
  new ActiveXObject('Microsoft.XMLHTTP') :
  new XMLHttpRequest;

 request.onreadystatechange = function() {
 if (request.readyState == 4) {
  if(request.status == 200) {
  request.onreadystatechange = doNothing;
  callback(request.responseText, request.status);
  }
 } else {
  document.getElementById('loader').innerHTML = '<img src="/ajax/ajax-loader.gif"/>';
 }
 };

I've also tried a variation like the below code to put a function in the onreadystatechange....perhaps I need a little more elaborate function tied to it?:

function downloadUrl(url, callback) {
 var request = window.ActiveXObject ?
  new ActiveXObject('Microsoft.XMLHTTP') :
  new XMLHttpRequest;

 request.onreadystatechange = function() {
 if (request.readyState == 4) {
  request.onreadystatechange = theHTTPResponse;
  callback(request.responseText, request.status);
 } 
 };

 request.open('GET', url, true);
 request.send(null);
 }
 
 function theHTTPResponse() {
 
  document.getElementById('loader').innerHTML = '<img src="/ajax/ajax-loader.gif"/>';
 
 } 

But no luck....not sure where to exactly place it/arrange it to make it only show the load icon when the request is being processed.

Thanks in advance for the help!

[astupidname]

function getXhr() {
    var xhr = null;
    try{//Mozilla, Safari, IE 7+...
        xhr = new XMLHttpRequest();
        if (xhr.overrideMimeType) {
            xhr.overrideMimeType('text/xml');
        }
    } catch(e) {
        try{
            xhr = new ActiveXObject("Msxml2.XMLHTTP.6.0");
        }catch(e){
            try{
                xhr = new ActiveXObject("Msxml2.XMLHTTP.3.0");
            }catch(e){}
        }
    }
    return xhr;
}
 
function downloadUrl(url, callback) {
    var request = getXhr(),
        el = document.getElementById('loader');
    if (request === null) {
        return alert('Your browser does not support ajax! Please upgrade your browser.');
    }
    el.innerHTML = '<img src="/ajax/ajax-loader.gif"/>'; //show the loading image right away
    request.onreadystatechange = function() {
        if (request.readyState == 4) {
            el.innerHTML = ''; //the request has been completed, destroy or hide the loading image
            if(request.status == 200) {
                callback(request.responseText, request.status);
            } else {
                alert('ERROR: unable to complete request! Status code: '+ request.status);
            }
        }
    };
    request.open('GET', url, true);
    request.send(null);
}

If anybody's wondering, how to post formatted code on webmasterworld [webmasterworld.com]
Do not copy formatted code on webmasterworld from IE, use other browser such as Firefox.

[daveVk]

Rather than setting el.innerHTML, consider loading image with page and hide/show it as required with.

el.style.display = 'none'; // hide
and
el.style.display = ''; // show

while the loader image will probably load quicker than the map, no delay is better.

[tec4]

@astupidname - This is great, I really appreciate it - this works very well and makes sense how you set it up so that it would work correctly...guess I just had to see it visually for it to set in, thank you :)

@daveVk - thanks for the advise, modified it so that the image is initially hidden and shown/re-hidden when appropriate - thanks for the tip!

[tec4]

P.S - thanks for the link to posting formatted text....was trying to figure that out...what I posted is a bit hard to read through, so thanks for that. Next post will be formatted :)