POST method to send form data with AJAX without JQUERY [duplicate]

Hi, I have a script in js that sends the form data from a page to the server and it works well with a Jquery function but I would like to be able to do it without the use of Jquery.

script with jQuery (works)

$("#contact-form").on("submit", function(event) {
   event.preventDefault();
   $.ajax({
     type: "POST",
     url: "php/email-sender.php",
     data: {
       name: $("#contact-form #name").val(),
       email: $("#contact-form #email").val(),
       subject: $("#contact-form #subject").val(),
       message: $("#contact-form #message").val()
     },
     dataType: "json",
     success: function(data) {
    console.log(“success”);
       } else {
              console.log(“error”);
       }
     },
     error: function() {
         console.log(“error”);
     }
   });
 });

PHP script that receives the data

session_cache_limiter('nocache');    
header('Expires: ' . gmdate('r', 0));    
header('Content-type: application/json');      

$Recipient = '[email protected]'; // <-- Set your email here    

if($Recipient) {      

    $Name = $_POST['name'];  
    $Email = $_POST['email'];  
    $Subject = $_POST['subject'];  
    $Message = $_POST['message'];  
    if (isset($_POST['category'])) {  
        $Category = $_POST['category'];  
    }

    $Email_body = "";    
    if (isset($_POST['category'])) {  
        $Email_body .= "From: " . $Name . "\n" .  
        "Email: " . $Email . "\n" .  
        "Subject: " . $Subject . "\n" .  
        "Message: " . $Message . "\n" .  
        "Category: " . $Category . "\n";  
    } else {  
        $Email_body .= "From: " . $Name . "\n" .  
        "Email: " . $Email . "\n" .  
        "Subject: " . $Subject . "\n" .  
        "Message: " . $Message . "\n" .   
        "Enviado el " . date('d/m/Y', time());  
    }   

    $Email_headers = "";  
    $Email_headers .= 'From: ' . $Name . ' <' . $Email . '>' . "\r\n".  
    "Reply-To: " .  $Email . "\r\n";  

    $sent = mail($Recipient, $Subject, $Email_body, $Email_headers);  

    if ($sent){   
        $emailResult = array ('sent'=>'yes');  
    } else{  
        $emailResult = array ('sent'=>'no');  
    }  

    echo json_encode($emailResult);  

} else {  

    $emailResult = array ('sent'=>'no');  
    echo json_encode($emailResult);  

} 

Associated HTML

<form id="contact-form" role="form">
      <div class="form-group has-feedback">
        <input type="text" class="form-control" id="name" name="name" placeholder="Nombre" required>
      </div>
      <div class="form-group has-feedback">
        <input type="email" class="form-control" id="email" name="email" placeholder="Correo electronico" required>
      </div>
      <div class="form-group has-feedback">
        <input type="text" class="form-control" id="subject" name="subject" placeholder="Asunto" required>
      </div>
      <div class="form-group has-feedback">
        <textarea class="box-msg" rows="6" id="message" name="message"> </textarea>
      </div>
      <div class="form-group has-feedback">
        <input type="submit" value="Enviar" class="submit-button btn btn-default">
      </div>
</form>

First attempt without jQuery

// Submit contactForm START
const contactForm = document.getElementById("contact-form");

contactForm.addEventListener("submit", function(event) {
  event.preventDefault();
  var request = new XMLHttpRequest();
  request.open("POST", "/php/email-sender.php", true);
  request.setRequestHeader(
    "Content-Type",
    "application/x-www-form-urlencoded; charset=UTF-8"
  );

  request.onreadystatechange = function() {
    if (request.readyState == XMLHttpRequest.DONE) {
      // request end.
      if (request.status == 200) {
        // success START
        console.log(request.response);
        // success END
      } else {
        // error START
        console.log("error");
        // error END
      }
    }
  };

  var formData = new FormData();
  data.append("name", document.getElementById("name").value);
  data.append("email", document.getElementById("email").value);
  data.append("subject", document.getElementById("subject").value);
  data.append("message", document.getElementById("message").value);
  request.send(formData);
});

second attempt without jQuery

var contactForm = document.getElementById("contact-form");

contactForm.addEventListener("submit", function(event) {
  event.preventDefault();
  var request = new XMLHttpRequest();
  request.open("POST", "/php/email-sender.php", true);
  request.setRequestHeader("Content-Type", "application/json; charset=UTF-8");

  request.onreadystatechange = function() {
    if (request.readyState == XMLHttpRequest.DONE) {
      // request end.
      if (request.status == 200) {
        // success START
        console.log(request.response);
        // success END
      } else {
        // error START
        console.log("error");
        // error END
      }
    }
  };

  var data = {
    name: document.getElementById("name").value,
    email: document.getElementById("email").value,
    subject: document.getElementById("subject").value,
    message: document.getElementById("message").value
  };
  request.send(JSON.stringify(data));
});

none of the 2 attempts are successful, thanks in advance.