title: XMLHttpRequest response null
body: <p>Hi I'm new to web development. I have three files, index.html, myscript.js and server.js. A button on index.html calls the messageServer function in myscript.js which sends an XMLHttpRequest to server.js running Express on Node. The server receives the request but the response in myscript.js is always null. The readyState goes 1 and then 4. Why is it null? Thanks in advance<br>
  Edit: the response status code is 0<br>
  index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title id="title"&gt;Page Title&lt;/title&gt;
          &lt;script src="myscript.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1 id="header"&gt;Header&lt;/h1&gt;
          &lt;form&gt;
              &lt;input type="button" value="Message Server" onclick="messageServer();"&gt;
          &lt;/form&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>myscript.js</p>
  
  <pre><code>function messageServer() {
      const xhr = new XMLHttpRequest();
      const url = 'http://localhost:8888/';
  
      xhr.responseType = 'json';
      xhr.onreadystatechange = () =&gt; {
  
          log("Ready state: " + xhr.readyState + ", response: " + xhr.response);
  
          if(xhr.readyState === XMLHttpRequest.DONE) {
              return xhr.response;
          }
      };
  
      xhr.open('GET', url);
      xhr.send();
  }
  </code></pre>
  
  <p>and server.js</p>
  
  <pre><code>const express = require('express');
  const app = express();
  
  const port = 8888;
  
  let requestCount = 1;
  
  app.get('/', (req, res, next) =&gt; {
      console.log('Received get request ' + requestCount);
      ++requestCount;
      res.send(JSON.stringify({myKey: 'myValue'}));
  });
  
  app.listen(port);
  </code></pre>