Javascript/AJAX - Show image whilst update is done and then hide it.

Question

I want to do an update with AJAX but I want a "waiting" image to display before the update and then hide afterwards. That way, if there is a delay in the update or a row lock, the screen doesn't just freeze, it shows a "please wait" icon.
I am using code like this to save to the database when a field is de-selected (done for ease of testing):
<script type="text/javascript">
function deselect_field(f) {
  f.disabled=true;
  f.className=f.className + " saving";
  var v=new htmldb_Get(null,&APP_ID.,'APPLICATION_PROCESS=SC_TEST',0);
  v.add(f.name,f.value);
  v.get()
  f.className=f.className.replace("saving"," ");
  f.disabled=false;
</script>The saving class sets the background. I have tested this without the un-setting and it works fine. I think the issue is the ajax call is made too quickly, ie before the screen has had chance to update.
SO - my question is, how can I have the image (moving gif) display whilst the AJAX call is processing and then hide it at the end?!
Rather not use JQuery if possible.
Thanks

Answer 1

Hi,
Thanks for the link. The issue I'm having now is that the process isn't firing (it's just updating a row in a table). Also, readyState of 4 never seems to get returned. I seem to get the call for readyState of 1 and then that's it. I've modified my code:
<script type="text/javascript">
var z;
function deselect_field(f) {
  z=f;    
  var v=new htmldb_Get(null,&APP_ID.,'APPLICATION_PROCESS=SC_TEST',0);
  v.add(f.name,f.value);
  v.GetAsync(f_async);
  v=null;
function f_async() { alert(p.readyState);
  if (p.readyState==1) {
    z.disabled=true;
    z.className=z.className.replace("highlight_field"," ");
    z.className=z.className + " saving";
  else if (p.readyState==4) {
    z.className=z.className.replace("saving"," ");
    z.disabled=false;
</script>As you can see, I have a debugging alert message in there. This only pops up the once with a value of "1".
Any ideas?! Apart from using classes instead of displaying the HTML element, I can't see much else that is drastically different? Even so, I wouldn't have thought that would have any effect anyway?
Thanks,