Development

SSPEEDYPEEDY A APPLICATIONPPLICATION D DEVELOPMENTEVELOPMENT WITHWITH AJAX AJAX

Matt Topper, IT Convergence

OVERVIEW This paper covers the who, what, where, when, why, and how of Ajax based interface development. While not a technology or framework itself, Ajax combines the major web presentation technologies to deliver a rich client / user experience. The technology has been around for almost ten years, but it wasn’t until recently that developers really started to exploit these technologies together to build stunning applications. This paper will explain where Ajax came from, how JavaScript and XML can be combined to deliver interfaces, and some of the major libraries and frameworks that you can use to build rich web-based applications.

WHO INVENTED AJAX? Since the beginning, Internet companies have wanted richer, more dynamic Internet applications. While the Internet allowed companies to share live data easily across sites, many felt like that had taken giant steps back in terms of user interfaces. Many technologies were developed to try and give richer user experiences. The simple page-based request and response model forcing the entire page to be redrawn for each request was too slow to replace thick client applications.

Figure 1: Standard HTML Page Level Request and Response Model

Much of people’s time was spent waiting for the data requested to come back to their browser. Technologies such as Java Applets and Macromedia Flash were created to allow for richer interfaces and help combat the “Click, Wait, Refresh” model. But these too proved to be a challenge. To be fast, custom browser plug-ins had to be installed in the client’s browser which was not always allowed to pass through company firewalls. Once the plug-in was installed, you then had to download the actual application software to run inside of the plug-in. This was a long process and sometimes caused frustrating user experiences. It was also a problem for the companies developing the applications, because it required specialized developers to build the applications and complicated testing.

Due to these problems, developers started looking for other solutions. The major enabling technology that makes Ajax possible was first developed by Microsoft in 1998 for use in their Outlook Web Access product. They knew they needed to be able to asynchronously refresh pieces of the application page and check for new email, but not redraw the entire content of the screen. With Internet Explorer 5, they introduced the XMLHttpRequest object which was to become the final key in the Ajax puzzle. The HTML, JavaScript, and XML languages were

1 Paper 441

Development

well known by all web developers, and now with XMLHttpRequest, it was easy to combine them dynamically to build rich applications. The term Ajax was first used by a consultant, Jesse James Garrett in 2005, after getting sick of writing out “Asynchronous JavaScript and XML” in his presentations.

2 Paper 441

Development

WHAT IS AJAX? Ajax is the use of JavaScript and XML in combination to generate rich Internet applications. Again, Ajax is not a technology, it’s not a library, and it’s not even a framework. It’s an new and different approach to delivering web applications using certain technologies. It’s a common name for the grouping of several powerful, familiar technologies working together. The main components of Ajax include:

Asynchronous data retrieval in XMLHttpRequest

Standards-based presentation in XHTML and CSS

Dynamic display manipulation in the Document Object Model (DOM)

Data element interaction through XML

Binding and integration through the use JavaScript

Because we can weave these technologies together, we can drastically change the client interaction model allowing the user to continue working in the application as information is sent back and forth between the browser and web servers.

Figure 2: Ajax Based Request and Response Model

By decoupling the request and response process from the browser user interface, costly page refreshes are removed and data can be dynamically populated based on user interaction. Data can also be pushed to the client browser, something that wasn’t possible in a page request and response model. In the page model, data couldn’t be displayed until the client requested information. Now we are able to send alerts and update information as it happens turning the browser into a listening daemon. We have effectively separated data, format, style and function into independent components. It also allows the server side logic to be language independent, every language is able to output XML and interact with the Ajax Engine. Because of the standards-based Ajax engine, we are able to easily take advantage of service oriented architectures and combine multiple data sources from multiple data providers.

WHERE HAVE I SEEN THIS BEFORE? The first major applications that the public saw implementing the Ajax technologies together were from Google. The first one was GMail quickly followed by Google Maps. GMail capitalized on XMLHttpRequest to automatically check email and load messages into the browser without refreshing the page. User’s were able to switch between views on their email allowing them to look at emails, like a message board thread or in the classic linear style, without refreshing the page. However, Google Maps really set the Ajax world on fire. Before Google Maps, online mapping applications were the epitome of classic page level request and

