Display loading image during ajax data call

$(document).ready(function () {
    try {
        $("body").on({
            // When ajaxStart is fired, add 'loading' to body class
            ajaxStart: function () {
                $(this).addClass("loading");
            },
            // When ajaxStop is fired, rmeove 'loading' from body class
            ajaxStop: function () {
                $(this).removeClass("loading");
            }
        });
    } catch (e) {
        alert(e.Description);
        alert(error);
    }
});

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal
{
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #f9f9f9 url('images/loader.gif') 50% 50% no-repeat;
    opacity: .70;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 70);
    filter: Alpha(Opacity=70);
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading
{
    overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal
{
    display: block;
}