IE ajax interrupting issue

Question

I am experiencing this issue with IE7 but not in Chrome or firefox:

I have several page elements that are loaded via ajax. This elements are dynamically displayed on the page as hyperlinks to another page. As I have many such elements loading, I can sometimes see the progress of the page load (i.e. I can see the elements getting populated one by one).

The problem is: in IE when I try to click on the hyperlink of one of the dynamically loaded elements before all the ajax requests have completed, the page transfer seems to just halt until all the elements have loaded (and then executes once all the loading is done). In other browsers, however, clicking on one of the links while the page is still loading immediately executes the hyperlink (which is the desired behavior).

Has anyone seen this before? How could I get IE to respond immediately to the link clicks?

Answer 1

Hmm... I wonder if IE treats all HTTP request the same as AJAX connections?

Each browser allows at most 2 AJAX connections to be made to a single domain. If 2 AJAX connections are already opened, no other AJAX requests will be fired until at least one of them finished.

Based on what you described, seems like IE won't allow you to make any additional HTTP connections till all your AJAX connections are done?

[Note to self: Need to Google something to support what I said.]

Hm. To solve the problem, how does this sound?

1. When making AJAX calls, store the XmlHttpRequest objects the code creates somewhere. (An array/object maybe?)
2. Attach an onclick event to the link, and when the link is clicked, loop through the list of XmlHttpRequest in Step #1 and call xmlHttpRequest.abort() to cancel all the calls. (Link to API on W3C.)

Side Note: I wonder what is the reason behind this odd behavior in IE... wondering if IE has trouble garbage collection all the XmlHttpRequest objects after the browser navigates away to another page?