title: Load multiple $.ajax calls simultaneously
body: <p>I have 3 $.ajax requests in a page that gets JSON content from the server and fills up three separate divs. The content in these three divs is pretty large so it takes a while to load all the content. Also these ajax calls are called on page load, so something like:</p>
  
  <pre><code> $(document).ready(function () {
          $.ajax({
              type: 'POST',
              url: "/controller/action",
              dataType: 'json',
              traditional: true,
              async: false,
              success: function (data) {
                  //fill content in div 1
              }
          });
  
          $.ajax({
              type: 'POST',
              url: "/controller/action2",
              dataType: 'json',
              traditional: true,
              async: false,
              success: function (data) {
                  //fill content in div 2
              }
          });
  
          $.ajax({
              type: 'POST',
              url: "/controller/action3",
              dataType: 'json',
              traditional: true,
              async: false,
              success: function (data) {
                  //fill content in div 3
              }
          });
  });
  </code></pre>
  
  <p>My big questions are:</p>
  
  <ol>
  <li>How can I make the page load first (and elements such as links functional)</li>
  <li>After that load these three ajax scripts at the same time. So instead of calling ajax1, ajax2, ajax3; it calls them all at the same time simultaneously.</li>
  </ol>
  
  <p>Thanks a lot!
  Clockwork</p>