0

I'm pretty new to Ajax, but I thought the point of using it was the 'Asynchronous' part. Unfortunately, I seem to be stuck in synchronous hell.

Early in my page, a number of elements are created, each with a unique ID.

At the very end of my page, using jQuery I iterate over each element and issue an ajax() call (where I explicitly set 'async' to true!). Currently on complete, each Ajax call just populates the corresponding element with some text output. Eventually it will be an IMG.

What occurs is that I get the "busy" mouse cursor on the page and certain elements do not populate until all (17) XHR requests come back.

Here's my jQuery call:

jQuery('.ajax-item').each(function(index){
    $item = jQuery(this);
    ID = $item.attr('id');

    //$item.load(WPGlobals.ajaxurl, { 'action' : 'my-action', 'ID' : ID });
    jQuery.ajax({
        url : WPGlobals.ajaxurl,
        type : 'POST',
        async : true,
        data : { 'action' : 'my-action', 'ID' : ID },
        success : function(response){ $item.html(response) }
    });
});

Looking at this code (above) you will note that this is a WordPress site (though I don't know what that would have to do with anything), and that I also tried the simpler load() method, and switched to ajax() so I could force async : true in case there was any funny messing around with the Globals as a result of some WP weirdness.

Am I going about this the right way? Shouldn't my page load regardless of the AJAX and then those items will just lazily populate when the XHRs come in?

EDIT - I just noticed that my logic is messed in the static call; I probably need a closure in order to get $item to scope properly, but that's neither here nor there as far as the async issue - it still fires off 17 XHRs and waits for them all to come home before the page load is complete.

Tom Auger
  • 19,421
  • 22
  • 81
  • 104
  • 2
    Seventeen XHR requests in one page? Asynchronous or not, you should try to find a way to combine some of those. If two or more AJAX requests are going to the same script with different parameters, you should be able to rewrite your server-side code to deliver them all on one request and then parse them client-side with jQuery. – Blazemonger Nov 14 '11 at 20:08
  • You might consider changing your code to first iterate over all of the datafields, send them all at once to the server, and then process the returned data. More than likely it is the combination of the $.each loop and accessing the DOM that is causing the issue not the ajax call. Accessing the dom (through grabbing each element, changing the contents of the elements, or looking at attribute, etc) will cause slowness issues in your page. – scrappedcola Nov 14 '11 at 20:08

1 Answers1

4

I believe you are hitting a maximum number of requests limit, and so your browser is waiting until more threads become available. Check out this thread: How many concurrent AJAX (XmlHttpRequest) requests are allowed in popular browsers?

Community
  • 1
  • 1
Jake Feasel
  • 16,785
  • 5
  • 53
  • 66
  • Ha! Good one Jake. I'm almost certain that this is the issue. It never occurred to me there might be a limit to how many threads could go out. I'm going to need to rethink my solution if that's the case as I'd like each element's content to display (eventually "fade in") as soon as it loads. If I batch all the elements into a single Ajax request, then I'm left with waiting until they ALL load before displaying them. Which will feel like my page loads in two distinct stages, rather than a continuous, gradual lazy load... – Tom Auger Nov 14 '11 at 20:24
  • Well, that linked thread has a number of possible solutions that may work for you. – Jake Feasel Nov 14 '11 at 20:48