how can i show ajax-loading when i fetching some information from database?

i used jQuery with Ajax By this code it works fine

$.ajax({
                type : 'POST',
                url: 'http://localhost/msite/index.php/site/ajax',
                data : catdata,
                success : function (msg){
                    $('body').html(msg);
                }
                });

but i want to show the ajax-loading gif while fetching that information from database?

And , is that way secure Or i have to add some security to it?

$('body').html("<img src='spin.gif' />").fadeIn(100, function () {
   $.ajax({
    type: 'POST',
    url: 'http://localhost/msite/index.php/site/ajax',
    data: catdata,
    success: function (msg) {
        $('body').html(msg);
      }
    });
});

If you make your database query synchronous on the server then your Ajax will be spinning as long as the request is being processes, including a database query and server request/response roundtrip.

I believe you have to do this yourself within the jQuery. Create a hidden image on the page, call .show() just before calling the ajax command and be sure to call .hide() inside the complete event...

complete: function () {
    $("#ticker").hide();
}

You can download a suitable image from ajaxload.info.