title: HTML AJAX sending empty object to the backend
body: <p>This is a node/express/pug project. The front end renders fine but using vanilla ajax sends an empty object.</p>
  
  <p>Basically, it's a single input field with an event listener. When the field submits (changes), it takes the field data, sends it to express. The express router does nothing at this point except pull the sent data (req.body) and send it back in json form. </p>
  
  <p>pug template</p>
  
  <pre><code>block content
    div.container
      div#enter.row
        input#entry.twelve.columns.form-control(type='text', placeholder='pste yr bkmk' name='bkmk')
      hr
      div#show.row
  </code></pre>
  
  <p>rendered html</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row" id="enter"&gt;
          &lt;input class="twelve columns form-control" id="entry" type="text" placeholder="pste yr bkmk" name="bkmk"&gt;
          &lt;button type="submit"&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;hr&gt;
      &lt;div class="row" id="show"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="/js/script.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>const ENTRY = document.getElementById("entry")
  const SHOW = document.querySelector("div#show")
  
  ENTRY.addEventListener("change", function () {
      addbkmk(this.value);
  })
  
  function addbkmk(incoming) {
      let XHR = new XMLHttpRequest();
      console.log(`incoming: ${incoming}`);             // COMMENT ONE
      XHR.onreadystatechange = function() {
          if (this.readyState == 4 &amp;&amp; this.status == 200) {
              ENTRY.value = ''
              let htmlP = document.createElement('p'); 
              htmlP.appendChild(document.createTextNode(this.responseText));
              SHOW.appendChild(htmlP);
          }
      };
      XHR.open("POST", "/", true);
      XHR.send({"incoming": incoming});
      console.log(SHOW.children.length);
  }
  </code></pre>
  
  <p>express router.post</p>
  
  <pre><code>router.post('/', function(req, res, next) {
    console.log(`req.body: ${req.body}`);               // COMMENT TWO
    res.status(200).json(req.body);
  });
  </code></pre>
  
  <p><code>COMMENT ONE</code> in the above source shows the inputted text. <code>COMMENT TWO</code> shows an empty object. </p>
  
  <p>What's missing? Why isn't it sending the data</p>