AJAXはjQueryで動作しますが、バニラでは動作しません。JS

Question

私はユーザ名フィールドがぼやけているか、フォーカスが外れているときに、入力されたユーザ名がすでにデータベースに記録されているかを確認します。問題は、jQueryのAJAXは動作しますが、vanilla JSでは動作しません。私は、自分のコードのどの部分または一部が間違っているのかを知る必要があります。

HTML

<form action="process.php" method="post"> 
    <input class="username" type="text" name="username" placeholder="Enter username" autocomplete="off"> 
    <span class="uname_notice"></span><br> 
    <input type="submit" value="Submit"> 
</form> 

jQueryの

$('.username').blur(function() { 
    var username = $(this).val(); 

    $.ajax({ 
     url: 'process.php', 
     type: 'post', 
     data: {username: username}, 
     success: function(responseText) { 
      $('.uname_notice').text(responseText); 
     } 
    }) 
}); 

バニラJS

document.querySelector('.username').onblur = function() { 
    var xhr = new XMLHttpRequest(); 

    xhr.open("POST", "process.php", true); 
    xhr.onreadystatechange = function() { 
     if(xhr.readyState == 4 && xhr.status == 200) { 
      document.querySelector('.uname_notice').textContent = xhr.responseText; 
     } 
    } 
    xhr.send(); 
} 

Answer 1

HTTPリクエストと一緒にデータを送信します。

document.querySelector('.username').onblur = function() { 
    var xhr = new XMLHttpRequest(); 

    var data = new FormData(); 
    var username = document.getElementsByClassName('username')[0].value; 
    data.append('username', username); 
    xhr.open("POST", "process.php", true); 
    xhr.onreadystatechange = function() { 
     if(xhr.readyState == 4 && xhr.status == 200) { 
      document.querySelector('.uname_notice').textContent = xhr.responseText; 
     } 
    } 
    xhr.send(data); 
} 

Answer 2

投稿値を指定するのを忘れました。

document.querySelector('.username').onblur = function() { 

    var params = 'username='+this.value; 

    var xhr = new XMLHttpRequest(); 

    xhr.open("POST", "process.php", true); 
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;"); 
    xhr.setRequestHeader("Content-length", params.length); 
    xhr.setRequestHeader("Connection", "close"); 
    xhr.onreadystatechange = function() { 
     if(xhr.readyState == 4 && xhr.status == 200) { 
      document.querySelector('.uname_notice').textContent = xhr.responseText; 
     } 
    }; 
    xhr.send(params); 
};