Show a loading bar using jQuery while making a AJAX request

Question

I'm making a AJAX request with jquery like:

$.get('/Stuff.php', function (data) {
    $('#own').html(data);
});

while this data is loading I want to display a small text at the top of the page (which just says "loading...") without blocking it.

how to do this?

Answer 1

use the ajaxSetup

$.ajaxSetup({
    beforeSend:function(xmlHttpRequest){
    //show the loading div here
    },
    complete:function(){

    //remove the div here
    }
    });

now make the ajax call

$.get('/Stuff.php', function (data) {
    $('#own').html(data);
});

Answer 2

$("#loading").show();   //before send
$.get('/Stuff.php', function (data) {
    $('#own').html(data);
    $("#loading").hide();  //when sucess
});