sending ajax request

Question

I am using ajax to reload the part of page.When the user clicks on one button the part of the page enclose with div tag is reloaded.But there is some time between the time from when the request is shown and the time the response is obtained.So I want that for this intermediate time some gif image (like loading) should be displayed in that div. When the response is obtained that gif image should disappear How can I do that?

Answer 1

Using JQuery:

$('#mydiv').html('<img src="ajax.gif"> Loading...').load(...);

Answer 2

Here you may find some loading gifs: http://www.ajaxload.info/

Answer 3

if you're using standard javascript you would likely need to do something like this:

document.getElementByID('yourdiv').innerHTML = '<img src="loading.gif" />';
/* your other ajax code .. */
if(xhr.status  == 200){
  document.getElementByID('yourdiv').innerHTML = xhr.responseText; 
}