page hanged when web method is executes

I am working on an ajax-webmethod (using json) to save data in a database and select it when needed. Now whenever I call the webmethod, while the method is processed the whole page hangs and nothing can be done with the page.

I want to enable everything while the web method is called from ajax, for example showing a loading image until the web method finishes.

My code is below:

function getvalues(id, tab, pageNo) {
    $.ajax({
        type: "POST",
        url: "开发者_StackOverflowdefault.aspx/LoadData",
        data: "{'id':'" + id + "','tab':'" + tab + "','pageNo':'" + pageNo + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            if (msg.d.length > 0) {
                var dvComment = document.getElementById("Comments");
                dvComment.innerHTML += msg.d;
            }  
        },
        async: true,
        error: function(xhr, status, error) {
            // alert(xhr.statusText);
        }
    });
}

So now when it renders the html into the DIV the whole time the page hangs.

To show loading image you can use ajaxStart method like this:

$("#loading").ajaxStart(function(){
    $(this).show();
});

Where #loading is:

<img id="loading" src="images/ajaxload.gif" alt="loading..." style="display:none"/>

To hide loading image:

$("#loading").ajaxComplete(function(){
   $(this).hide();
});