Choosing an Ajax framework

Your customers won't have to fear Ajax if they have the right tools to work with. Help them determine which Ajax-specific framework, library or toolkit is best for them.

Despite Ajax' promises to meld the responsiveness of the desktop environment with the ubiquity and extensibility of the Web, many developers are reluctant to embrace this JavaScript- and XML-driven development technique because they must be able to write JavaScript -- a language that is notoriously difficult to write and debug.

To avoid direct interaction with JavaScript, your customers have some Ajax-specific frameworks, libraries or toolkits to choose from -- but which solution should you choose for a customer? AjaxPatterns.org lists over 150 projects across numerous categories, but the right tool depends upon their particular needs.

This tip introduces some of the key solutions and offers several examples to show the dramatic effect they can have on JavaScript integration.

Prototype

Prototype is a framework capable of facilitating all manners of JavaScript development by extending the language with new syntax and features that render your development efforts much more efficient. Offering a Ruby-style syntax and a number of mechanisms for accessing and manipulating data structures (for instance, an Enumerable object is available), prototype is extraordinarily powerful and sets the standard for all other solutions.

The following example highlights prototype's excellent forms-handling capabilities, showing you how a text-field value can be made available to a JavaScript function using prototype syntax. From there, the email address can be transparently passed to the server for processing, validation, or any other purpose:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>  
  <title>prototype - Form</title>
   <script type="text/javascript" src="scriptaculous/prototype.js"></script>

   <script type="text/javascript">
        function processform() {
            var email = $F("text_email");      // retrieve email value
            alert("Your email address is " + email);
        }
    </script>

</head>

<body>

<form action="" method="post">

Email Address:<br />
<input type="text" id="text_email" name="email" /><br />
<input type="submit" id="butt_submit" value="Submit" onClick="processform();">

</form>

</body>

</html>

To retrieve the form value, all you need to do is pass the desired id into the $F() function, as shown above.

Click here for a demonstration of this script.

Script.aculo.us

Of these specialized solutions, Scriptaculous, a library based on the aforementioned Prototype framework, is the most popular. Intended to render Ajax integration even easier, Scriptaculous offers a predefined selection of controls (such as sortable lists, draggable and droppable objects and autocompleting text fields); visual effects that can affect the opacity, position, size and other characteristics of DOM objects; and even tools for performing JavaScript unit testing.

Numerous high-profile Web sites depend on Scriptaculous, including Digg.com and Apple, as well as frameworks such as symfony and Ruby on Rails.

Scriptaculous' popularity can partially be attributed to its array of capabilities but perhaps even more so to its simplicity. For instance, suppose you wanted to create a mechanism for hiding part of a Web page at the user's discretion. One commonly used method is known as the "blind", due to its behavior which closely mimics that of a window blind.

The code involved in implementing this feature is amazingly simple, and is shown here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>  
  <title>Scriptaculous - Fade Out</title>
   <script src="scriptaculous/prototype.js" type="text/javascript"></script>
   <script src="scriptaculous/scriptaculous.js" type="text/javascript"></script>
   <link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>

<div id="login">
   <div id="menu-login">
      username: <input type="text" name="username" size="15" maxlength="25" value=""> 
      password: <input type="text" name="pswd" size="15" maxlength="25" value=""> 
      <input type="submit" id="butt-login" value="login">
   </div>
<br />
<a href="#" onclick="Effect.toggle('menu-login', 'blind'); return false">Toggle Login Menu</a>
</login>

</body>

</html>

Click here for a demonstration of this script.

As you can see from this example, implementing the blind effect is as simple as triggering the Effect.toggle() function, passing in the DOM object id and the desired effect.

dojo

Another popular JavaScript-driven general solution is the dojo toolkit, which implements a wide variety of Ajax and JavaScript features.

Perhaps best known for the impressive number of widgets it provides, the dojo toolkit can create complex layouts and form controls closely resembling those found in the most advanced desktop applications. Functions are also available for tasks as disparate as cryptography, data validation, data structure manipulation and logging.

The following example demonstrates one of dojo's built-in widgets, the calendar. After reviewing the code, follow the link to the demonstration and play around with the widget by changing the month and year settings.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>  
  <title>dojo - Calendar</title>
   <script type="text/javascript" src="dojo/dojo.js"></script>
   <script type="text/javascript">
       dojo.require("dojo.widget.html.DatePicker");
    </script>
</head>

<body>

<div dojoType="DatePicker"></div>


</body>

</html>

Click here for a demonstration of this script.

Atlas (ASP.NET Ajax)

For some time now, Microsoft has been touting the Atlas framework (which, true to Microsoft's fixation with renaming technologies, has recently been renamed ASP.NET AJAX). Atlas is Microsoft's freely available solution for building the next generation of Web applications using Ajax.

Although primarily intended to help ASP.NET developers easily integrate Ajax capabilities into their Web applications, this framework is split into two separate components: an ASP.NET extension that offers Ajax-oriented server controls (known as ASP.NET AJAX Extensions) and a 100% JavaScript-driven client-side library (known as the Microsoft AJAX Library). As a result, developers hailing from any language can take advantage of the client-side library.

Specialized solutions

A variety of specialized frameworks exist for carrying out specialized tasks, such as logging, Web services and Flash integration. For instance, log4javascript is a JavaScript-specific logging framework that can render your JavaScript debugging process far more efficient than the alert box.

Still other solutions are even more specialized. These solutions are powerful because they provide an immediate and highly configurable implementation of a desired feature. Take a moment to view a particularly impressive solution for image slide shows called jondesign's smooth slideshow.

Even if you're looking to deploy a very specific feature that would conceivably be also deployed on other sites, be sure to take a look around the Web for freely available solutions before building your own.

Server-side solutions

Numerous solutions can tightly integrate Ajax with developers' preferred server-side Web development language. For instance, AjaxPatterns lists 28 PHP-driven solutions, 34 Java-driven solutions and even one Lisp-specific solution.

Before seeking out one of these solutions, keep in mind that many frameworks (Ruby on Rails, symfony, and Catalyst, for instance) already offer Ajax and JavaScript solutions. Two particularly compelling PHP-specific solutions include the HTML_AJAX PEAR package, and xajax.

Conclusion

Solutions abound for minimizing the grief involved in incorporating JavaScript into your Web applications. Be sure to take some time to carefully weigh the options.

This tip originally appeared on SearchOpenSource.com.

This was first published in October 2006

Dig deeper on Desktop operating system and mobile device management

Pro+

Features

Enjoy the benefits of Pro+ membership, learn more and join.

0 comments

Oldest 

Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to:

-ADS BY GOOGLE

MicroscopeUK

SearchCloudProvider

SearchSecurity

SearchStorage

SearchNetworking

SearchCloudComputing

SearchConsumerization

SearchDataManagement

SearchBusinessAnalytics

Close