附加ajax加载程序图像

This may be simple, but it's kind of tough for a not-so-jquery guy like me. Been diggin' up a source code and I came up with an ajax script. I am confuse where or how can I add a ajax loader image in here:

$.post(webroot+'quickLookUp.php',{'format':'json','function':'Lookup','domain':$('.domain_name').val(),'tld':'.'+$('.domain_name_ext').val()},
function(data)
{
  data = $.parseJSON(data);
  if(data[0].result != 'Available')
  // script here
  else
  // script here
});

showSpinner();
$.post(webroot+'quickLookUp.php', {'format':'json','function':'Lookup','domain':$('.domain_name').val(),'tld':'.'+$('.domain_name_ext').val()},
function(data)
{
    hideSpinner();
    ...
});

Where the showSpinner and hideSpinner functions will show and hide the AJAX progress image respectively.

And if you wanted to do this for all AJAX requests on the current page you could use the $.ajaxSetup:

$.ajaxSetup({
    beforeSend: showSpinner,
    complete: hideSpinner
});

/*SHOW Loading Icon Here*/

$.post(webroot+'quickLookUp.php',{'format':'json','function':'Lookup','domain':$('.domain_name').val(),'tld':'.'+$('.domain_name_ext').val()},
function(data)
{

  /*HIDE Loading Icon Here*/

  data = $.parseJSON(data);
  if(data[0].result != 'Available')
  // script here
  else
  // script here
});

You just show the image before you make the call and hide it in the callback function for the AJAX request.

You can also use Global AJAX Events in jQuery to always show a loading image when an AJAX request is sent (and hide it when the request is done):

$.ajaxStart(function () {
    /*SHOW Loading Icon*/
}).ajaxComplete(function () {
    /*HIDE Loading Icon*/
}).post(...);

Here is the documentation for jQuery Global AJAX Event Handlers: http://api.jquery.com/ajaxComplete/