First big AJAX-application

recently handgestrickt was writing the first big AJAX-application. it is based on Prototype.js, which brings a whole bunch of really useful functions and a very good object- orientation. later we want to add some effects like Drag&Drop with Rico or script.aculo.us.

our application is based on LAMP on the server-side and JavaScript and AJAX on the client-side. the exchange of data is made using JSON. there is a very good JSON-class in the proposals of PEAR called Services_JSON. this class can encode and decode JSON. our communication works as follows: first an AJAX-request with GET to some PHP-file which acts like a switch. this switch decides which functions to load and which content to output. the PHP output is in JSON-format. back in JavaScript we just eval() this output. that's it! very easy! the rest is a little bit JavaScript-DOM which is easy with Prototype.js.

some example:

first we load the Prototype.js.
example.js:

var foo = Class.create();
foo.prototype = {
    initialize: function() {
        new Ajax.Request(
            'switch.php?function=initialize',
            {
                method: 'get',
                onSuccess: this.eval.bind(this)
            }
        );
     },

    eval: function(ajax_request) {
        eval(ajax_request.responseText);
    }
}

switch.php:

<?php
if($function) {
    switch($function) {
        case 'initialize' :
                include_once('includes/initialize.php');
                break;
        //more case ......

    }
}
?>

includes/initialize.php:

<?php
require('includes/JSON.php'); //Services_JSON-class
$php_data = array();
$db = mysql_pconnect(...);
mysql_select_db(...,$db);
$result = mysql_query('SELECT foo,bar FROM table',$db);
while($row_data = mysql_fetch_array($result,MYSQL_ASSOC)) array_push($php_data,$row_data);
$json = new Services_JSON();
?>
this.js_data = <?php echo $json->encode($php_data); ?>;

related:
AJAX
JavaScript
DOM
Prototype.js
Rico
script.aculo.us
Drag&Drop
LAMP
JSON
PHP
PEAR
Services_JSON-class

Thursday, 22. February 2007 • trackback url

Add Comment

( to reply to a comment, click the reply link next to the comment )

Comment Title:
Your Name:
Email Address:
Make Public?
Website:
Make Public?

Comment:


Allowed XHTML tags : a, b, i, strong, code, acrynom, blockquote, abbr. Linebreaks will be converted automatically.


Captcha:

captcha image

please type the content of the above image into the following form-field: