Tushar Tyagi Tushar Tyagi - 1 month ago 6
PHP Question

Images refreshes every second when fetched by AJAX causing flickering and blinking

So I was making a comment system for my blogging cms project. All i want to achieve is to fetch comments every second from another php file (ex- comment.php) which is fetching data from MySql table, and show it in a div which is-

<div class="results" id="result"></div>


I was able to do it successfully, the text comments load well but image comments (comments having images in it) blinks every second.
probably due to AJAX refreshing the complete div every second.
I would really appreciate if someone can help me figure out how to stop this flickering.
my JavaScript code is-

<script>
function refresh_div() {
jQuery.ajax({
url:'comment.php',
type:'POST',
success:function(results) {
jQuery(".result").html(results);
var message=$('#result');
message.scrollTop(message[0].scrollHeight);
}
});
}
t = setInterval(refresh_div,1000);
</script>


here is the comment.php file, if needed-

<?php
session_start();
if(!isset($_SESSION['uid'])){
header('location:login.php');
}
include('config.php');
$sql = "SELECT * FROM messages ORDER BY id ASC LIMIT 0, 30 ";
$result = mysql_query($sql);

while($row = mysql_fetch_array($result)) {
$uname=$row['uname'];
$message=$row['message'];
echo "<span>".$uname."</span>";
echo ": ";
echo "<span style='font-family:myfont2;'>".$message."</span>";
echo "<br>";

}
?>


I read that image caching can solve the problem, but i expect an AJAX solution only if possible.


EDIT- You guys suggested me to keep old messages loaded and "Get only newest data in ajax". I believe I cannot do this on my own and expecting some code help.


Thanks


EXTRA NOTE- This is my first question here so my apologies if i didn't asked or explained it well or asked something i shouldn't have asked. Hope you good guys out there understand :)

Answer

You might consider using Etags.

The idea is simple - the comments.php adds an additional HTTP header (thus not breaking the existing functionality) which in some way allows the client (your Javascript) to ask the server "Only send me the updated content if it's changed since the version I already have").

The server-side needs to generated some sort of determinative value (it only changes if the data in the database changes - like a SHA hash) and provides that as an Etag value along with the response.

Your client (jQuery can do this for you) caches the Etag value, and on future requests includes the cached Etag in the request. If the server determines that the new response would result in an identical Etag (nothing changed) - it responds with a 304 Not Modified.

Wikipedia on Etags: https://en.wikipedia.org/wiki/HTTP_ETag

Etags in jQuery (see "ifModified" on the page): http://api.jquery.com/jquery.ajax/


For a quick demonstration of doing it in PHP: https://css-tricks.com/snippets/php/intelligent-php-cache-control/

Here they're using the modified time and MD5 hash of a file on disk. You'd need to modify these values to be appropriate for your SQL query result (you could base it off an auto-incrementing primary key from the comment table, for example, plus a DEFAULT CURRENT_TIMESTAMP()).

Comments