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?

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?

• javascript
• jquery
• ajax
• xmlhttprequest

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

4 Answers 4

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 et/server push iframe

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

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>

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>