Ajax初心者です。JQueryからAjaxを始めるとどうしてもおまじない感がでてしまい、ビハインドロジックを理解できないと思っているため、Ajaxをjavascriptで書いてみています。jsonでファイルを渡しているのですが、うまくいきません。(ステータスは200でPOSTで送信できているのですが、receive.php側の$_POSTに何も入っていません。。)もしよろしければご指導いただければと思います。

ajax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax post</title>
</head>
<body>
    <input id="one" type="text" value="aaa">
    <input id="two" type="text">
    <input id="three" type="text">
    <button id="submit">送信</button>
    <span id="output"></span>
<script>
    var button = document.getElementById('submit');

    button.addEventListener('click', function(){
    var one = document.getElementById('one').value;
    var two = document.getElementById('two').value;
    var three = document.getElementById('three').value;
    console.log({one:one, two:two, three:three});

    var text = JSON.stringify({one:one, two:two, three:three});
    var xhr = new XMLHttpRequest();
    if((xhr.status == 200) && (xhr.readyState == 4)){
        console.log(xhr.responseText);
    }

    xhr.open('post', 'receive.php');
    xhr.send(text);
    },false);

</script>
</body>
</html>

receive.php

<?php 
    var_dump($_POST);
?>