Users are familiar with indications of work performed in background since first versions of MS Windows. Besides being fancy, they are also informative.
AJAX, a Web 2.0 technique, aim at exchanging only small amounts of data with a server; this should be performed behind the scenes. If so, why not expose the moments when user interaction brings about reqest and response from a server? Remeber my previous post about using prototype.js for making AJAX request? I use prototype also for indicating background actions on web pages that support AJAX.
You’d never guess how easy it is to such indicator.
First, you must register an action which accurs in case of an AJAX-related event. The best way to do that is add the following code in the head section of the HTML code (remember to include prototype.js library before it!):
<script type=“text/javascript”>
<![CDATA[
Ajax.Responders.register({
onCreate: function(){ Element.show(‘spinner’)},
onComplete: function(){Element.hide(‘spinner’)}
});
]]>
</script>
Then, further in the code inside body section, add this:
<img alt=“spinner” id=“spinner” src=“gfx/spinner.gif”
style=“display:none;” />
Actually, it’s all. Whenever you click an object which sends an AJAX request to the server, the indicator defined by img appears and is visible until the response is obtained.
Wonder, how to create an indicator animation? Generate one on ajaxload.info
