AJAX - Let the user know its loading

Hi,
How do I let the user know my ajax is working in the background. Just to change the icon to a sand timer would be sufficient. Im sure it is very easy as it seems like a very necessary thing to have.
Thanks in advance

 

Make a DIV with id 'loadingstatus' to show the status, as loaded or loading.
When any AJAX function is called just changed, set the innerhtml of that DIV to 'loading...'. When the ajax response text has loaded, set it to 'loaded'

function ajax_func()
{
document.getElementById("loadingstatus").innerHTML="Loading, please wait...";//OBSERVE
var xmlHttp;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    // IE 6+
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
      //IE 5.5+
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      alert("Your browser does not support AJAX!");
      return false;
      }
    }
  }
  xmlHttp.onreadystatechange=function()
    {
    if(xmlHttp.readyState==4)
      {
      status(xmlHttp.responseText);	  
	  document.getElementById("loadingstatus").innerHTML="Loaded";//OBSERVE
      }
    }
  
var params='';
xmlHttp.open("post",url,true);
  //Send the proper header information along with the request
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-length", params.length);
xmlHttp.setRequestHeader("Connection", "close");
  xmlHttp.send(params);
}

HTML:

I have commented on 2 lines as '//OBSERVE'. They are what you need.

 

Thanks for that, I may implement that although ideally I would really like to just change the cusor to the sand timer and then back again. Do you know how to do this, can I just change some general CSS before and after maybe?

 

document.body.style.cursor = 'wait';
document.body.style.cursor = 'default';
More values: http://www.java2s.com/Code/JavaScriptReference/Javascript-Properties/cursorPossibleValues.htm
and http://www.java2s.com/Code/JavaScriptReference/Javascript-Properties/cursor.htm

 

Thanks a lot, thats a great help
If you need a vote from me or anything, give me a buzz