Ajax is great. DOM manipulation is sexy. I'm fairly new to the Ajax world having only developed with with it since July. MasterWish was my guinea pig and continues to be my playground for all things Web 2.0. Luckily, my manager Ken is pumped up about this whole Web 2.0/Ajax thing which has allowed me to experiment with my projects at work as well and PSU should expect to see some sweet apps roll out over the next year!
Since July, I've been developing my Ajax applications and examples using SAJAX (Simple Ajax), a PHP/Javascript framework for Ajax development. It was great at first glance...a lot easier than building Asynchronous Javascript transactions from scratch. But despite its ease, it was a bit clunky. Last week I was stumbling around the web looking for anything new to suck up and found a beauty of a tool. Script.aculo.us.
Script.aculo.us is a Javascript Effects and Control framework developed by Thomas Fuchs, a software architect living in Vienna, Austria who, like me, was disappointed by current web application frameworks that made no sense to him. His framework is 3 things: Easy to Use, Simple, and Easy to Use. His libraries - built off of the Ajax framework, Prototype - blow SAJAX out of the water! Let me give you an example to, say, update a news title on an article (I won't include the HTML markup as that is trivial):
Here's what needs to be done to build a SAJAX call:
Step 1: Create a SAJAX Call Function
-
function x_updateTitle()
-
{
-
sajax_do_call('/process_ajax.php',"x_updateTitle", x_updateTitle.arguments);
-
}
Step 2: Create a server side function to handle the update
-
<?php
-
function x_updateTitle($news_id,$news_title)
-
{
-
//do some database calls to update the title;
-
}
-
?>
Step 3: Edit the server side SAJAX file (process_ajax.php) and add x_updateTitle to the list of valid call functions
-
<?php
-
include('sajax.php');
-
addFunctions('x_updateTitle');
-
handleClientRequest();
-
?>
Step 4: Call the SAJAX Javascript function from somewhere (in an onClick, onSubmit or something)
-
<a onClick="x_updateTitle(1, document.getElementById('news_title').value, 'callbackFunction');">asdfdf</a>
Here's the equivalent in Script.aculo.us
Step 1: Create a server side function to handle the update
-
<?php
-
function x_updateTitle($news_id,$news_title)
-
{
-
//do some database calls to update the title;
-
}
-
?>
Step 2: Call the Script.aculo.us Javascript function from somewhere (in an onClick, onSubmit or something)
-
<a onClick="new Ajax.Request('/process_ajax.php', { asynchronous:true, parameters:'news_id=1&news_title=$(\'news_title\')', onSuccess:callbackFunction });">asdf</a>
Thats it! Its a big difference. Thats just the tip of the iceberg. Script.aculo.us has many features for implementing Drag and Drop with one line of Javascript code; fancy display/hide functions; dynamic DOM Element creation/deletion; field autocompletion; and various other visual effects. It slick. And to top it off, the Script.aculo.us website is pretty sweet! Luckily the documentation is excellent and is in wiki format. As Plymouth State moves into the Web 2.0 world, I'll be pushing for Script.aculo.us/Prototype to be our Ajax standard. I have seen the light and it is good.
Kinda disappointing that this library is not designed with OO methodologies, taking full advantage of PHP5 and its new features…
One should be able to this:
include(’sajax.php’);
$objSajax = new Sajax();
$objSajax->addFunctions(‘x_updateTitle’);
$objSajax->handleClientRequest();
Perhaps its just me, but I tend to shy away from libraries that aren’t written for the latest version of the language they are written in.
Which is why SAJAX sucks and Script.aculo.us is groovy. Script.aculo.us, built on Prototype, is Object Oriented (well, as OO as you can get with Javascript) and leaves the PHP up to the developers.
I feel that a reference to XAJAX is necessary here. I started off by using SAJAX, but now I’m hooked on XAJAX because of how easy it is to place the resulting html back into the document. No need for a callback there.
Example server-side function:
function dostuff($a) {
$obj = new xajaxResponse() ;
//perform whatever operation here
$result1 = $a . “bla” ;
$result2 = $a . “bli” ;
$obj->addAssign(“div1″, “innerHTML”, $result1) ;
$obj->addAssign(“div2″, “innerHTML”, $result2) ;
$obj->addScript(“Element.show(‘div1′);”) ;
return $obj->getXML() ;
}
That’s it. The rest (calling the php function via javascript, as well as the setup) is similar to SAJAX. http://www.xajaxproject.org
Fanis
Hi,
Could you publish a couple of simple database example using both Sajax and Script.aculo
to see the difference more clearly. Thanks.
I’m having a hard time trying to get something to work against a database. I use Oracle.
Have a nice day and thanks in advance for the reply.
Regards,
Rudi
Check out http://www.planjam.com/date.php
The site urelies heavily on AJAX, uses Prototype, and does an excellent job with many aspects of the script.aculo.us library.
this is to see how comments look
I prefer Sajax, because I managed to learn it and fully understand it, and it’s actually easy to use.
Sajax is way better :D… really
Sajax rulez!
The problem comes when the “pros” that develop such libraries widely demonstrate uses that are blatantly bad from a usability point of view. They should be encouraging good uses, not promoting bad ones.
Nice:)
They should be encouraging good uses, not promoting bad ones.
Hmmm… I think this is the third time I’ve heard about scriptaculous this week. Must be a sign! I haven’t tried SAJAX out yet, but am glad to hear about both SAJAX and Scriptaculous, as I’m also just starting (and only just) at looking at AJAX. Haven’t used it yet, but the concept is great. This is fantastic, perhaps this will mean a lot less time wasted. Thanks for this!
Are you sure you’re new to this? It looks like you’re already a pro. Thanks for a very detailed post. I’m trying to consolidate everything and trying them out myself so I can share them to my students.
very good site