Script.aculo.us Is My New Best Friend
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.
Discuss This Article
|
|
22 Responses to “Script.aculo.us Is My New Best Friend”
-
Wandering Pig Effer
Posted: Jan 4th, 2006 at 10:24 am1 -
Matt
Posted: Jan 4th, 2006 at 11:32 amReply to this comment.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.
2 -
pingback:
Posted: Jan 6th, 2006 at 9:58 amNoSheep! » Scriptaculous Reply to this comment.[...] Matt recently came across and got very excited about Script.aculo.us for doing DHTML effects and AJAX. [...]
3 -
pingback:
Posted: Jan 6th, 2006 at 10:10 amBorkWeb » Blog Archive » Node Manipulation in the DOM Reply to this comment.[...] I’ve been screwing around with DOM Manipulation for a few years now, doing stuff sporadically here and there. With my development of MasterWish and my recent interest in Script.aculo.us, I often find myself forgetting the various objects, functions and attributes relating to nodes. Hence the reason for this post. I want a quick and easy way to find the information…So, here’s a quick run-down of node structure: [...]
4 -
pingback:
Posted: Jan 10th, 2006 at 6:26 amBorkWeb » Blog Archive » Thomas Fuchs of Script.aculo.us: Ajaxian Podcast Reply to this comment.[...] Ajaxian has posted a podcast of their interview with Thomas Fuchs, the creator of Script.aculo.us. Ajaxian summarizes the content that is discussed: [...]
5 -
pingback:
Posted: Mar 10th, 2006 at 10:04 amBorkWeb » Blog Archive » Ajax; Templating; and the Separation of Layout and Logic Reply to this comment.[...] I have often mentioned my process of expanding my proficiency of Ajax. Through my journey I have made a number of wrong turns and hit my share of stumbling blocks. All of that has been a learning experience and I’m learning still. I began fiddling with XMLHttpRequest as many do - blissfully ignorant of the many frameworks that exist to make Ajax super easy. My code was bloated with some neat…’features’ (pronounced: bugs). [...]
6 -
Fanis
Posted: Mar 14th, 2006 at 10:38 pmReply to this comment.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
7 -
pingback:
Posted: Mar 24th, 2006 at 8:54 pmBorkWeb » Practicing What I Preach Reply to this comment.[...] MasterWish was built using SAJAX as the tool of choice for Ajax communication but as I’ve mentioned in the past, I am a Prototype convert. My knowledge of Ajax, JSON, and general application structure has been morphing so much in recent weeks that I have held off in completely revamping the wish list site. [...]
8 -
pingback:
Posted: Mar 27th, 2006 at 2:15 pmBorkWeb » Script.aculo.us v1.6 Soon Reply to this comment.[...] Great news over at Mir.aculo.us. It appears as if version 1.6 of my favorite DOM manipulation library, Script.aculo.us will be out soon. Thankfully the new version of Script.aculo.us will be using Prototype v1.5. [...]
9 -
pingback:
Posted: Mar 29th, 2006 at 3:39 pmBorkWeb » The Case For JSON: What Is It and Why Use It? Reply to this comment.[...] As Ajax methodologies (and even Cross Domain Scripting) become more commonplace, data format becomes vital to the efficiency of our applications. The Zimbra folks seem to have realized this and subsequently re-architected their entire application. Oh, and Script.aculo.us creator Thomas Fuchs seems to agree and stats his opinion on XML in Ajax communication: Its dog slow…don’t do it. [...]
10 -
Rudi
Posted: Jun 1st, 2006 at 7:57 amReply to this comment.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
11 -
pingback:
Posted: Jun 15th, 2006 at 3:14 amprogramania » Javascript, ajax, jSon, Prototype y scriptaculous 12 -
Ron
Posted: Jun 27th, 2006 at 10:36 amReply to this comment.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.
13 -
test
Posted: Jul 11th, 2006 at 4:26 pmReply to this comment.this is to see how comments look
14 -
Alex
Posted: Aug 11th, 2006 at 10:42 amReply to this comment.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!15 -
pingback:
Posted: Aug 15th, 2006 at 4:42 pmBorkWeb » Learning What I Know Reply to this comment.[...] THEN tackle Prototype and Script.aculo.us [...]
16 -
katalog
Posted: Oct 14th, 2006 at 8:44 amReply to this comment.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.
17 -
pingback:
Posted: Nov 1st, 2006 at 7:58 amBorkWeb » The Ajax Experience: jQuery Toolkit Reply to this comment.[...] I went to The Ajax Experience with high expectations of catching some great tips regarding development in an Ajax environment. At the same time, I was sure of my previous decision with the use of Prototype and Script.aculo.us was as good as it gets (without diving into the widgetized world…e.g. Dojo). I attended John Resig’s presentation on jQuery and I became a convert. [...]
18 -
pogoń świerzawa
Posted: Jul 10th, 2007 at 11:53 amReply to this comment.Nice:)
They should be encouraging good uses, not promoting bad ones.19 -
jewellery
Posted: Nov 2nd, 2007 at 5:33 amReply to this comment.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!
20 -
portrait oil painting
Posted: Nov 4th, 2007 at 11:41 pmReply to this comment.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.
21 -
qwieqowoeu
Posted: Mar 12th, 2008 at 7:41 amReply to this comment.very good site
22
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.