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

