CODEWITHSUNDEEP
javascriptajaxasynchronous
Harsh ..
Harsh ..

Reputation: 207

Asynchronous ajax call blocking UI

Once the JSP is rendered, I'm here trying to make an Asynchronous call via ajax to load additional information on the page.

I'm expecting that ajax load to happen gracefully without hampering the UI scroll bar navigation. But the call blocks the UI until the onLoad is complete.

At other times, this service blocks UI even on a mouse click ajax call (the cursor remains as pointer type until data is loaded).

In both cases, I'm building DOM via javascript (like creating innerHTMl for a div or table). Is it because of this? or something else? I'm attaching my ajax request code.

Appreciate your help. (Sorry, I tried to format the code, but I'm unable to get it right here)

function requestService(theService, theParamObj, isSyncCall) {
    var ajaxRequest = getAjaxRequest();  
    var params = "data="; 
    if(theParamObj != null)
        params += encodeURIComponent(JSON.stringify(theParamObj));

    ajaxRequest.onreadystatechange = function() {
        if (ajaxRequest.readyState == 1) {
            showLoadingBox();
        }
        if (ajaxRequest.readyState == 4) {          
            handleResponse(ajaxRequest.responseText, theService, theParamObj);
            hideLoadingBox();
        }
    };

    var queryString = "?timestamp=" + new Date().getMilliseconds() + "&theService=" + theService;
    if(isSyncCall == null)
        isSyncCall = false;
    ajaxRequest.open("POST", g_Service + queryString, isSyncCall);
    ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    ajaxRequest.send(params);
}

Update: onLoad call to this service

function loadAdInfo(){
   var theParamObj = {"REQUEST_URI" : window.location.href};
   requestService('getAdInfo', theParamObj, false);
}

Upvotes: 1

Views: 2199

Answers (1)

odedsh
odedsh

Reputation: 2624

The XMLHTTPObject open method is defined like this:

open(method,url,async)  Specifies the type of request, the URL, and if the request should be handled asynchronously or not.

method: the type of request: GET or POST
url: the location of the file on the server
async: true (asynchronous) or false (synchronous)

You are passing false. so you are calling it synch

Upvotes: 3

Related Questions