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);
?>