AJAX calling a PHP code and getting a response every few minutes

Question

Hi,

I'm trying to create a very simple message board (author, text, and date written) that will auto-update every few moments to see if a new message has arrived, and if it has, auto load the latest message(s).

I'm proficient in PHP, but my knowledge in AJAX is lacking.

The way I see it, I would have to create a PHP file called get_messages.php that would connect to a database and get through a $_GET variable return all posts beyond date X, and then I would somehow through jquery call this PHP file every few minutes with $_GET=current time? Does this sound correct?

How would I got about requesting and returning the data to the web page asynchronously?

Answer 1

Ignore the ASP.NET stuff, this link is a good start:

http://www.aspcode.net/Timed-Ajax-calls-with-JQuery-and-ASPNET.aspx

What you're going to use is a javascript function called setTimeout, which asynchronously calls a javascript function on an interval. From there, jQuery has a fancy function called "load" that will load the results of an AJAX call into a DIV or whatever element you're looking for. There are also numerous other ways to get jQuery to do alter the DOM the way you'd like.

There are a hundred ways to do this, but I'd say avoid writing plain Javascript to save yourself the headache of cross-browser functionality when you can.

Answer 2

You're pretty close, you'll need a PHP script that can query the database for your results. Next, you'll want to transfigure those results into an array, and json_encode() them:

$results = getMyResults();
/* Assume this produce the following Array:
   Array(
     "id" => "128","authorid" => "12","posttime" => "12:53pm",
     "comment" => "I completely agree! Stackoverflow FTW!"
   );
*/
print json_encode($results);
/* We'll end up with the following JSON:
   {
     {"id":"128"},{"authorid":"12"},{"posttime":"12:53pm"},
     {"comment":"I completely agree! Stackoverflow FTW!"}
   }
*/

Once these results are in JSON format, you can better handle them with javascript. Using jQuery's ajax functionality, we can do the following:

setInterval("update()", 10000); /* Call server every 10 seconds */

function update() {
  $.get("serverScript.php", {}, function (response) {
    /* 'response' is our JSON */
    alert(response.comment);
  }, "json");
}

Now that you've got your data within javascript ('response'), you are free to use the information from the server.

Answer 3

I suggest you go for the Simple AJAX Code-Kit (SACK) available on Google code.

I've been using it since before it was on Google code. It's very light and straightforward. It's one js file that you have to include. I've seen it being used in online browser games as well.

http://code.google.com/p/tw-sack/

Example for loading page contents from get_messages.php in a div (if you don't care about the page contents from get_messages.php, and simply want to call the php file, simple remove the ajax.element line):

<script type="text/javascript" src="tw-sack.js"></script>
<script>
var ajax = new sack();
ajax.method = "GET";  // Can also be set to POST
ajax.element = 'my_messages'; // Remove to make a simple "ping" type of request
ajax.requestFile = "get_messages.php";
ajax.setVar("user_name","bobby");
ajax.setVar("other_variables","hello world");
ajax.setVar("time",dateObject.getTime());
ajax.onCompleted = whenCompleted;
ajax.runAJAX();

function whenCompleted(){
  alert('completed');
}
</script>

<div id="my_messages">Loading...</div>

You don't need to specify an "ajax.element" if you want to do a simple "ping" type of request and ignore the output of the php file. All you have to do to implement your requirements now is to use a "setTimeout" making the ajax calls.

There are also many other options like:

//ajax.onLoading = whenLoading;
//ajax.onLoaded = whenLoaded; 
//ajax.onInteractive = whenInteractive;

No need to learn or include huge frameworks. And you'll get started in no time with tw-sack.