how to show an ajax activity indicator

[venkata ande]

In my application all the web pages are javascript driven when ever there is need for data from the database we are making an ajax call to the page methods in the javascript itself.

Now my issue is like when i place this code in the server n hit any of the button lets say 'My Cart' or 'My Account' it takes some time to display the response, as it has to do the ajax call n retrieve the information from the DB.
So, in this time delay i.e the time it takes to fetch the data from the server i have to show an ajax activity indicator how can i do this.

Any responses ASAP is highly appreciated.

[jscheuer1]

Well in a typical sort of AJAX call like you describe, a function is passed some data as to the nature of the request and an id of an element (or the element itself) to place the results of the request in once it's fulfilled. The function determines the Http Request method that the browser supports and then processes it, generally with another function or some code attached in some way to the request's onreadystatechange event to populate the element on a readyState value of 4 by overwriting it's innerHTML property with the new data.

So you have something like so:

function loadXmlHttp(url_or_database_query, id){
 . . .
}

Right at the beginning of that function, you can have some code to place a loading icon like:



into the element that will receive the request data once it is processed.

Now the exact nature of that code would depend upon a number of things. But one possibility would be:

function loadXmlHttp(url_or_database_query, id){
var loadingarea = document.getElementById(id),
loadingimg = document.createElement('img');
loadingimg.src = 'loading.gif';
while(loadingarea.lastChild) loadingarea.removeChild(loadingarea.lastChild);
loadingarea.appendChild(loadingimg);
 . . .
}

[clueful]

The readyState handler usually has an assigned output element, so if the readystate equals 2, output "Requesting Data", if it equals 3 output "Retrieving Data (With any luck)".