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?

I have no clue if this is related, but have you tried on a different browser? — Mike Cole, Mar 25 '11 at 20:52
Looks like my previous statement was untrue; upon further inspection it only happens in google chrome. Any ideas? — meta.matt, Mar 29 '11 at 23:15

score 4 · Accepted Answer · edited May 23 '17 at 11:50

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

score 0 · Answer 2 · answered Mar 25 '11 at 20:53

0

I think that this should default to true, but try adding async: true to your ajax json parameter.

answered Mar 25 '11 at 20:53

RSG

7,013
6
36
51

score 0 · Answer 3 · answered Mar 25 '11 at 23:45

0

Does the code below work as expected?

 <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>

answered Mar 25 '11 at 23:45

Francesco Terenzani

1,391
7
14

Unfortunately, it does not. Same issue. Thanks for the suggestion though. Also, please see my latest EDIT – meta.matt Mar 26 '11 at 00:11

score -4 · Answer 4 · answered Mar 25 '11 at 20:52

-4

May want to try and Add async:true

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

answered Mar 25 '11 at 20:52

Chris Kooken

32,730
15
85
123

2

async is true by default. Why would that help? – JB Nizet Mar 25 '11 at 20:55
@Chris Kooken as JB Nizet said, async is true by default. To be sure, I did try that, and still have the same issue. Any other ideas? – meta.matt Mar 25 '11 at 21:26
I don't know why this has two up votes, since (as other's have said as well) async is true by default, and my posted code clearly shows that async is not set to false. Please see my own posted answer for solution to this issue. Thanks for looking. – meta.matt Mar 29 '11 at 23:50

Simple ajax call seems to be blocking

4 Answers4

Linked