I have 10 divs on my page and each div will render its own ajax request when the page loads. I know i can make max 2 ajax requests and then i have to wait (based on the browser) before the next request gets fired. I was wondering what will be the best way to design such a page.
Should i create ajax request inside the divs so that i can pass the div as a context to the ajax reponse? something like this:
<div id="request1">
make an ajax request
</div>
<div id="request2">
make an ajax request
</div>
and so on......
is there any chance that result may get mixed up and wrong div will render the result from the different request?
--Edit--
I cannot make a single call as they all make calls to separate service and that service may or may not be available.
Why don't you send only one ajax request when the page loads, and let your server side script return the data needed for the 10 divs in form of json? That would reduce the number of requests sent to the server and the work would be a lot cleaner as well.
Edit : ok since this is no longer and option. You can queue the requests one after another, if each request you are sending, depends on each other (for eg: you might set a flag in the first request, which again gets check in a later request) you can queue them. I have been using this plugin for quite a while now, and it has come in handy)
You might be able to use in your case so check it out. http://www.protofunc.com/scripts/jquery/ajaxManager/
AJAX is Asynchronous, that way, if you call 10 AJAX requests using either $.get, $.post or $.ajax, those requests will fire independently without waiting for the previous ones. So unless you have a special requirements that need to avoid that, just go ahead