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.