title: Understanding Ajax call flow
body: <p>I am a bit confused in the call flow of Ajax, Could some one help me please?</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div id="myDiv"&gt;&lt;h2&gt;Let AJAX change this text&lt;/h2&gt;&lt;/div&gt;
  &lt;button type="button" onclick="myFunction()"&gt;Change Content&lt;/button&gt;
  </code></pre>
  
  <p>My JavaScript:</p>
  
  <pre><code>var xmlhttp;
  
  function loadXMLDoc(url, cfunc) {
      alert("4");
      if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp = new XMLHttpRequest();
      }
      else { // code for IE6, IE5
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      alert("5");
      xmlhttp.onreadystatechange = cfunc;
      alert("6");
      xmlhttp.open("GET", url, true);
      xmlhttp.send();
  }
  
  function myFunction() {
      alert("1");
      loadXMLDoc("ajax_info.txt", function() {
          alert("2");
          if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200) {
              alert("3");
              document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
          }
      });
  }​
  </code></pre>
  
  <p>​</p>
  
  <p>According to me the Alert box sequence should be </p>
  
  <blockquote>
    <p>1 2 3 4 5 6</p>
  </blockquote>
  
  <p>But it is  </p>
  
  <blockquote>
    <p>1456222223</p>
  </blockquote>
  
  <p>Could some one please explain me why is the function being called 1'st. I was in the impression untill the parameter values are ready the function cannot be called.</p>