title: XMLHttpRequest - returns data in console.log but not in the function return
body: <p>I am a little confused why the <code>console.log</code> (at the bottom) returns the data as I expected, but the <code>return optiondata</code> does not.</p>
  
  <pre><code>function populate_selectbox()
  {               
  var ajaxRequest;
  
  try {
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
  } catch (e) {
      // Internet Explorer Browsers
      try {
          ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
          try {
              ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (e) {
          // Something went wrong
              alert("Your browser broke!");
              return false;
          }
      }
  }
  
  var queryString = "?callFunction=get_all_data";
  //console.log(queryString);
  
  ajaxRequest.open("GET", "php/shares.php" + queryString, true);
  ajaxRequest.send(null);
  
  var optiondata ="";
  
  // Create a function that will receive data sent from the server
  ajaxRequest.onreadystatechange = function() 
  {
  
      if (ajaxRequest.readyState == 4 &amp;&amp; ajaxRequest.status == 200) 
      {
          //console.log("IF....");
  
          var resp = JSON.parse(ajaxRequest.responseText);
          //console.log(resp)
  
          for (var i = 0; i &lt; resp.data.length; i++) 
          {
              if(i === resp.data.length -1)
              {
                  optiondata += "'"+resp.data[i].name+"'"; //For the last name in the loop
              }
              else
              {
                  optiondata += "'"+resp.data[i].name+"',";
              }
  
          }
  
          console.log(optiondata); //This works
          return optiondata; //This returns undefines
      }    
  };  
  }
  </code></pre>
  
  <p><strong>Question : Why is the result different?</strong></p>