Ajax melds the responsiveness of the desktop environment with the ubiquity and extensibility of the Web. Because of this clever JavaScript- and XML-driven development technique, we see impressive next-generation Web applications such as Google's Gmail, improved e-commerce interfaces such as that found on Gucci.com and rich interactive experiences on community sites such as Digg.com.
Yet despite Ajax' promise, many developers remain reluctant to embrace the new paradigm. With Ajax, developers must be able to write JavaScript more efficiently than ever before, but many resist this because the language is notoriously difficult to write and debug.
Numerous Ajax-specific frameworks, libraries and toolkits can reduce or eliminate the need to interact directly with JavaScript, but that begs the question: which solution should you choose? AjaxPatterns.org lists over 150 projects across numerous categories, but the right tool depends upon your particular needs.
In this article, we introduce some of the key solutions and offer 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 your options, and let me know what you've chosen by emailing me at wjATwjgilmore.com!
This tip originally appeared on SearchOpenSource.com.
