Get/fetch data from database without refresh the page - php

Question

Hi I'd like some help please. I'm currently learning Ajax and Json so I don't have much experience on it.
I have followed this tutorial in order to fetch the data without page refresh, but I'm having some concerns on it.
The script works fine, the only problem I found is that if I hit refresh it takes a lot of time (about 5-10 seconds)to load the content again.
In Firebug I can see in the Console that it is continiously binding as it's sending requests all time.
Here's the code
HTML
<div class="ajax_results">
<ul id="results"></ul>
</div>
PHP script
$query = "SELECT `img_id`, `image_name`, `title` FROM `images` ORDER BY `img_id` DESC LIMIT 5 ";
$run = mysqli_query($connection, $query) or die(mysqli_error($connection));
$json = array();
while ($row = mysqli_fetch_array($run, MYSQLI_ASSOC)) {
array_push($json, array('image_name' => $row['image_name'],
'title' => $row['title']));
}
echo json_encode(array("json" => $json));
and the JS
$(document).ready(function() {
refresh();
});
function refresh() {
setTimeout(function() {
update_content();
refresh();
}, 200);
}
function update_content() {
$.getJSON("fetch_data.php", function(data) {
$("ul#results").empty();
$.each(data.json, function() {
$("ul#results").append("<li><img src=\"img/uploads/"+this['image_name']+"\" /><br />"+this['title']+"</li>");
});
});
}
Is this a problem?? Can I improve somehow the code?? Any help would be appreciated
To give some extra feedback. If the $.getJSON is directly placed in $(document).ready(function() the content loads more quickly, but if any updates occured eg in the title won't show without refreshing the page. What I actually want to achieve is load the content and if any changes happened to show them without refreshing the page.

Answer 1

Here's another approach to the issue
$(function() {
update_content();
});
function update_content() {
$.getJSON("fetch_data.php", function(data) {
$("ul#results").empty();
$.each(data.json, function() {
$("ul#results").append("<li><img src=\"img/uploads/"+this['image_name']+"\" /><br />"+this['title']+"</li>");
});
setTimeout(function(){
update_content();
}, 1000);
});
}
Here I've moved the setTimeout call into the update_content() function, and increased the timeout to give the browser a bit more breathing room, personally I wouldn't call this every second but it's just an example, I'd probably go with 10 seconds or even longer.
If you don't want it to fire off repeatedly remove the entire setTimeout block.
$(function() {
update_content();
});
function update_content() {
$.getJSON("fetch_data.php", function(data) {
$("ul#results").empty();
$.each(data.json, function() {
$("ul#results").append("<li><img src=\"img/uploads/"+this['image_name']+"\" /><br />"+this['title']+"</li>");
});
});
}