How to implement a jQuery spinner image in an AJAX request

Question

I have an jQuery AJAX request which I want to have display an ajax spinner gif while the request loads and then disappear once the request is successful, can anyone suggest

Answer 1

var $loading = $('#loadingDiv').hide();
$(document)
  .ajaxStart(function () {
    $loading.show();
  })
  .ajaxStop(function () {
    $loading.hide();
  });

where '#loadingDiv' is the spinner gif covering the part of the page or the complete page.