title: xhttp.open() onreadystatechange not firing without an alert after send()
body: <p>I'm trying to get a json string from my server and parse it. Everything is working except my onreadystatechange only triggers if I put an alert after the .send() method. Without the alert the server doesn't always get a "GET" request. The only way I found to fix the problem is to turn the async to false on the open(). I'd prefer if the code was written async.</p>
  
  <pre><code>function collectData(){
      var user = document.forms["search"]["user"].value;
      if (user !== ""){
          var url = 'http://localhost:3000/users/'.concat('', user);
          var xhttp;
          if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
              xhttp=new XMLHttpRequest();
          }
          else{// code for IE6, IE5
              xhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
          xhttp.onreadystatechange = function() {
              if (this.readyState == 4 &amp;&amp; (this.status == 200 || this.status == 304)) {
                  var response = JSON.parse(xhttp.responseText);
                  alert(response.data[0].id);
              }
          };
          xhttp.open("GET", url, true);
          xhttp.send();
          alert(url);
      } else {
          alert("Name must be filled out");
          return false;
      }
  }
  </code></pre>
  
  <p>I just want to be able to alert for response.data[0].id</p>
  
  <p>edit: adding more code to recreate scenario. </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;link rel="stylesheet" href="css/main.css"&gt;
      &lt;script src="https://code.jquery.com/jquery-3.4.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/script.js"&gt;&lt;/script&gt;
      &lt;title&gt;Exsisting Customer&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form name="search" onsubmit="return collectData()"&gt;
          Search customer:&lt;br&gt;
          &lt;input type="text" name="user"&gt;&lt;br&gt;
          &lt;input type="submit" value="Submit"&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>