Ajax Tutorial

Ajax Frameworks

The Purpose of Frameworks

JavaScript frameworks can serve several purposes:

• Abstraction. Writing JavaScript is notoriously difficult in large part because of the browser and platform differences. Although this has improved a lot since the Netscape 4 / IE 4 days, JavaScript developers still have to be aware of differences in browser object models. One purpose of frameworks is to abstract those differences.
• Widget Libraries. Many frameworks provide libraries of pre-written, customizable widgets (expandable trees, accordions, autocompletes, drag-and-drop controls, etc.).
• Development Structure. Some frameworks make it easier to create structured, object-oriented Ajax applications.

Choosing a Framework

Choosing a framework to use for your Ajax applications is a difficult task. At the time of this writing, the AjaxPatterns website (http://ajaxpatterns.org/Ajax_Frameworks) listed:

• 30 multi-purpose Ajax frameworks
• 32 Java-specific Ajax frameworks
• 27 PHP-specific Ajax frameworks
• 15 .NET-specific Ajax frameworks

Many of these frameworks are created by individuals or small groups and most are non-commercial. So how do you choose? It's a tough job, but here are some general guidelines.

1. Choose a framework with staying power. The more mature frameworks like Prototype and Dojo, which we will review shortly, have built up pretty large followings, so they are more likely to persist. They are also more likely to be better documented and supported by an online community.
2. Choose a framework that is either language neutral or specific to your server-side language. This is pretty obvious, but you don't want a PHP framework if you are building a Java application.
3. Choose a framework that plays nicely with other frameworks. For example, script.aculo.us (see footnote) and Rico (see footnote) both require Prototype, so if you want to use some of their cool dynamic features, you will have to use Prototype as well.
4. Choose a framework that fits your skillset. If your developers are very comfortable with JavaScript, you might choose a framework that is JavaScript-centric like Prototype or Dojo. If you are a team of Java or JSP developers who have not done much client-side programming, you might choose a framework like AjaxAnywhere (see footnote), which autogenerates the JavaScript. Such frameworks provide less flexibility but may decrease development time.

We will look at two popular frameworks: Dojo and Prototype. Note that these frameworks have a much broader focus than Ajax, but for now, we'll be focusing on how they handle XMLHttpRequests.

Dojo (see footnote)

Dojo is a multi-purpose JavaScript toolkit that, according to its website, "allows you to easily build dynamic capabilities into web pages and any other environment that supports JavaScript sanely." Dojo has been in development since late 2004 and is one of the most comprehensive JavaScript toolkits available. It is client-side specific so it can be used on any platform with any server-side language. The documentation for Dojo is relatively good compared with other frameworks.

Downloading Dojo

The latest version of Dojo is freely available for download at http://dojotoolkit.org/downloads as an archived file. Simply extract the files to a folder on your web server. (see footnote) Version 1.1 of Dojo is included with your class files (/dojo/dojo.js). Note that dojo.js has several dependencies, so you should leave the file structure intact.

To make the Dojo toolkit available, include the dojo.js file as you would any other JavaScript library:

<script language="javascript" src="dojo/dojo.js"></script>

You can also use AOL's Content Distribution Network (CDN) for Dojo. This may make your web page download faster as it's possible the user has visited another site that used AOL's CDN and already has the Dojo files cached.

<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.1.0/dojo/dojo.xd.js"></script>

Our class files use this CDN. If you do not have an internet connection, you need to change the path in the script tag to dojo/dojo.js.

Using Dojo for Ajax

Older Dojo versions including .3 and .4 use the dojo.io.bind object to provide a wrapper around the XMLHttpRequest (XHR) object.  The 1.x release of Dojo provides a different function and no longer provides dojo.io.bind.  The new version of Dojo provides two functions that expose XHR a little more directly, dojo.xhrGet and dojo.xhrPost.

Both XHR wrapper functions take a single object as an argument. The only difference between them is the HTTP message type used for the XHR object; dojo.xhrGet will cause the XML request to use the HTTP GET type while dojo.xhrPost will use the HTTP POST message type.

Since both of these functions are part of Dojo base they are included in the dojo.js file and no dojo.require statement is necessary to ensure that the code is part of the page.

The object passed to dojo.xhrGet and dojo.xhrPost has specific properties that control how the actual XHR object is created and how the response from the server is processed. Some of the properties are required but most are optional. The table below describes each of the possible properties.

The following table describes the properties in the argument passed to either dojo.xhrGet or dojo.xhrPost.

Here is the syntax of a simple call to the xhrPost() method:

dojo.xhrPost(
 {
  url: url,
  load: callBackFunction,
  content:  {
   param1: value,
   param2: value,
   param3: value
  }
 } );

The code sample below shows how we would change part of our EmployeeAdmin.html document to use Dojo.

<html>
<head>
<title>Employee Administration</title>
<link rel="stylesheet" type="text/css" href="../Styles/Main.css">
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.1.0/dojo/dojo.xd.js"></script>
<script type="text/javascript">
 var OutputDiv;
 function GetEmployeeList(URL)
 {
  OutputDiv = document.getElementById("EmployeeList");
  OutputDiv.innerHTML="<h2>Loading...</h2>";

  dojo.xhrPost(
   {
    url: URL,
    handleAs: "text",
    load: Display
   });
 }

 function Display(DATA)
 {
  OutputDiv.style.display="block";
  if (DATA.indexOf("Failed") != -1)
  {
   OutputDiv.className="Warning";
   OutputDiv.innerHTML=DATA;
  }
  else
  {
   OutputDiv.innerHTML = DATA;
  }
 }

 window.onload = function()
 {
  GetEmployeeList("../EmployeeList.jsp");
 }
</script>
</head>
 ---- Code Omitted ---- 

As you can see, we only need to make use of the url, handleAs and method properties of the object that is passed to the xhrPost() method. To pass parameters in with the XMLHttpRequest, we would need to include the content property as well.

Another thing to notice is that the callback function (Display()) no longer needs to check the status and the readyState of the xmlhttp object. This is handled by Dojo. The callback function takes a single parameter, which holds the data passed back from the server. The type of this data depends on the handleAs property.

Prototype (see footnote)

Prototype is a multi-purpose JavaScript toolkit that, according to its website, "aims to ease development of dynamic web applications." Many other libraries, such as script.aculo.us and Rico are built on top of Prototype and the Ruby on Rails framework has built-in support for Prototype. These tie-ins make it likely that Prototype will be around for a long time. Like Dojo, it is client-side specific so it can be used on any platform with any server-side language. Prototype is now well documented at http://www.prototypejs.org/api. However, before there was good documentation on the Prototype site, Sergio Pereira put together some very good online documentation at http://www.sergiopereira.com/articles/prototype.js.html, which is still available.

Downloading Prototype

The latest version of Prototype is freely available for download at http://www.prototypejs.org/download as a .js file. Rename the file to "prototype.js" and save it in a folder on your web server. We have included a copy of it with your class files (/prototype.js).

Using Prototype for Ajax

To make the Prototype library available, include the prototype.js file as you would any other JavaScript library:

<script language="javascript" src="prototype.js"></script>

XMLHttpRequests are made using the Ajax.Request() class, which, when instantiated, takes two parameters: a URL string and an object, which has the following properties and methods:

Here is the syntax of a simple call to the Ajax.Request() constructor:

new Ajax.Request(URL, 
 {
  method: "get", //or "post"
  onComplete: CallBackFunction,
  parameters: "param1=value&param2=value&param3=value"
 });

The code sample below shows how we would change part of our EmployeeAdmin.html document to use Prototype.

<html>
<head>
<title>Employee Administration</title>
<link rel="stylesheet" type="text/css" href="../Styles/Main.css">
<script type="text/javascript" src="../../../prototype.js"></script>
<script type="text/javascript" src="../Scripts/Effects.js"></script>
<script type="text/javascript">
 var OutputDiv;
 function GetEmployeeList(URL)
 {
  OutputDiv = document.getElementById("EmployeeList");
  OutputDiv.innerHTML="<h2>Loading...</h2>";

  new Ajax.Request(URL,
   {
    method: "post",
    onComplete: Display
   });
 }

 function Display(REQ)
 {
  OutputDiv.style.display="block";
  if (REQ.responseText.indexOf("Failed") != -1)
  {
   OutputDiv.className="Warning";
   OutputDiv.innerHTML=REQ.responseText;
  }
  else
  {
   OutputDiv.innerHTML = REQ.responseText;
  }
 }

 window.onload = function()
 {
  GetEmployeeList("../EmployeeList.jsp");
 }
</script>
</head>
 ---- Code Omitted ---- 

As you can see, we only need to make use of the url property and the second parameter's method property and the onComplete method. To pass parameters in with the XMLHttpRequest, we would need to include the parameters property as well.

Like with Dojo, the callback function (Display()) no longer needs to check the status and the readyState of the xmlhttp object as Prototype takes care of this behind the scenes.

Throughout the rest of this manual, we will be using Prototype to handle our XMLHttpRequests.

Other Popular Frameworks

Direct Web Remoting (DWR) (see footnote)

DWR is one of the more popular Java-specific frameworks. It makes it possible to call Java methods directly from JavaScript by blackboxing the data transfer to and from the server to make it feel to the developer as if Java objects were natively available to the browser.

AjaxAnywhere (see footnote)

According to its website, "AjaxAnywhere is designed to turn any set of existing JSP or JSF components into AJAX-aware components without complex JavaScript coding." The major benefit of AjaxAnywhere is that it makes it possible to create Ajax applications without writing much JavaScript. The downside is that it does not provide as much flexibility as the more JavaScript-centric solutions.

Simple Ajax (SAJAX) (see footnote)

Like DWR, Sajax allows you to access server-side code directly from JavaScript. It supports ASP, ColdFusion, Perl, PHP, Python, and Ruby, but not Java.

Sarissa (see footnote)

Sarissa is a JavaScript-centric library that isn't specific to any server-side language. It provides a simple function that emulates Mozilla's XMLHttpRequest for Internet Explorer, but that's about it when it comes to client-server communication. It does make using XSLT in the browser very easy.

Other Frameworks

As noted in the beginning of this lesson, there are many more frameworks. For a good list, see http://ajaxpatterns.org/Ajax_Frameworks.

All material in this Ajax Frameworks is copyright 2012 Webucator. The purpose of this website is to help you learn Ajax on your own and use of the website implies your agreement to our Ajax Tutorial Terms of Service.