Simple ajax call seems to be blocking

Question

Really simple question. I trying to test a Restful webservice that I am developing, and have this simple ajax call (using jquery):

 <script type="text/javascript">  
   $(document).ready(function() { 
     var url = '/index.php/gettest/reallyLongRequest';    
     $.ajax({
       url: url,
       dataType:'text',
       success:function(data) { $('#result').html(data);},
       error:function(xhr,err,e) { alert ("Error: " + err);}
     });                
  });
 </script>

This runs when the page loads. As it's running, the page is blocking; i.e., (I can see the hourglass next to the mouse pointer) no other user actions can be handled. (Btw, this particular get request--intentionally--takes a very long time to return).

Why is this? A(asynchronous)JAX right? Obviously I am making a beginners mistake. Any ideas, please?

When I attempt this using plain javascript (no library) it works as expected. Does this have something to do with Jquery's handling of the xhr onreadystatechange?

Thank you for looking.

EDIT: multiple people have suggested setting async: true, which as it happens, is the default in jquery, and as such has no effect.

EDIT: As previously mentioned, if I use plain javascript and start this with a timer, e.g., window.setInterval(function() { startLongPoll(); }, 5000) It updates as expected, without appearing to block. Ideas, anyone?

Answer 1

Here is an example of what I did to solve the problem:

jQuery(document).ready(function() {
  setTimeout(function () {
   $.getJSON("veryLongRequest", function(json) {
   alert("JSON Result: " + json[0].id);});
  }, 500); // You may need to adjust this to a longer delay.
});

Note: I am using the short-hand jquery method, "getJSON" which is a wrapper for the ajax call with datatype set to "json". However, this solution will work for all ajax requests.

Referenced:

Stop the browser "throbber of doom" while loading comet/server push iframe