title: What is the equivalent of this in a pure JavaScript structure? This sends values to the server side
body: <p>This script is designed to get the values from the inputs and send it by ajax to x.php as POST data to be echo by x.php. This works perfectly but I want to convert </p>
  
  <p>this jQuery structure to a pure JavaScript structure so in other words how can I send a basic JS Object contents as POST data by AJAX to be echo by x.php</p>
  
  <p><strong>jQuery structure(works*)</strong></p>
  
  <p><strong>index.php</strong></p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
  $(document).ready(function(){
  
    $('#send').click(function(){
  //Var structure
  var first_name= $('#first_name').val();
  var last_name= $('#last_name').val();
  
  //Data var
  var data={
        first_name: first_name,
        last_name: last_name
  }
  
  
  //Success var
  var success= function(response){
     $('.output-container').html(response);
  }
  
  //Request
      $.ajax({
        data: data,
        method: 'POST',
        url: 'x',
        success: success
      });
    });
  });
  
  &lt;/script&gt;
  
  &lt;input id='first_name' type='text' value='John'&gt;
  &lt;input id='last_name' type='text' value='Doe'&gt;
  
  &lt;button id='send'&gt;Send&lt;/button&gt;
  
  &lt;div class='output-container'&gt;&lt;div&gt;
  </code></pre>
  
  <p><strong>JavaScript structure(Failed attempt*)</strong></p>
  
  <p><strong>index.php</strong></p>
  
  <pre><code>&lt;script&gt;
  document.addEventListener('DOMContentLoaded', function(){
  
  var execute_sendAjax = document.getElementById('send');
    execute_sendAjax.addEventListener("click", executeAjax);
  
  var xhr= new XMLHttpRequest();
  xhr.onreadystatechange = function(){
      if(xhr.readyState === 4){
          document.getElementsByClassName('output-container')[0].innerHTML= xhr.responseText;
      }
  };
  
  function executeAjax(){
  
    //Var structrue
    var first_name=  document.getElementById('first_name').value;
    var last_name=  document.getElementById('last_name').value;
  
  //Data var
  var data={
    first_name: first_name,
    last_name: last_name
  }
  
      xhr.open('POST','x');
      xhr.send();
  }
  });
  &lt;/script&gt;
  
  &lt;input id='first_name' type='text' value='John'&gt;
  &lt;input id='last_name' type='text' value='Doe'&gt;
  
  &lt;button id='send'&gt;Send&lt;/button&gt;
  
  &lt;div class='output-container'&gt;&lt;div&gt;
  </code></pre>
  
  <p><strong>x.php</strong></p>
  
  <pre><code>&lt;?php
  
  $first_name=$_POST['first_name'];
  $last_name=$_POST['last_name'];
  
  ?&gt;
  
  &lt;h1&gt;&lt;?php echo $first_name; ?&gt;&lt;/h1&gt;
  &lt;/h1&gt;&lt;?php echo $last_name; ?&gt;&lt;/h1&gt;
  </code></pre>
  
  <p>In the pure JS structure I don't know where to go from there that's where I'm getting stuck at.</p>
  
  <p><strong>Recent findings UPDATED*</strong></p>
  
  <p>After doing some more research(<a href="http://www.developphp.com/video/JavaScript/Ajax-Post-to-PHP-File-XMLHttpRequest-Object-Return-Data-Tutorial" rel="nofollow noreferrer">Link</a>) I found out that <em>application/x-www-form-urlencoded</em> is another way to encode as POST data but I had to avoid using a JS object because it does not work with a normal JS object. I'm still looking for a way that I can use as a JS object.</p>
  
  <pre><code>&lt;script&gt;
  document.addEventListener('DOMContentLoaded', function(){
  
  var execute_sendAjax = document.getElementById('send');
    execute_sendAjax.addEventListener("click", executeAjax);
  
  var xhr= new XMLHttpRequest();
  xhr.onreadystatechange = function(){
  
      if(xhr.readyState === 4){
          document.getElementsByClassName('output-container')[0].innerHTML= xhr.responseText;
      }
  };
  
  function executeAjax(){
  
    //Var structrue
    var first_name=  document.getElementById('first_name').value;
    var last_name=  document.getElementById('last_name').value;
  
  //Data var
  var data = "first_name="+first_name+"&amp;last_name="+last_name;
  
  /*var data={
    first_name: first_name,
    last_name: last_name
  }*/
  
      xhr.open('POST','x');
      xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //&lt;--I notice this makes it encoded to be used as POST data
      xhr.send(data);
  }
  });
  &lt;/script&gt;
  
  &lt;input id='first_name' type='text' value='John'&gt;
  &lt;input id='last_name' type='text' value='Doe'&gt;
  
  &lt;button id='send'&gt;Send&lt;/button&gt;
  
  &lt;div class='output-container'&gt;&lt;div&gt;
  </code></pre>