title: Why is writing to the document being delayed by AJAX in for loop?
body: <pre><code>for (var i = 0; i &lt; 100; i++) {
    var request = new XMLHttpRequest();
    request.open("GET", "data.txt", false);
    request.send();
  
    if(request.status===200) {
      console.log(request);
      document.write(request.responseText)
    }
  }
  </code></pre>
  
  <p>I have a simple for loop, which basically loops through an AJAX request. If the request status is successful, it will write the object to the console, and also write the contents (data.txt) to the document. </p>
  
  <p>Where I am confused is that if I open up the console to see the order in which everything is loaded, the browser seems to load the 100 ajax objects in the console, before printing the 100 "Hello Worlds" (data.txt) to the document. In my mind, this is unusual considering that I think that the loop should be doing something like this:</p>
  
  <pre><code>send AJAX request
  if request successful then write to console to AJAX request AND write to document
  repeat.
  </code></pre>
  
  <p>Hence, in my mind for every one AJAX request it writes, it should be printing one Hello World per object being printed to the console, but instead prints the 100 AJAX objects to the console, then prints 100 "Hello World"'s to the browser. Can someone explain to me why this is? </p>