It is always a case by case decision, and you can always choose to go either way. I suggest taking the path of least resistance after considering both coding effort and request efficiency.
In this case
1. Request efficiency (probably) matters little, since it should not take much more time to insert a new comment and pull out 6 rows from the DB and return this, rather than just insert the new comment and return success. But the difference is there, and as a general rule of thumb, avoid database access unless you need it.
2. Coding effort should be the same when dealing with the new content only (the new row), as compared to dealing with the whole result set (all 6 rows). Unless you want some order other than chronological (which your serverside SQL statement/PHP code would deal with). But making the new content appear in some sorted order isn't that much extra work either.
If you allready do an update every 12 seconds without a page reload, you are either allready using ajax, xmlhttprequest, or make use of an iframe which is similar. The differnece is that you can only send XHR to the same domain, and there are browser inconsistencies to deal with. IE uses an activeX object, while other browsers do not.
Either write your own class to deal with sending the XHR and dealing with the response, or use an framework such as prototype, jquery, yui... Serverside you should look at json encode to turn objects and arrays into json (javascript string object notation), and client side you should look at eval. However, if you choose a framework, they may provide an alternative to eval for additional safety, since eval will execute anything in a string as javascript code, while decoding a json object requires dealing with only a subset thereof.
So, in your case I'd go with dealing with only the new content, rather than reloading the whole table. If you do any kind of cleanup/transformation of posted data such as running it through htmlentitites(), and for security reasons you should, then I would suggest sending the processed result back to the client, rather than just indicating success or failure for the db insert, to ensure that the user sees the same thing when posting the comment as they would when reloading the page.
Other than that, dealing with the result is plain javascript DOM.
/* assuming o consists of the response body, and not the entire response including headers.
* This just appends data to the end of the table. If you'd have wanted alphabetical
* sorting on user name rather than chronological on post time,
* you would need to iterate over table data and find out where to insert the new
* comment. */
function responseHandler(o) {
alert('Handling emulated ajax response');
var d = document;
var data = o.data;
var tbl = document.getElementById('comments');
if (!tbl || tbl == undefined)
return;
var tb = tbl.getElementsByTagName('tbody');
if (!tb || tb.length < 1)
return;
tb = tb[0];
for (var i = 0; i < data.length; ++i) {
var row = d.createElement('tr');
// add user name to new table row
var cell = d.createElement('td');
cell.appendChild(d.createTextNode(data[i].user));
row.appendChild(cell);
// add comment to new table row
var cell = d.createElement('td');
cell.appendChild(d.createTextNode(data[i].comment));
row.appendChild(cell);
// add row to tbody
tb.appendChild(row);
}
}
/* Note that data contains an array of objects, even though there is only
* one element in this case. You could have skipped the array here, but this
* lets you see how to deal with multiple rows in the response */
var mockResponse = "{data:[{user:'Mike',comment:'Nice post!'}],meta:{status:'success',errors:0}}";
</script>
</head>
<body onload="responseHandler(eval('('+mockResponse+')'));">
<table id="comments">
<thead><tr>
<th>Posted By</th>
<th>Comment</th>
</thead>
<tbody>
<tr>
<td>John</td>
<td>lorem ipsum</td>
</tr>
<tr>
<td>Jane</td>
<td>dolor sit amet</td>
</tr>
</tbody>
</table>
