How do you do a JQuery Ajax Loading Div complete with loading gif?

[eluser]gh0st[/eluser]
How do you add a JQuery Ajax Loading Div complete with a loading gif/PNG to a Ajax query?

Is there a way of saying: WhenAjaxLoading=dosomething and WhenAjaxStopLoading=dosomething. Also, can you force ajax loading stop with a simple escape button press?

I've tried to ask this question on the Google JQuery group but my message never ever appears and I hope someone here can resolve this problem!

Code:

// jQuery Ajax call
$.ajax({
    url: href,
    type: 'GET',
    dataType: 'html',
    timeout: 1000,
    error: function(){
        alert('Error loading document');
    },
    success: function(html){
        // do something with the data
    }
});

With thanks.

[eluser]xwero[/eluser]
from the jquery site

Code:

$("#loading").ajaxStart(function(){
   $(this).show();
});
$("#loading").ajaxStop(function(){
   $(this).hide();
});

[eluser]Nick Husher[/eluser]
Basically, the pseudocode for the Ajax-pinwheel loading icon is this:

1. MAKE AJAX REQUEST
1a. SET CALLBACK TO DELETE PINWHEEL
1b. INSERT CONTENT INTO DIV
1c. DO WHATEVER BUSINESS LOGIC IS NEEDED
2. DISPLAY PINWHEEL

Basically, because it's asnychronous you have to think about it a little backwards. Often times you'll define the thing you want done as the last step before you define any of the earlier steps.

[eluser]gh0st[/eluser]
Ah - thank you very much -- I just wasn't very clear on the issue. I thought they'd be a "ajaxLoading()" and a ajaxFinished()" function.

Many thanks!