The first step is understanding the two basic types of library and the paths they each take to get AJAX functionality into your application:
- Pure JavaScript libraries provide core remote scripting.
- Server-based AJAX libraries generate the AJAX code from your server application.
Each type has its place depending on the type of application you're developing, but mixing and matching the two is an option also. In the end though, your personal preference plays the largest role in your choice (see Table 1. Pros and Cons of AJAX Library Types). To help you determine which is right for you, this article highlights the strengths and weaknesses of three popular pure JavaScript libraries and a few options offered by the server-based AJAX libraries for ASP.NET, PHP, and Java.
| AJAX Library Type | Pros | Cons |
|---|---|---|
| Server Based | Ties the JavaScript code tightly to the server language | |
| Pure JavaScript | Leaves you to manage how to translate your server-side return values to XML or JSON |
| Table 1. Pros and Cons of AJAX Library Types |
Pure Javascript
In the world of normal programming, syntax is consistent but the APIs change. In the strange prototype-based world of JavaScript, each major library seems to change the basic syntax structure of JavaScript, which for me is a major turn-off. It's hard enough switching between a server language and JavaScript without having to switch to a different syntax within JavaScript to make some library calls.
In any case, you'll find literally thousands of freely available JavaScript libraries on the Internet. Most are open source (being script, they have little choice), and they provide various ranges of rich functionality. In terms of core remote scripting, all of the major JavaScript libraries do a very capable job, the differentiation being primarily in the syntax.
Dojo, Yahoo! User Interface (YUI) Library, and Prototype are the big three of the pure JavaScript library world according to the Ajaxian.com 2006 Survey results. Although this survey isn't scientific (random sampling), it does provide a summary of the popular libraries. To help you determine which is right for you, this article highlights each one's strengths and weaknesses and shows how it handles a "Hello World" equivalent in AJAX code that passes a couple of parameters to devx.com and downloads the homepage. Although this isn't technically useful, it will give you a feel for the syntax the library uses to make AJAX calls.
Dojo
Dojo is clearly the most comprehensive library of the three. In addition to the AJAX and Animation offered by all three of the reviewed libraries, Dojo provides an abstraction for every page widget in a manner that you would expect from a server-side language: making every page widget a type of component that goes into abstract container objects. That said, the comprehensiveness comes at a price of 130KB+. Despite the file size, however, its execution speed once downloaded is quite impressive, and it includes functionality ranging from AJAX to complex graphics capabilities.
Dojo is also a major abstraction layer between normal DOM calls and Dojo calls. Developers who know DOM inside and out will find this abstraction unwelcome, while those who are not so deep into the DOM will appreciate it. For sheer geeky coolness, it's worth checking out for the client-side SVG (Scalable Vector Graphics) capabilities alone; they can generate rich interactive charts on the client side.
Dojo uses a declarative syntax that is fairly similar to Python, only slightly more concise. The following "Hello World" equivalent code example shows a simple Dojo AJAX call that passes the parameters "key=value" to the devx.com URL:
dojo.io.bind({
url: "http://www.devx.com?key=value",
load: function(type, data, evt)
{ alert('Responded:'+ data); },
error: function(type, error)
{ alert('Error:'+ error); },
mimetype: "text/html"
});
Yahoo! User Interface Library
In addition to the core AJAX capabilities, YUI includes animation capabilities as well as a few page widgets like a TreeView and a fully internationalized calendar. Most of YUI's CSS alteration calls are a simple pass-through directly to the DOM via alternate APIs that are YUI-specific. In this way, YUI lives in an odd limbo between embracing the underlying DOM and abstracting the programmer from it. The component/container architecture in YUI is very similar in nature to Dojo's.
To make AJAX calls, YUI uses a declarative model that is quite powerful but verbose. The following is the same code as the previously shown Dojo example but using the YUI libraries:
YAHOO.util.Connect.asyncRequest(
'GET',
'http://www.devx.com/?key=value',
callback
);
var callback =
{
success:responseSuccess,
failure:responseFailure
};
function responseSuccess(r)
{ alert('Responded:'+ r.responseXML); }
function responseFailure(r)
{ alert('Error:'+ r.statusText); }
Prototype
Prototype leans toward Ruby's syntax, and you have to love it if only for the $ function, which shortens document.getElementById down to $. Prototype also has a few offshoot libraries such as script.aculo.us, Rico, and Behaviour that offer additional functionality. You'll also find a server-based library for Ruby on Rails that is capable of handling the server side for Prototype.
For AJAX, Prototype actually has multiple methods for making AJAX calls, such as one that just returns the data in a manner similar to the Dojo and YUI examples. The following example automatically puts the resultant HTML in the
var ajaxReq = new Ajax.Updater('DivIDToPutResultIn',
'http://www.devx.com',
{method: 'get', parameters:'key=value'});
This approach can be quite beneficial if you're generating HTML on the server side, as opposed to returning data to the browser to be handled by JavaScript.
Results Handling
All three of these libraries have support for handling results as XML and as JSON. In a nutshell, JSON is a much more bandwidth-friendly way to pass complex data structures from the server to the client than the fairly chunky XML. All three libraries leave you to decide how to map data types in your server language. This means you'll either need to find a library for your server language to return XML/JSON or you'll need to code it yourself. The good news is JSON's Web site has JSON serializers in many languages available for download. The bad news is you'll have to do some custom work to get these libraries to play well with your client libraries.
Rounding Up the Pure JavaScript Options
Dojo and YUI both work to abstract the programmer from the DOM. For developers who like that abstraction, I recommend Dojo hands down. Dojo beats YUI by every measure I could put on it, from performance to capability. For programmers who know the DOM and don't want to be abstracted too far from it, I recommend Prototype, which can leverage your DOM knowledge and provide some APIs that will greatly speed up common tasks. As a long-time JavaScript monkey, Prototype feels the most natural to me.
Server-based AJAX
The server-based AJAX libraries all have a common approach:
- Enable you to take a method on the server and declare it as AJAX callable.
- Create a representation of that server API in JavaScript.
Virtually every server language, from the most mainstream to the more niche, has a server-based API to enable AJAX capabilities. These server-based libraries all have built-in capabilities for taking server objects and returning JavaScript representations of the objects on the client. This article covers a few options for ASP.NET, PHP, and Java.
ASP.NET
The server-based APIs that enable AJAX capabilities in ASP.NET are ASP.NET AJAX Extensions (formerly code-named "Atlas") from Microsoft (free but not open source) and AjaxPro (free and open source) from Michael Schwarz. ASP.NET AJAX Extensions has 100-percent server-coded options that create AJAX functionality on the client. It is a better option for those wanting to avoid client scripting. ASP.NET AJAX Extensions also allows you to create server APIs callable via client-based JavaScript.
AJAXPro doesn't offer the rich "automagic" components offered by ASP.NET AJAX Extensions, but it does offer the simplest experience when it comes to making a server API client-side callable.
AJAXPro offers an extremely simple but effective model:
- Add an attribute to a method declaring that the method should be AJAX callable.
- Call this method via JavaScript the same way you would call it on the server.
AJAXPro does all of the magic of turning return value objects like DataSets into JavaScript representations for you.
PHP
The most widely used PHP AJAX library is xAjax, which allows you to define functions as you normally would and then make them AJAX callable via a single line of code. In terms of raw market share (again according to the Ajaxian.com poll), xAjax rules the PHP universe and it's easy to see why. The syntax is simple, clean, and gets the job done with minimal hassle.
Java
Within the Java universe, you will find Direct Web Remoting (DWR) and the Google Web Toolkit (GWT). It's easier to get up and running with DWR, which involves less code to actually start making AJAX calls from the client than GWT. However, GWT offers much more complete debugging options and some big bonuses like nearly automatic support for the browser's back button.
The Choice Is Yours
If you are the type of person that wants to know every line of code your application executes, directly calling XMLHttpRequest is the only way to go. If you've got a Web application that needs to call multiple back-end services in different languages, or if you want to keep your JavaScript code developers completely separated from your server developers, then one of the JavaScript libraries is likely your best choice (see Table 2. AJAX Solution Recommendations for Users).
| AJAX Solution | Best Suited for... |
|---|---|
| AJAXPro | ASP.NET developers who are trying to create a fully client-side experience and just want to make a few server-side API calls to get/set data |
| ASP.NET AJAX Extensions ("Atlas") | ASP.NET developers who want AJAX functionality via server components without writing JavaScript code |
| Direct Web Remoting (DWR) | Java developers who want to get up and running with an AJAX solution quickly |
| Dojo | |
| Google Web Toolkit (GWT) | Java developers who are willing to invest more time to get a more robust, easier-to-debug solution |
| Prototype | |
| xAJAX | PHP developers of all stripes |
| Table 2. AJAX Solution Recommendations for Users |
Server language AJAX libraries are consistently the quickest routes to AJAX nirvana, as they can format complex server data types to JavaScript equivalents. Alternatively, you can always mix and match your approaches. If you like the Dojo JavaScript library's rich client functionality but want to use DWR to handle your AJAX, you can have the best of both worlds.
