AJAX table update script

Question

Hey,

I'm making an online tile based game and I have just finished scripting the piece of code that takes the coordinates of where you are standing and builds the surroundings (tiles) around you (the game is made using a table with many cells that hold the tiles).

I need some help creating a bit of AJAX that can refresh my table every now and then (lets sat every 2 seconds for the sake of this question). I have no experience with AJAX and there would be no point learning it all (even though id like too) as I will only be using it for this small part of my game, plus I do not have time.

This is how my game is set up:

php Some php that gets info on the character.* php

html Some html that displays the data in a graphical form. html

So what I need is some AJAX that refreshes the php then the html every 2 seconds.

Thanks, Stanni

Answer 1

You should probably use jQuery, or Prototype JS. These libraries can both do 'some ajax'. If you are new to development, and this is a one-off project, I would suggest using Prototype.

In Prototype, you could have a function that does the ajax work, and a function that calls Prototype's periodicalExecuter with the work-doing function name as it's callback parameter, as in the example below. You need to send some parameters to the php script, and put the response into some element(s) on the page, once every x seconds. This should get you started:

    <script src="/js/Prototype.js">
    //calls renderResponse on completion of the AJAX post to the specified URL
    function sendRequest(parameters,URLEndpoint){
     var myAjax = new Ajax.Request
         (
          URLEndpoint,
          {
           method: 'post', 
           postBody: parameters, 
           onSuccess: renderResponse
          }
         );
    }

    //replace contents of 'character' div or whatever with output from PHP script
    function renderResponse(response){
       var el = $(characterTable); 
       elementId.innerHTML = resp.responseText;
    }

    //execute sendRequest every 2 seconds
    function periodicalUpdate() {
        new PeriodicalExecuter(sendRequest('monkeys=2&carrots=7','http://mywebsite.com/game.php'), 2);
    }

There's a jQuery plugin function that does the same job as PeriodicUpdate. I haven't tried it but it looks compelling:

http://groups.google.com/group/jquery-en/browse_thread/thread/e99f3bc0cfa12696?pli=1

Answer 2

If you want to save yourself the time of having to learn all the intricacies of AJAX, using a JavaScript framework is a good shortcut (they're a great time saver in general). Using something like YUI, you can build AJAX functionality into your application with just a few lines of code.

Specifically, you'll want to use the YUI Connection Manager Component. YUI has excellent documentation, so it shouldn't be hard to figure it out yourself. If not, here's a short tutorial for beginners.

Inside your HTML front-end you should have something like this:

<!-- YUI source files --> 
<script src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js"&gt;&lt;/script&gt; 
<script src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js"&gt;&lt;/script&gt; 
<script src="http://yui.yahooapis.com/2.7.0/build/connection/connection-min.js"&gt;&lt;/script&gt;
<script>
var tiles = new Array();
function refreshTable() {
    var sUrl = "ajax/table.php";
    var responseSuccess = function(o) {
        var root = o.responseXML.documentElement;
        var rows = root.getElementsByTagName('row');
        for (i=0; i<rows.length; i++) {
            tiles[i] = new Array();
            for (j=0; j<rows[i].childNodes.length; j++) {
                tiles[i][j] = rows[i].childNodes[j].firstChild.nodeValue;
            }
        }

        /*
         Update your table using the tiles[][] 2D array.
        /*
    }
    var responseFailure = function(o) {
        // Failure handler
        alert(o.statusText);
    }
    var callback = {
        success:responseSuccess,
        failure:responseFailure,
        timeout:3000
    }
    var transaction = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null);
}
setInterval(refreshTable(),2000);
</script>

Inside your PHP back-end, you just need to generate XML data in the format of something like:

<table>
    <row>
        <tile>dirt</tile>
        <tile>water</tile>
        <tile>water</tile>
        <tile>dirt</tile>
        <tile>dirt</tile>
    </row>
    <row>
        <tile>dirt</tile>
        <tile>dirt</tile>
        <tile>water</tile>
        <tile>water</tile>
        <tile>dirt</tile>
    </row>
    <row>
        <tile>dirt</tile>
        <tile>dirt</tile>
        <tile>water</tile>
        <tile>water</tile>
        <tile>dirt</tile>
    </row>
    <row>
        <tile>dirt</tile>
        <tile>dirt</tile>
        <tile>dirt</tile>
        <tile>water</tile>
        <tile>water</tile>
    </row>
    <row>
        <tile>dirt</tile>
        <tile>dirt</tile>
        <tile>dirt</tile>
        <tile>dirt</tile>
        <tile>water</tile>
    </row>
</table>

And that's the gist of it. If you need to pass arguments to the server-side PHP script, you just append them onto the URL using encodeURI() and access them using the $_GET[] superglobal.