easiest way to show "loading" when using jquery ajax?

I want to know the easiest way of showing a 'loading' gif to a specific jquery ajax request.

i have tried:

$(document).ajaxStart(function() {
    $('.hideOnLoad').hide();
});
$(d开发者_如何学编程ocument).ajaxStop(function() {
    $('.hideOnLoad').show();
});

but then ALL ajax requests will trigger it. i just want a specific jquery ajax request to trigger the loading process (maybe a gif will be shown).

how do i do that?

In beforeSend callback you have to show the spinner and in complete you have to hide it. Just FYI: ajaxStart and ajaxStop are global ajax events while beforeSend and complete are local.

I usually do something like

$('#someTrigger').click( function(el) {
    // do my ajax request with callback, onComplete
    $('.someImageClass').show();
});

function onComplete(resp, respText, XMLHttpRequset) {
    // do stuff
    $('.someImageClass').hide();
}

Just show the image before you start the ajax call, and then in your ajax "success" or "complete" handler, hide it.

Set container's content to the gif image. Then do the Ajax call. The gif image will be removed by the Ajax callback function.

I tend to do something along the lines of:

$('#some-div').addClass('loading');

when I begin and

$('#some-div').removeClass('loading');

when I'm done. Then I have

#some-div { 
    background: transparent url('ajazz-loader.gif') no-repeat center center; 
}

in my css. Nice and clean.