PHP AJAX handler to fill an HTML table

Question

I would like to know if this code follows recommended practices and standards for AJAX/PHP calls. Can this AJAX + PHP code be improved in terms of security, performance, etc.?

ajax.js:

function getTableData() {
    const xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            document.querySelector('#test-table tbody').innerHTML = this.responseText;
        }
    }
    xmlhttp.open('GET', 'ajax.php', true);
    xmlhttp.send();
}

$(document).ready(function () {
    getTableData();
});

ajax.php:

<?php
$data = prepareDataForTable();
$data_length = count($data);
$columns = 4;

for ($row = 0; $row < $data_length; $row += $columns) {
    echo '<tr>';
        for ($col = 0; $col < $columns && ($col + $row) < $data_length; $col++) {
            echo '<td>' . $data[$col + $row] . '</td>';
        }
    echo '</tr>';
}
?>

ajax.html:

<table id="test-table">
    <tbody>
    </tbody>
</table>

I specifically want to know if this is a good way to send information back to the client - by running loops and echoing output.

Answer 1

Trying to follow your mathematical loop conditions makes my eyes go crossed in a hurry.

Perhaps you'd entertain a less-math-heavy alternative:

foreach (array_chunk($array, 4) as $row) {
    echo '<tr><td>' , implode('</td><td>', $row) , '</td>' , str_repeat('<td></td>', 4-count($row)) , '</tr>';
}

Granted this will be making a no-output call of str_repeat() on all rows except potentially the final row, but I think this technique will be more developer friendly. I'm assuming that I understand your $data (Demo). I could have written a conditional for str_repeat() but felt that would only bloat the code.

I tend to lean toward passing json back from an ajax call, but for this situation sending back html is the simpler approach.