Ajax requests ASAP right before </body>, or on document ready too?
Best practice here is to start the Ajax request as soon as possible, but start modifying the DOM only when the document is ready (DOMContentLoaded). To do that, you might use jQuerys Deferred objects which are wired up with jQuerys extended jXHR objects.
<script> var req = $.ajax({}), docReady = jQuery.Deferred(); $(function() { docReady.resolve(); }); $.when( req, docReady ).done(function( data ) { // read the returned data and modify the DOM });</script>It would be a waste of time to wait for starting the request until the DOM is ready. The XHR request has no business and interest in whats going on with the DOM.
It just makes more sense to decouple those two things entirely. If for some reason the DOM needs a very long time before its ready, you didn't waste the time to let the HTTP request run and collect its data. The other way around, if the request is very slow, you would waste time aswell. So your current snippets are like
DOM ready -> XHR request -> Do something usefulWhereas my example is like
DOM ready XHR request -> Do something useful as soon as the DOM and request are ready
Since $.ajax doesn't depend on the DOM in any way, there's no reason why you can't call it as soon as possible. In that case, I would put it in the <head> section and call it as soon as its dependent script/script files are done (meaning at least jQuery library). Firing the AJAX request sooner means the response has the ability to come back sooner - it may not be the case that it actually happens, but that's not important.
Checking to sure the DOM is ready inside of success is necessary for you, and it's the quickest way for your code to execute. Using $.when( req ).done(function () {}) creates 2 more jQuery method calls that may or may not significantly delay the execution of your success code - it will delay it, but it will probably be insignificant.
Also, your example where you use document.ready in your success method creates the possibility that the DOM is ready and can execute immediately (in the case that the AJAX request completes before the DOM is fully loaded, which I wouldn't expect). In jAndy's example where document.ready runs immediately after $.ajax, it guarantees that it will bind an event handler for the document being ready...which means it has to be stored (causing the DOM to be ready later) and then looked up later when the event occurs, and executed. Again, the difference is possibility vs. guarantee...and all is probably insignificant (as long as you don't use your second example).
In this simple example, both versions should do. Which one is better depends on your page and other scripts.If your script is a little more complex, and you need to pass data to the ajax-request which has to be fetched from the page, and your page is not ready at that moment - you will have an error.
Another thing is, that any script on your page will block the browser while it is processed, so a more complex code without doc-ready around it may lead to a short stop in the page-render-process.In most cases I prefer to let the browser to load all HTML, CSS and the JS - and after that start my progressive enhancement and loading of additional content.
But again - in this simple case - I don't see much of a difference.