POST XMLHttpRequest has a 200 status, but responseText is empty

Question

I'm making a POST XMLHttpRequest to set "getsex" variable for PHP variable $_POST['getsex'] to use in MySQL database. I add onload() to check and see that it's a 200 status. But my page did not change and when I console.log the responseText, it shows an empty string. Below is my full file

<?php
header('Cache-Control: no-cache, no-store, must-revalidate, max-age=100, stale-while-revalidate=300');
ob_start();


$pdo = new PDO('mysql:host=localhost;dbname=xxxxxxxx;charset=utf8mb4', 'xxxxxxxx','xxxxxxxx');
$sex = isset($_POST['getsex']) ? $_POST['getsex'] : '("Both","Male","Female")';
$current_page = isset($_GET['page']) ? $_GET['page'] : 1;
$records_per_page = 10;
$statement = $pdo->query('SELECT COUNT(*) FROM `names` WHERE LEFT(mainname,1) = "A" AND sex IN '.$sex);
$result = $statement->fetch();
$count = $result[0];

function getNameAlphabet($sex) {
function to get the name I need
}
?>
<h1>Name Dictionary</h1>
<hr>
<p> Total number names: <b><?=$count?></b>.</p>
<?php
    echo '<section class="filter-bar" style="user-select: none;">';
    echo '<span>';
    echo '<div class="input-wrapper" id=":0.bf">';
    echo '<input type="checkbox" id="boys" checked name="boys" value="Male">';
    echo '<label class="checkbox-label checkbox-label-boy" for="boys">';
    echo '<a href="javascript:void(0);">Con trai <i class="fa-solid fa-mars fa-lg"></i></a>';
    echo '</label>';
    echo '</div>';
    echo '<div id=":0.gf" class="input-wrapper">';
    echo '<input type="checkbox" id="girls" checked name="girls" value="Female">';
    echo '<label class="checkbox-label checkbox-label-girl" for="girls">';
    echo '<a href="javascript:void(0);">Con gái <i class="fa-solid fa-venus fa-lg"></i></a>';
    echo '</label>';
    echo '</div>';
    echo '<div id=":0.mf" class="input-wrapper">';
    echo '<input type="checkbox" id="neuter" checked name="neuter" value="Both">';
    echo '<label class="checkbox-label checkbox-label-neuter" for="neuter">';
    echo '<a href="javascript:void(0);">Trung tính <i class="fa-solid fa-neuter fa-lg"></i></a>';
    echo '</label>';
    echo '</div>';
    echo '<button id="search123" class="input-wrapper"><i class="fa-solid fa-magnifying-glass fa-xl"></i></button>';
    echo '</span>';
    echo '</section>';
//Get sex function
    echo '<script>';
    echo 'var button = document.querySelector(\'#search123\');';
    echo 'button.addEventListener(\'click\', function() {';
    echo 'var xhr = new XMLHttpRequest();';
    echo 'xhr.open("POST", "/tu-dien-ho-ten-viet-nam/a.php");';
    echo 'var checkboxes = document.querySelectorAll("input[type=checkbox]");';
    echo 'var sexvalues = \'("\';';
    echo 'for (var i = 0; i < checkboxes.length; i++) {';
    echo 'if (checkboxes[i].checked) {';
    echo 'sexvalues += checkboxes[i].value;';
    echo 'sexvalues += \'","\';';
    echo ' }';
    echo '}';
    echo 'var newStr = sexvalues.substring(0, sexvalues.length - 2);';
    echo 'newStr += ")";';
    //echo 'xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");';
    //echo 'xhr.onload = function() {';
    //echo  'if (xhr.readyState === 4 && xhr.status === 200) {';
    //echo 'location.reload();';
    //echo '}};';
    echo 'xhr.responseType = "text";';
    echo 'xhr.onload = function () {';
    echo 'if (xhr.readyState === xhr.DONE && xhr.status === 200) {';
    echo 'console.log(\'Request successful\');';
    echo '} else {';
    echo 'console.log(\'Error: \' + xhr.status);';
    echo '}};';
    echo 'xhr.send(\'getsex=\' + newStr);';
    echo 'console.log(newStr);';
    echo 'console.log(xhr.response);';
    echo 'console.log(xhr.responseText);';
    echo '})';
    echo '</script>';
    ?>
<div class="w3-ul w3-card-4 w3-mobile">
    <?php 
    getNameAlphabet($sex);
    ?>
</div>
<br>

<?php
$output = ob_get_clean();
include __DIR__.'/../layout.html.php';
?>

I also tried other threads such as thread1, thread2, thread3, thread4 but does not work.