AJAX POST请求PHP内置服务器报错：Invalid request与net::ERR_EMPTY_RESPONSE

1. XMLHttpRequest.open() 参数顺序完全错误 #

XMLHttpRequest.open()的正确语法是：

xhttp.open(method, url, async);

你写的xhttp.open("test.php", "POST", true)把请求URL和请求方法的顺序搞反了，这直接导致HTTP请求的起始行格式畸形，服务器无法识别，因此抛出"Invalid request (Malformed HTTP request)"错误，请求直接失败，自然不会触发onload事件。

修复后的open代码：

xhttp.open("POST", "test.php", true);

2. 阻止表单默认提交行为（若按钮为submit类型） #

如果你的提交按钮是<button type="submit">或<input type="submit">，点击时会触发表单默认提交动作，页面刷新会直接中断AJAX请求，需要在事件处理中阻止默认行为：

submit.addEventListener('click', (event) => {
    event.preventDefault(); // 阻止默认提交
    // 后续AJAX代码...
});

3. PHP无法通过$_POST接收JSON格式数据 #

你设置了请求头Content-type: application/json，但PHP的$_POST仅处理application/x-www-form-urlencoded或multipart/form-data编码的请求体。要接收JSON数据，需读取原始请求流再解析：

修改后的test.php代码：

<?php
// 读取原始JSON请求体
$jsonData = file_get_contents('php://input');
// 解析为关联数组
$data = json_decode($jsonData, true);

echo "foo";
var_dump($data); // 输出：array(1) { ["name"]=> string(3) "foo" }
?>

完整修复后的JS代码 #

window.onload = () => {
    const submit = document.getElementById('submit');
    submit.addEventListener('click', (event) => {
        event.preventDefault(); // 阻止默认提交行为
        const xhttp = new XMLHttpRequest();
        xhttp.onload = function() {
            console.log(this.responseText); // 先查看返回结果再跳转
            window.location.replace("test.php");
        };
        // 修正open方法参数顺序
        xhttp.open("POST", "test.php", true);
        xhttp.setRequestHeader('Content-type', 'application/json; charset=utf-8');
        const data = {'name':'foo'};
        xhttp.send(JSON.stringify(data));
    });
}

内容的提问来源于stack exchange，提问作者Abdullah Omar Nasseef