title: JavaScript (Vanilla, no jQuery) - Function with *synchronous* AJAX (XMLHttpRequest) call behaves the same as async?
body: <p>I have a file, <code>tst.html</code> with the content:</p>
  
  <pre><code>part two
  </code></pre>
  
  <p><em>(no markup or anything else, just for demonstration)</em></p>
  
  <p>And then load said file, via <strong><em>synchronous</em></strong> AJAX (<code>XMLHttpRequest</code>):</p>
  
  <pre><code>function someFunc() {
      var str = 'part one_';
  
      var x = new XMLHttpRequest();
      x.open('GET', 'tst.html', false);    // "false" for synchronous
      x.onreadystatechange = function() {
          if(x.readyState === 4) {
              switch(x.status) {
                  case 200:
                      str += x.responseText.trim();
                      break;
  
                  default:
                      return '';   // Or something
                      break;
              }
          }
      }
      x.send();
  
      str += '_part three';
  
      return str;
  }
  </code></pre>
  
  <p>Calling the function:</p>
  
  <pre><code>alert(someFunc());
  
  // Returns "part one_part two_part three"
  </code></pre>
  
  <p>which is the desired behavior. </p>
  
  <p>But if I put the AJAX call into its own function:</p>
  
  <pre><code>function ajaxCall() {
      var x = new XMLHttpRequest();
      x.open('GET', 'tst.html', false);
      x.onreadystatechange = function() {
          if(x.readyState === 4) {
              switch(x.status) {
                  case 200:
                      return x.responseText.trim();
                      break;
  
                  default:
                      return '';
                      break;
              }
          }
      }
  
      x.send();
  }
  
  function someFunc() {
      var str = 'part one';
  
      str += ajaxCall();
  
      str += 'part three';
  
      return str;
  }
  </code></pre>
  
  <p>And then call it: </p>
  
  <pre><code>alert(someFunc());
  
  // Returns "part one_undefined_part three"
  </code></pre>
  
  <p>The function returns the amalgamated string before the AJAX has a chance to finish, which is identical behavior to its asynchronous cousin.</p>
  
  <p>I've been looking around for something along the lines of "Synchronous AJAX function," but nothing is turning up of any use.</p>
  
  <p>The final use-case of the AJAX call is inside of a recursive set of functions, with further processing dependent on the AJAX return. Something like:</p>
  
  <pre><code>function one(url) {
      var x = new XMLHttpRequest();
      x.open('GET', url, false);
      x.onreadystatechange = function() {
          return two(x.responseText.trim());
      }
      x.send();
  }
  
  function two(str) {
      var output;
  
      output += stuff;
  
      // ... parse through str
      // ... until match found
  
      if(isURL(match)) {                     // If `match` is a URL
          output += one(match);
      }else if(isFormattedString(match)) {   // if `match` is a string
          output += two(match);
      }
  
      output += more stuff;
  
      // More processing of output    
  
      return output;
  }
  
  var final = one(url);
  </code></pre>
  
  <p>In the example above:</p>
  
  <ul>
  <li>the system is always initiated with a URL (<code>one(url)</code>)</li>
  <li><code>one()</code> returns a string, which itself is the opening argument for <code>two(str)</code></li>
  <li><p>Within <code>two()</code>, the parser can encounter either </p>
  
  <ol>
  <li><p>another URL, or </p></li>
  <li><p>a parseable string. </p></li>
  </ol></li>
  <li><p>Depending on which it is, one of the two functions is called</p></li>
  <li>The output is added to the final result of the system</li>
  </ul>
  
  <p>A callback from <code>one()</code> won't work on this either, because I still need to have a final <code>return</code> within <code>two()</code>. </p>
  
  <pre><code>function one(url, callback) {
      // ... AJAX stuff
      {
          callback(two(x.responseText));
      }
  }
  
  function two(str) {
      // ... same as previous
  
      // The following doesn't work, because then `two()` no longer has a `return`
      // ... and any other code (i.e. for !isURL cases) will still continue to execute
      if(isURL(match)) {
          one(match, function(result) {
              output += result;
  
              // ... more processing
  
              return output;
          });
      }else if(...) {
          // ... same as previous
      }
  
      // ... more stuffs
  }
  </code></pre>
  
  <p>The only other thing I'm finding is <a href="https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Deferred#Backwards_and_forwards_compatible_helper" rel="nofollow"><code>deferred</code></a>, but I'm unsure how it would work with this either.</p>
  
  <p>Is there a way to force JavaScript to treat this like other synchronous functions, where the executing code stops until the function is complete? I'm unclear why it doesn't already, with the AJAX request specifically being declared as asynchronous.</p>
  
  <p>Thanks in advance.</p>