如何结束我的ajax-loader.gif？

I'm using OpenCart, and I have a series of AJAX calls that are hidden to the user and take a little time to load. I want to display an ajax-loader gif, but I'm a newbie and don't know how to write the code. The AJAX calls start when they click a checkout button and are taken to the checkout page. The ajax-loader.gif would be on the checkout page, and would end when the AJAX runs and the appropriate information populates a div on the page.

I really know next to nothing about AJAX. Please prompt me for more details if you need them.

My attempt at showing/hiding the div's background image:

<script language="Javascript" type="text/javascript">
  $('#confirm.checkout-heading').css("background-image", "url('../image/ajax-loader.gif')");
  $.ajax({
    url: 'opencart/index.php?route=checkout/checkout',
    success: function(data) {},
    failure: function(){},
    complete: function(){ $('#confirm.checkout-heading').css("background-image", "none"); }
  });
</script>

CSS:

#confirm .checkout-heading {
    background: #fff url('../image/ajax-loader.gif') 98% 50% no-repeat;
}

if you use jquery, then it you could end either with success, error or any case..

$('#loader').show();
$.ajax({
  url: 'backend.php',
  success: function(data) {},
  failure: function(){},
  complete: function(){ $('#loader').hide(); }
});