In my current project, I used ajax to fetch data from the server to provide Desktop Application like Experience. I wanted to automatically show an indicator when an AJAX request is ongoing, and hide it when there is no such request. So I found the following solution for both the Prototype library and the JQuery library.

Make sure the following HTML is included on every page where AJAX requests are made. (Place it in body of the main layout so that you do not have to repeat this HTML on each page.

<span id="ajax_spinner" style="display:noneposition:absolute top:50% left:50% z-index:3000">
       <-- Design Busy indicator here -->
       <img src="/yoursite/images/spinner.gif"/>
</span>

Make sure the following javascript code has been executed before any AJAX request is made. (Move this to a js file and include it in Heading part of the main layout).

<script type="text/javascript">
 
/*
  Registering responders for prototype library.
  (If you are not using  prototype library then there is no need of the next statement.)
*/
 
Ajax.Responders.register({
          onCreate: function() {
              jQuery("#ajax_spinner").show();
          },
          onComplete: function() {
              jQuery("#ajax_spinner").hide();
          }
});
 
/*
   Registering responders for jQuery AJAX calls.
*/
 
jQuery("#ajax_spinner").ajaxStart(function() {
              jQuery(this).show();
 });
jQuery("#ajax_spinner").ajaxStop(function() {
              jQuery(this).hide();
});
 
/*
    Note : If you are not using jQuery you can show/hide the div
         using javascript(e.g. document.getElementById) to do the same
*/
</script>

The above trick worked for me and hope it works for you guys too.

Helpful links :-
http://www.prototypejs.org/api/ajax/responders
http://docs.jquery.com/Ajax/jQuery.ajax
http://blogs.aarohan.biz/2009/05/26/get-started-with-jquery-ajax-and-json-in-your-perl-web-applications (Thanks to Amit)

~~~~Bhagwat Kumar~~~
bhagwat@intelligrape.com