title: Asynchronous ajax call blocking UI
body: <p>Once the JSP is rendered, I'm here trying to make an <em>Asynchronous</em> call via ajax to load additional information on the page.</p>
  
  <p>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. </p>
  
  <p>At other times, this service blocks UI even on a mouse click ajax call (the cursor remains as <code>pointer</code> type until data is loaded).</p>
  
  <p>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.</p>
  
  <p>Appreciate your help. (Sorry, I tried to format the code, but I'm unable to get it right here)</p>
  
  <pre><code>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() + "&amp;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);
  }
  </code></pre>
  
  <p><strong>Update</strong>: 
  onLoad call to this service</p>
  
  <pre><code>function loadAdInfo(){
     var theParamObj = {"REQUEST_URI" : window.location.href};
     requestService('getAdInfo', theParamObj, false);
  }
  </code></pre>