3 Paper 441

Development

response applications. A user entered an address into the page and submits the data. If the address wasn’t correct, the user would have to make another guess. If they were correct it would display a single static map. If you wanted to zoom into the page it was another page refresh. The process was slow and painful to use. Because Google pre-sliced the entire country into individual 180 x 180 pixel images, they were able to dynamically create maps with a little Ajax magic. If you wanted to zoom into the page, it would adjust images on the page. When a request for driving directions was entered, the maps adjusted in order to overlay the route information through simple math that could be calculated in the browser. Since all of the requests and responses were now in JavaScript libraries in the browser, people quickly picked up the technology and started creating their own applications with the Google code and using Google’s images with their own data. Some of the early applications took the Chicago crime (http://www.chicagocrime.org/) statistics and mapped it to neighborhoods by crime type. Others started adding pictures to the maps adding another dimension to the mapping data. This practice of combining content from more than one source to create new applications became known as creating mashups. From this Ajax really began to take off, today there are over 1600 active mashup applications registered with the Programmable Web Website (http://www.programmableweb.com/mashups). The Programmable Web provides a list of APIs and applications. This is by far not an exhaustive list, but provides a great example of many sites using Ajax to deliver solutions.

While much of Ajax is the ability to combine data from multiple sources and decouple the user experience from the request and response cycle, some of the most impressive components are the visualizations. Full graphing libraries are available to visualize the data dynamically with only HTML and CSS for free (http://dojotoolkit.org/).

Figure 3: Graphing API Example from http://www.cynergysystems.com/blogs/blogs/andrew.trice/strikeiron/Dashboard.html

One of the major areas that Ajax interfaces are revolutionizing is the real estate industry. Sites such as Trulia (http://www.trulia.com) allow potential buyers to look for houses in a certain area and begin filtering the houses right on the screen. All the homes for sale in the area are plotted on a map that can be dragged, letting you check for houses in nearby neighborhoods to compare prices. They also provide graphs showing what other houses in the neighborhood

4 Paper 441

Development

have recently sold and the prices they sold for. It’s allowing buyers to circumvent hiring agents, saving hours of their time and saving them thousands in closing costs.

Figure 4: Trulia.com Home Listing (http://www.trulia.com)

Even Oracle’s own tools are using Ajax. The new Business Activity Monitoring interface and its automatic updating utilizes Ajax type technology to drive the interfaces. There are some components in the current release of jDeveloper and there is promise of much more in the Version 11 release. Oracle has an entire micro site dedicated to Ajax technologies. (http://www.oracle.com/technology/tech/java/ajax.html) The new Oracle WebCenter product uses Ajax technology inside of the JSR-168 portlets to build the next generation enterprise dashboards.

WHY SHOULD I USE AJAX? Now that you’ve seen the power of Ajax-based user interfaces and the type of experience they can provide, there are also some major technical reasons why Ajax makes sense for your applications. The most obvious is the user interface. Ajax interfaces behave more like standard thick client applications. Operations appear much lighter to the end user, because only a portion of the page is changed instead of reloading all of the page’s objects. The changes are immediate and interactive making the user more engaged with the application. From an architect perspective, it saves a great amount of bandwidth in the application. The only data being transferred between the browser and the user are the subsections of a page that need to change. The server doesn’t have to produce the header, navigation, footer, and images for each page. Some sites have seen their bandwidth cut in half by implementing some simple Ajaxian interfaces to their sites. Not only is it saving time on your application servers, but also in the client browser since the DOM parser doesn’t have to validate the entire page for each request. It only has to validate the nodes of the tree that are being added or removed.

There are some disadvantages to the Ajax model, which developers should be aware of. The technology is not completely browser independent; there are some subtle differences between the different browsers that can complicate the request and response cycle. Most of these have

5 Paper 441

Development

already been identified and almost all of the major libraries and frameworks take these differences into account. If you are going to be developing any of your own Ajax components you need to be aware of these issues before building them. Most of this risk can be mitigated through code branching or existing JavaScript libraries; I’ll discuss this some more in a later section of this paper. Another major issue with Ajax applications can be network latency. If your applications are on a small pipe or your application servers are overloaded it can ruin the user experience. Even though we are freeing the user interface from the request / response cycle, if the user is waiting for their information to return, it’s going to be frustrating. It is highly suggested that you use a “throbber” to indicate that the application is working in the area of the page where you are waiting for the information to be returned. The last major problem with Ajax interfaces is the back button. Since the page components are being managed inside of JavaScript and the DOM, the back button may provide unexpected behavior for the user. As Ajax type interfaces continue to expand, users are coming to expect this and the problem is mitigating itself. While none of these issues are major barriers, they are important to keep in mind when developing your own Ajax applications.

WHEN AM I GOING TO LEARN HOW THIS WORKS? How about right now? There are literally over a dozen books and millions of articles and blog entries on Ajax, so finding more information on the technology isn’t hard. What I plan on doing is covering the basics of how to create a simple XMLHttpRequest to retrieve an XML feed from my blog and displaying the entries on the screen with a link to view more information. First things first, let’s look at how a XMLHttpRequest is structured:

<script language="javascript" type="text/javascript">

var requestObject = null;

function generateRequest() {try { requestObject = new XMLHttpRequest();} catch (trymicrosoft) { try { requestObject = new ActiveXObject("Msxml2.XMLHTTP"); } catch (oldermicrosoft) { try {

requestObject = new ActiveXObject("Microsoft.XMLHTTP");} catch (failed) { requestObject = null;}

}}

if (requestObject == null) alert("You need a new browser, give it up lynx just won't cut it anymore!");

}</script>

In the above code we create a new variable called requestObject to manage the requests and responses from the server. To handle the differences between the browsers we have to use the next three try-catch block to create the actual request object. In the first attempt requestObject = new XMLHttpRequest(); we are trying to create the objects in Mozilla, Firefox, Safari and Opera. This is also the new planned standard for all browsers based on the latest W3C spec. We shouldn’t be surprised that the next two blocks take into account the differences between the Microsoft browsers. The first ActiveXObject is used for Internet

6 Paper 441

Development

Explorer 6.0 and up, the second is used for Internet Explorer 5.5 and up. If you’re using anything older than that, well, it’s definitely time to get you using Firefox anyways.

Now that we have created the process for generating the request, we want to setup our page with all the variables we need to generate the request. On the actual page we are going to have an input box to put the URL to the blog’s RSS feed and a button to go grab the feed. Once the feed is retrieved we are going to format the blog entries and then display them on the page. For the body of the HTML page we are going to use the following code:

<body><h2>What's On The Blog Today?</h2>Which Blog Are You Looking For?<br /><input name="blogURL" id="blogURL" value=" http://www.matttopper.com/?feed=rss2" size="100" /><input type="button" onClick="GetBlog();" value="Get The Blog!" /><br /><div id="feedcontent"></div>

</body>

As you can see, this page is not incredibly complex and is basically split into two parts: The input box where the RSS feed URL is entered with the button to get the content, and the <div> tag where the current blog entries will be displayed. On the blogURL button we have a GetBlog JavasScript function implemented. The GetBlog function will create the XMLHttpRequest object, get the requested blog URL, send the request, and display the results.

function GetBlog() { generateRequest();

// change the status to requesting datavar contentArea = GetObject("feedcontent");clearText(contentArea);replaceText(contentArea,"Requesting data ...");

// Prepare the requestvar theBlogURL = GetObject("blogURL").value;

requestObject.open("GET", theBlogURL, true);// Set the onreadystatechange functionrequestObject.onreadystatechange = requestProcessor;// SendrequestObject.send(null);

}

The GetBlog code is pretty simple in that it clears out the content area, puts a “throbbing” message to allow the user to know the application is working. We then call the blogURL from the input tag and wait for the XML document to return. Notice that we called the generateRequest function that we discussed earlier. After we open the request we see a new function called “onreadystatechange.” This is the event that allows us to decouple the user interface from the request response objects. There are 5 available readystates:

0 Uninitialized – The request object has been created but the open function has yet to be called.

1 Loading – The open function has been called, however, send has not been called.

2 Loaded – Send was called, the headers and status are available to parse, but the entire document hasn’t been completely downloaded yet

3 Interactive – Downloading, the responseText has started to be populated, but it is not yet complete

7 Paper 441

Development

4 Completed – All operations are finished and the document can be fully manipulated without anything else coming in

As always, not all of the browsers correctly implement the ready state functionality and not all five of the states are returned. Only the 3 and 4 states are implemented in Internet Explorer, Mozilla, Firefox, Safari and Opera. In the latest W3C spec, all five of the readystates need to be implemented to be compliant. The spec is not yet complete, so we can only implement based on the 3 and 4 states. Each time the readystate changes the requestProcessor function is called. Next we send the message and begin the Ajax request / response cycle. Let’s take a look at the requestProcessor. Because it’s such a long piece of code, the explanation of each component is done inline.

function requestProcessor() {// If data received correctlyif (requestObject.readyState==4) {

// if data is validif (requestObject.responseText.indexOf('invalid') == -1) {

// Parse RSS XML Documentvar node = requestObject.responseXML.documentElement; // Get the ID of the content area we are trying to modifyvar contentArea = GetObject("feedcontent");/* Get the blog information, because RSS2 is an XML standard it * is very easy to parse the document. There are two main areas to * an RSS2 feed: The channel which is the metadata for the feed * and the items which are the articles for the blog. * We first want to parse the metadata for display purposes*/var channel = node.getElementsByTagName('channel').item(0);var title = channel.getElementsByTagName('title').item(0).firstChild.data;var link = channel.getElementsByTagName('link').item(0).firstChild.data;// Now we want to create our display elements on the pagevar newBlogTitle = document.createElement("H2");var newBlogARecord = document.createElement("a"); newBlogARecord.setAttribute("href",link);var linkText=document.createTextNode(title); newBlogARecord.appendChild(linkText); newBlogTitle.appendChild(newBlogARecord);/** We could append the newBlogTitle to the contentArea,

* but since we are looping through a large XML document * that may take some time. I suggest * waiting until we have all the blog entries figured out. */

// We now want to create an unordered list for all // the blog articles

var unorderedArticleList = document.createElement("ul");// The items variable holds all of the blog articles var items = channel.getElementsByTagName('item');// Now we want to look through all the articles and // create a list of the objectsfor (var n=0; n < items.length; n++){ // Get the nth instance of the items blog information

8 Paper 441

Development

var itemTitle = items[n].getElementsByTagName('title').item(0).firstChild.data;

var itemLink = items[n].getElementsByTagName('link').item(0).firstChild.data;

var itemPubDate = items[n].getElementsByTagName('pubDate').item(0).firstChild.data; // Create the listed items for each blog entry var newArticle = document.createElement("li"); // Generate the a record and href var newArticleARecord = document.createElement("a"); newArticleARecord.setAttribute("href",itemLink); // Create the Link Text and then append it inside the A Record var newLinkText=document.createTextNode(itemTitle); newArticleARecord.appendChild(newLinkText); // Take the publication date and add it to the end // of the A Record line var newPubDate = document.createTextNode(" : "+itemPubDate); newArticle.appendChild(newArticleARecord);

newArticle.appendChild(newPubDate); // Append the new blog entry article and append // it to the unordered list

unorderedArticleList.appendChild(newArticle);}// Display the result//GetObject("feedcontent").innerHTML = content;// Clear the text out of the content AreaclearText(contentArea);

contentArea.appendChild(newBlogTitle);contentArea.appendChild(unorderedArticleList);

}else {

// Clear the text out of the content AreaclearText(contentArea);// Tell the user that there was error requesting datavar newError = document.createTextNode("Error requesting data.");GetObject("feedcontent").appendChild(newError);

}}

}

As an overview the function waits until the readystate is set to 4 (complete) and then parses the XML document for the blog information and all the entries. It then strips out the information by node and manipulates the DOM to add the blog title with a link and all of the entries in an unordered list. The final output of the application is shown below:

9 Paper 441

Development

Figure 5: The Easy Blog Reader Output

The application should be able to handle any RSS2-based blog feed. Obviously, the interface is simple right now, but with some minor code tweaks you could easily have your own blog aggregator in no time. The full code for the page can be found at the end of this paper. Feel free to take any of it and start building your own Ajax components.

HOW CAN I PUT THIS IN MY APPLICATIONS? Now that you know how the Ajax request and response cycle works and how to start creating your own Ajax components, you should be relieved to find out that there are many libraries and frameworks available to make your life as a developer much easier. As I said before, Oracle is building more Ajax components into the next release of Oracle jDeveloper (11) and has many articles on integrating the different frameworks into the current versions. They are also leaders in the OpenAjax Alliance which strives to standardize Ajax development to allow interoperability between tools and browsers. Oracle’s Ajax page can be found at:

http://www.oracle.com/technology/tech/java/ajax.html

There is a jDeveloper plug-in (http://www.gdevelop.com/?q=node/12) available to directly integrate the Google Web Toolkit (http://code.google.com/webtoolkit/) into your application interfaces.

If you are looking for some extremely powerful libraries to integrate take a look at the Echo2 framework available at:

http://www.nextapp.com/platform/echo2/echo/

10 Paper 441

Development

The example demos they provide alone will amaze you to the powers of Ajax user interfaces

Figure 6: Echo2 Demo Implementations

Some of the other major components to look at are Prototype (http://www.prototypejs.org/), Dojo (http://dojotoolkit.org/), Direct Web Remoting (http://getahead.ltd.uk/dwr), Yahoo UI Library (http://developer.yahoo.com/yui/), and Script.aculo.us (http://script.aculo.us/). There are literally hundreds of more libraries out there for almost every interaction and language you can dream of.

Within the next few years, Ajax interactions will become standard in just about all applications. As the technology evolves the frameworks and IDE tools will become much more mature allowing for 4GL application development environments for web based applications. Finally, the Internet is becoming a place where the user interfaces will be and even possibly exceed those of traditional thick client server interfaces. While the standards are being set, don’t be afraid to start jumping in and start including Ajax interactions within your own applications. It’s amazing to see how Ajax components transform your user’s experience and their perception on your applications. It’s truly revolutionizing how applications are delivered today.

11 Paper 441

Development

AAPPENDIXPPENDIX A: E A: EASYASY RSS2 R RSS2 READEREADER A AJAXJAX C CODEODE

<html><head><title>Easy RSS2 Reader</title></head><script language="javascript" type="text/javascript">var requestObject = null;/* * Create requestObject */function generateRequest() {

try { requestObject = new XMLHttpRequest();} catch (trymicrosoft) { try {

requestObject = new ActiveXObject("Msxml2.XMLHTTP"); } catch (oldermicrosoft) {

try { requestObject = new ActiveXObject("Microsoft.XMLHTTP");} catch (failed) { requestObject = null;}

}}

if (requestObject == null) alert("You need a new browser, give it up lynx just won't cut it anymore!");

}/* * Replace Text */function replaceText (elemnt, text) { if (elemnt != null) { // First we want to remove all of the existing DOM nodes from the document clearText(elemnt); // Next we want to put in the text into the element var newNode = document.createTextNode(text);

elemnt.appendChild(newNode); }}/* * clearText function*/function clearText (elemnt) { if (elemnt != null) { // First we want to remove all of the existing DOM nodes from the document if (elemnt.childNodes){

for ( var i =0; i < elemnt.childNodes.length; i++ ) { var childNode = elemnt.childNodes[i];

elemnt.removeChild(childNode); }}

}}

12 Paper 441

Development

/* * requestProcessor function */function requestProcessor() {

// If data received correctlyif (requestObject.readyState==4) {

// if data is validif (requestObject.responseText.indexOf('invalid') == -1) {

// Parse RSS XML Documentvar node = requestObject.responseXML.documentElement; // Get the ID of the content area we are trying to modifyvar contentArea = GetObject("feedcontent");/* Get the blog information, because RSS2 is an XML standard it * it very easy to parse the document. There are 2 main area to * an RSS2 feed. The channel which is the metadata for the feed * and the items which are the articles for the blog. * We first want to parse the metadata for display purposes*/var channel = node.getElementsByTagName('channel').item(0);var title =

channel.getElementsByTagName('title').item(0).firstChild.data;var link = channel.getElementsByTagName('link').item(0).firstChild.data;// Now we want to create our display elements on the pagevar newBlogTitle = document.createElement("H2");var newBlogARecord = document.createElement("a"); newBlogARecord.setAttribute("href",link);var linkText=document.createTextNode(title); newBlogARecord.appendChild(linkText); newBlogTitle.appendChild(newBlogARecord);/* * We could append the newBlogTitle to the contentArea, but since we are * looping through a large XML document that may take some time I

suggest * waiting until we have all the blog entries figured out.*/

// We now want to create an unordered list for all the blog articles var unorderedArticleList = document.createElement("ul");

// The items variable holds all of the blog articles var items = channel.getElementsByTagName('item');// Now we want to look through all the articles and create a list of the

objectsfor (var n=0; n < items.length; n++){ // Get the nth instance of the items blog information

var itemTitle = items[n].getElementsByTagName('title').item(0).firstChild.data;

var itemLink = items[n].getElementsByTagName('link').item(0).firstChild.data;

var itemPubDate = items[n].getElementsByTagName('pubDate').item(0).firstChild.data; // Create the listed items for each blog entry

var newArticle = document.createElement("li");// Generate the a record and href

var newArticleARecord = document.createElement("a"); newArticleARecord.setAttribute("href",itemLink);

13 Paper 441

Development

// Create the Link Text and then append it inside the A Record var newLinkText=document.createTextNode(itemTitle); newArticleARecord.appendChild(newLinkText);

// Take the publication date and add it to the end of the A Record line

var newPubDate = document.createTextNode(" : "+itemPubDate); newArticle.appendChild(newArticleARecord);

newArticle.appendChild(newPubDate); // Append the new blog entry article and append it to the unordered

listunorderedArticleList.appendChild(newArticle);

}// Display the result//GetObject("feedcontent").innerHTML = content;// Clear the text out of the content AreaclearText(contentArea);

contentArea.appendChild(newBlogTitle);contentArea.appendChild(unorderedArticleList);

}else {

// Clear the text out of the content AreaclearText(contentArea);// Tell the user that there was error requesting datavar newError = document.createTextNode("Error requesting data.");GetObject("feedcontent").appendChild(newError);

}}

}/** Main AJAX RSS reader request*/function GetBlog() { generateRequest();

// change the status to requesting datavar contentArea = GetObject("feedcontent");clearText(contentArea);replaceText(contentArea,"Requesting data ...");

// Prepare the requestvar theBlogURL = GetObject("blogURL").value;

requestObject.open("GET", theBlogURL, true);// Set the onreadystatechange functionrequestObject.onreadystatechange = requestProcessor;// SendrequestObject.send(null);

}function GetObject(id){

var el = document.getElementById(id);return(el);

}</script><body>

<h2>What's On The Blog Today?</h2>

14 Paper 441

Development

Which Blog Are You Looking For?<br /><input name="blogURL" id="blogURL" value="http://www.matttopper.com/?feed=rss2" size="100" /><input type="button" onClick="GetBlog();" value="Get The Blog!" />

<br /><br /><div id="feedcontent"></div>

</body></html>

FROM THE LAWYERS The information contained herein should be deemed reliable but not guaranteed. The author has made every attempt to provide current and accurate information. If you have any comments or suggestions, please contact the author at mtopper(at)itconvergence.com.

15 Paper 441