Ajax Framework

An Ajax framework is a cross-browser framework that allows developers to develop dynamic web pages(that use AJAX) quickly.

Ajax frameworks provide a complete library to construct web applications through the Ajax engine, i.e. the suite of technologies that facilitates communication between user requests and server without the lag-time and work it takes to re-load the entire page. This provides more interactivity to the web applications and improves their overall functionality.

While there are hundreds of Ajax frameworks available, there currently only about 20 heavily used or heavily written about frameworks that fall into 3 categories. While all simplify the creation of Javascript-based dynamic based web applications, most are object-oriented packages that are written in Javascript itself. However, several others are written in the server side scripting language PHP, others are written in Java, and a few exist for ASP.net and ColdFusion.

Categories of Ajax frameworks

(X)HTML/CSS Supplement Frameworks

Classic examples of this type of framework are Prototype and JQuery. As is suggested by JQueries tagline "The Write Less, Do More Javascript Library", these frameworks attempt to add tools to a designers resource kit to simplify and standarize the javascript required to perform Ajax type actions.

Toward the goal of 'simplifying' these frameworks typically provide syntax that is reasonably cross-browser and future-proof. That is as new browsers are released and new vulnerabilities are discovered in older AJAX techniques, users of these frameworks should be able to simply update their framework library files with no or little modification to their original code.

Toward the goal of standardization, the adoption of these frameworks makes it relatively simple for an new programmer to walk into an existing project and make sense of the code.

The types of methods included by these frameworks can loosely fall into 4 categories.

Pure Ajax Methods

These libraries generally include a call-back system that attempts to simplify the creation and execution of HTTPXMLRequest objects and to simply the handling of a returned XML, JSON or (X)HTML response.

Event Handling Systems

"Event Handling" methods add generally add the ability to attach new actions to DOM elements.

DOM/CSS Manipulation Methods

These frameworks will also include code to assist in CSS and DOM manipulation. The best way to explain these are probably just through examply JQuery inlcudes the following events:

• blur( ) - Triggers the blur event of each matched element.
• blur( fn ) - Bind a function to the blur event of each matched element.
• change( ) - Triggers the change event of each matched element.
• change( fn ) - Binds a function to the change event of each matched element.
• click( ) - Triggers the click event of each matched element.
• click( fn ) - Binds a function to the click event of each matched element.
• dblclick( ) - Triggers the dblclick event of each matched element.
• dblclick( fn ) - Binds a function to the dblclick event of each matched element.
• error( ) - Triggers the error event of each matched element.
• error( fn ) - Binds a function to the error event of each matched element.
• focus( ) - Triggers the focus event of each matched element.
• focus( fn ) - Binds a function to the focus event of each matched element.
• keydown( ) - Triggers the keydown event of each matched element.
• keydown( fn ) - Bind a function to the keydown event of each matched element.
• keypress( ) - Triggers the keypress event of each matched element.
• keypress( fn ) - Binds a function to the keypress event of each matched element.
• keyup( ) - Triggers the keyup event of each matched element.
• keyup( fn ) - Bind a function to the keyup event of each matched element.
• load( fn ) - Binds a function to the load event of each matched element.
• mousedown( fn ) - Binds a function to the mousedown event of each matched element.
• mousemove( fn ) - Bind a function to the mousemove event of each matched element.
• mouseout( fn ) - Bind a function to the mouseout event of each matched element.
• mouseover( fn ) - Bind a function to the mouseover event of each matched element.
• mouseup( fn ) - Bind a function to the mouseup event of each matched element.
• resize( fn ) - Bind a function to the resize event of each matched element.
• scroll( fn ) - Bind a function to the scroll event of each matched element.
• select( ) - Trigger the select event of each matched element.
• select( fn ) - Bind a function to the select event of each matched element.
• submit( ) - Trigger the submit event of each matched element.
• submit( fn ) - Bind a function to the submit event of each matched element.
• unload( fn )

Visual Effects

Once again an example of visual effects is probably most helpful. JQuery includes the following:

Basics

• show( ) - Displays each of the set of matched elements if they are hidden.
• show( speed, callback ) - Show all matched elements using a graceful animation and firing an optional callback after completion.
• hide( ) - Hides each of the set of matched elements if they are shown.
• hide( speed, callback ) - Hide all matched elements using a graceful animation and firing an optional callback after completion.
• toggle( ) - Toggles displaying each of the set of matched elements.

Sliding

• slideDown( speed, callback ) - Reveal all matched elements by adjusting their height and firing an optional callback after completion.
• slideUp( speed, callback ) - Hide all matched elements by adjusting their height and firing an optional callback after completion.
• slideToggle( speed, callback ) Toggle the visibility of all matched elements by adjusting their height and firing an optional callback after completion

Fading

• fadeIn( speed, callback ) - Fade in all matched elements by adjusting their opacity and firing an optional callback after completion.
• fadeOut( speed, callback ) - Fade out all matched elements by adjusting their opacity and firing an optional callback after completion.
• fadeTo( speed, opacity, callback ) - Fade the opacity of all matched elements to a specified opacity and firing an optional callback after completion.

Custom

• animate( params, duration, easing, callback ) - A function for making custom animations.
• animate( params, options ) - A function for making custom animations.
• stop( ) - Stops all the currently running animations on all the specified elements.
• queue( ) - Returns a reference to the first element's queue (which is an array of functions).
• queue( callback ) - Adds a new function, to be executed, onto the end of the queue of all matched elements.
• queue( queue ) - Replaces the queue of all matched element with this new queue (the array of functions).
• dequeue( ) - Removes a queued function from the front of the queue and executes it.

(X)HTML/CSS Replacement Frameworks

The types of frameworks provide a complete GUI authoring environment. They tend to feature things like Layout Managers, Window, Frames, Progress Bars, multiple types or buttons and other feature that users would expect in a more traditional desktop GUI toolkit.

There are two approaches to this type of framework, some require and are tightly integrated with a Supplement Framework. Others provide a the complete package of GUI and AJAX tools in one package. Script.aculo.us is an example of the former since it requires and integrates well with the Prototype framework. ExtJS is an example of the latter, since it is one package that provides both types of functionality.

Server-End Technology Adapter Kits

Some of the most popular and interesting Ajax frameworks are:

Framework Name	Platform Type	What makes it interesting
ExtJS	Javascript	Small codebase, powerful, in use by many clients
Prototype/Script.aculo.us	Javascript	Completely free, high adoption among many large client, Prototype tends to handle data exchange while Script.aculo.us handle GUI effects. Allows uses of the smaller Prototype only codebase if you don't need fancy visual effect.