Отправить Ajax запрос с FormData

Question

Я хотел бы заменить следующий jquery Ajax запрос на Vanilla JS

// Working jQuery
$.ajax({
    url: "https://reqres.in/api/register",
    type: "POST",
    data: {
    "email": "eve.holt@reqres.in",
    "password": "pistol"
},
    success: function(response){
        console.log('jQuery success', response);
    }
});

Вот рабочая ваниль JS, которая делает то же самое:

// Working VanillaJS
var xhr = new XMLHttpRequest();
xhr.open("POST", 'https://reqres.in/api/register', true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() { 
    if (this.readyState !== XMLHttpRequest.DONE) return
    if (this.status === 200) 
        console.log('Vanilla JS success', this.responseText)
    else
        console.log('Vanilla JS fails', this.responseText)
}
xhr.send("email=eve.holt@reqres.in&password=pistol");

Для удобства я попытался использовать FormData для подготовки данных. Но он больше не работает, кажется, что сервер не получает данные:

// Non working VanillaJS with FormData
var formData= new FormData();
formData.append('email', 'eve.holt@reqres.in');
formData.append('password', 'pistol');

var xhr2 = new XMLHttpRequest();
xhr2.open("POST", 'https://reqres.in/api/register', true);
xhr2.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr2.onreadystatechange = function() { 
    if (this.readyState !== XMLHttpRequest.DONE) return
    if (this.status === 200) 
        console.log('FormData success', this.responseText)
    else
        console.log('FormData fails', this.responseText)
}
xhr2.send(formData);

Я застрял на некоторое время, любая помощь будет приветствоваться.

Вот JSFiddle с тремя кодами выше: https://jsfiddle.net/Imabot/0a8qg1fs/13/