Blocking the element for UI interaction

I wanted to block the div for UI interaction while making a server side call and unblock it once the program flow returns to the client side.

If I don't include the unblock statement it goes into blocking after returning from server side process. Seems that UI blocking activates once the click function ends. So it ignores the blocking when I issue both block and unblock statements in the same function. If this is the case? Then how could I produce the desired result. (i.e. blocking the screen/element before calling some process and unblock on the flow returns)

Following is my sample code:

$("#button").click(function () {

        //$("#sidebar").block({
        //    message: '<h1>1Processing</h1>',
        //    css: { border: '3px solid #a00' }
        //});

        $.blockUI({
            message: '<h1>2Processing</h1>',
            css: { border: '3px solid #a00' }
        });

        var result = DoSomeServerSideProcessing();

        //$("#sidebar").unblock();
        $.unblockUI();
});

Additional Information:

The DoSomeServerSideProcessing() uses XmlHttpRequest() to access server side. That I would not like to change to jQuery ajax call as it is tested and matured code block and is being re-used from various points in the code.

Example code:

function DoSomeServerSideProcessing()
{
    var dllUrl=" ... "
    var result = httpGet(dllUrl);
}

function httpGet(theUrl) {
    var xmlHttp = null;

    xmlHttp = new XMLHttpRequest();
    xmlHttp.open('GET', theUrl, false);
    xmlHttp.setRequestHeader('Content-Type', 'text/xml');
    xmlHttp.send(null);
    var strHtml = xmlHttp.responseText;
    xmlHttp = null;

    return strHtml;
}

Update:

I tried converting the XmlHttpRequest() to $.ajax(). Still it is not blocking the UI. Code below:

(Tried both with and without beforeSend/complete handlers.

//$.blockUI();

//alert("before ajax call")

$.ajax({
    url: theUrl,
    type: "GET",
    dataType: "text",
    async: false,
    beforeSend: function () {
        $.blockUI();
    },
    complete: function () {
        $.unblockUI();
    },
    success: function (result) {
        strHtml = result;
        //$.unblockUI();
    }
});

//alert("after ajax call")

Assuming

DoSomeServerSideProcessing()

is an AJAX call with a callback, and the .blockUI and .unblockUI functions are already defined somewhere else, I'd do this:

    function DoSomeServerSideProcessing(url,callback){
        $.post(url,function(data){
            $.unblockUI();
            callback(data);
        })
    }

    $("#button").click(function () {

        $.blockUI({
            message: '<h1>2Processing</h1>',
            css: { border: '3px solid #a00' }
        });

        var result = DoSomeServerSideProcessing(url,function(data){

        });

    });

Because you'd want the UnblockUI function to be called after the data is returned.