PHP AJAX handler to fill an HTML table

Posted on


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.?


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

$(document).ready(function () {


$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>';


<table id="test-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.


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.

Leave a Reply

Your email address will not be published. Required fields are marked *