AJAX PHP MicroBlog更新源

Question

I'm stuck on my project for college, I've been working on a small time microblog, this may seem silly but I have no idea on how to make the feed auto refresh without killing my monthly bandwidth, here is the code I'm using atm,

Data.php

<?php 
// connect to the database
require_once 'script/login.php';

//show results
$query = "SELECT post, PID, fbpic, fbname, fblink, post_date, DATE_FORMAT(post_date, 'Posted on %D %M %Y at %H:%i') AS pd FROM `posts` WHERE 1
"
    . "ORDER BY `post_date` DESC LIMIT 0, 30 ";
$result = @mysql_query ($query);

if ($result) { //If it ran ok display the records
echo '<div id="feed">';
    while ($row = mysql_fetch_array ($result, MYSQL_ASSOC)) {
        echo '<a name="' . $row['PID'] . '"></a><div id="postsint"><a target="_blank" href="http://www.facebook.com/' . $row['fblink'] . '"><img id="dp" title="' . $row['fbname'] . '" src="https://graph.facebook.com/' . $row['fbpic'] . '/picture"/></a><div id="posttext">' . base64_decode($row['post']) . '<blockquote>' . $row['pd'] . '</blockquote><a href="https://www.facebook.com/dialog/feed?app_id=505747259483458&link=http://www.wisp-r.com/share.php?id=' . $row['PID'] . '&picture=http://www.wisp-r.com/images/app-icon.png&name=Wispr by ' . $row['fbname'] . '&caption=' . $row['pd'] . '&description=' . htmlspecialchars(base64_decode($row['post']), ENT_QUOTES) . '&redirect_uri=http://www.wisp-r.com/share.php?id=' . $row['PID'] . '">Share</a></div></div><br />';
    };
echo '</div>';
mysql_free_result ($result);
} else { //if it did not run ok
echo '<h2 id="error">Wisprs could not be retrieved. We apologise for any inconvienience.</h2>'; //public message
echo '<p id="error">' . mysql_error() . '<br /><br /> Query: ' . $query . '</p>'; //debugging message
}
mysql_close(); // Close database connection

?> 

content.php

<div id="postlist"> FEED GOES HERE.</div>

All im trying to do is check for updates every 2 seconds and if there is updates then show them in #postlist

It's been a 3 week struggle and I don't know any JavaScript, it's annoying me and I just want to finish this project so I can go to University and maybe learn to do this myself =/

Cheers in advance.

PS - I'm only guessing that it's Ajax but my tutor recommended this site for an answer if I get stuck

Answer 1

Hopefully you are allowed to use jQuery.

Add to content.php:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">

function getFeed(){
    $.post('Data.php',function(data){
        $("#postlist").html(data);
    });
    setTimeout("getFeed();",2000);
}

window.onload = getFeed();

</script>

getFeed() is called on page load, then calls itself every 2000 milliseconds and appends the data received from Data.php into your postlist element.

This is brute forcing it, making it constantly delete the old html in the postlist div and create all new html every 2 seconds. If you have images that you are loading you will need a more complex solution.