As Published In
Oracle Magazine
September/October 2006

DEVELOPER: Industry Standard


Getting Rich with Ajax

By Rich Schwerin

Build rich internet applications with Asynchronous JavaScript and XML.

If you've ever used Google Maps to get directions or Flickr to share photos, you've seen how today's dynamic Web applications blur the line between traditional Web and desktop applications—with no browser plug-ins or proprietary browser features required. Two of the technologies responsible for creating these rich internet applications are Asynchronous JavaScript and XML, known collectively as Ajax.

Ajax is a combination of technologies used to build highly interactive, browser-based user interfaces (UIs), and it substantially enhances the interactivity, performance, and usability of Web applications. This article outlines the core fundamentals of Ajax, what you can do with Ajax today, and how Oracle supports Ajax.

Remote Scripting Redux

"All hype aside, Ajax isn't really new. In the past, it was referred to as remote JavaScript or remote scripting, and the major browsers have supported it for several years now," explains Chris Schalk, principal product manager and Java evangelist for Oracle's Application Server and Development Tools division. "Google Maps marks a renaissance in the user experience for Web applications, but the technology behind it has been out for a while. Ajax—in a nutshell—provides the ability to fetch data without the need for the entire page to be refreshed."

Before Ajax and its clever uses of remote scripting, Web applications often required a full-page refresh when the user changed anything on an application page, such as selecting a category and expanding or collapsing a form. The application user often had to wait for complete page refreshes several times on a single Web page—not very sophisticated compared to today's rich user experience. "With Ajax you get much better interactivity and you can stay on the same page longer, unlike with traditional Web applications, where you're always navigating between multiple pages, refreshing entire pages each time," explains Schalk. "Ajax has also become synonymous with rich-client architecture in general, so things like sliders and accordion panels can interact with the UI in a much more interactive way without requiring full-page refreshes each time."

Schalk explains that Ajax applications require two core technologies: a JavaScript-enabled browser that supports XMLHttpRequest objects and an HTTP server that can generate XML or other markup, including JavaScript Object Notation. Because all the popular browsers support JavaScript and the necessary XMLHttpRequest objects, and because any Web server technology can generate XML (or any markup), the core Ajax technology is widely available.

"An Ajax application in its simplest form is a standard HTML user interface with JavaScript components and functions that interact with an HTTP server that can generate XML or other markup dynamically," says Schalk. "Any dynamic Web technology, ranging from CGI to servlets—including JavaServer Faces [JSF]—can serve as a server-side Ajax technology."

Oracle JDeveloper and Ajax Render Kit

Ajax Under the Hood


Figure 1 shows the key elements of a core Ajax application, including the following:

 

figure 1

 

  • An HTML page that contains UI elements that interact with the Ajax JavaScript functions and the Ajax JavaScript functions that interact with an Ajax server

  • A server that can process XML HTTP requests and generate XML


An Ajax application typically includes a static or generated (via JSP/JSF) HTML user interface page. This page usually contains elements such as an input field, a button, or anything that can be linked to Ajax-enabled JavaScript. Imagine, for example, a fictitious e-commerce site called the Acme Store. It has a store locator button that enables users to find the store closest to a given zip code. Clicking the button fires an Ajax-enabled JavaScript function that passes the zip code to an Ajax server object that will return a list of stores.

In this example, the Ajax JavaScript function first checks to see if the browser supports asynchronous XMLHttpRequests and then invokes the Ajax request. Because the request is made asynchronously, a callback function (processAjaxResponse) is set to fire when the response returns from the Ajax server object. As the response comes in, the callback function processes the incoming XML data containing the list of stores. It then uses JavaScript document object model methods to dynamically update the Web page with the new list of stores.

In addition to responding to a button click as in this Acme Store example, Ajax client functions can be invoked via other means to improve the end-user experience. For example, as a user types individual characters, an Ajax request could be made with the onKeyUp JavaScript event—an Ajax autocompletion feature can be implemented this way. An Ajax client request could also be made with a timer to provide an Ajax autosave feature that could automatically save all the information in a form to prevent accidental loss of data in the event of a browser crash.

For more-detailed information on the programmatic workings of Ajax, see "A Hype-Free Introduction to Ajax ."

Most application development technologies benefit greatly from well-defined development frameworks, and Ajax is no exception. One such Ajax-related framework is Oracle Application Development Framework (ADF) Faces, the ADF view technology based on JSF. Oracle ADF Faces provides a rich set of various JSR 127-compliant UI components with built-in functionality, such as data tables, hierarchical tables, and color and date pickers that can be customized and reused in applications. This means that developers can take advantage of Ajax without necessarily having extensive knowledge of underlying Ajax technologies.

"Whereas most Ajax toolkits force developers to learn JavaScript and DHTML [Dynamic HTML], Oracle abstracts the Ajax technologies into a JavaServer Faces render kit, which is offered as part of Oracle ADF Faces," says Ted Farrell, chief architect and vice president of tools and middleware at Oracle. "This means that developers just need to program to the same JSP/JSF APIs they already know, and that the Oracle Ajax render kit will generate the JavaScript, DHTML, SVG [Scalable Vector Graphics], and XMLHttpRequest code that is sent to and from the browser."

Oracle will submit the Ajax render kit to the open source community as a follow-up to a previous donation of JSF components to the Apache MyFaces project. The Oracle Ajax render kit is one of four render kits Oracle offers. The others are HTML, which primarily generates HTML and some JavaScript; Telnet, which takes JSF components and renders them out into telnet; and Mobile, which takes components and renders them for mobile devices.

Oracle ADF Faces and the Oracle Ajax render kits are not the only Oracle tools available for developers working with Ajax. "Oracle JDeveloper 10g provides a wide spectrum of options in terms of what can be built with Oracle ADF technology, so when it comes to Ajax, developers have choices," explains Farrell. "You can program in JavaScript directly, or you can download the Oracle ADF Faces components and the Oracle Ajax render kit, and then you get a very visual, standards-based environment. Oracle JDeveloper adapts to developers' programming styles, so different developers working on the same team can edit exactly the same data in a variety of ways they're most comfortable with."

Oracle Backs Open Ajax

Next Steps



READ more about
oracle.com/technetwork/topics/ajax-096923.html
adaptivepath.com/publications/essays/archives/000385.php
 A Hype-Free Introduction to Ajax

 JOIN the Ajax community

 DISCOVER Ajax development with Oracle JDeveloper

 DOWNLOAD Oracle JDeveloper and Oracle ADF

Although Oracle recently joined the Open Ajax initiative to promote Ajax, Farrell explains that Oracle's support for Ajax isn't new—Ajax technology has been part of the Oracle Fusion Middleware architecture for more than two years. "Oracle is strongly committed to Ajax technology, and many of our products, including Oracle JDeveloper 10g Release 3, utilize Ajax standards," says Farrell. "As a result, Oracle is making it easier for developers to reap the benefits of Ajax today and in the next generation of application development."

The initial supporting members of the Open Ajax initiative include BEA, Borland, Dojo Foundation, Eclipse Foundation, Google, IBM, Laszlo Systems, Mozilla, Novell, Openwave, Oracle, Red Hat, Yahoo!, Zend, and Zimbra. The initiative promotes Ajax's promise of universal compatibility with any computer device, application, or operating system, and easy incorporation into existing and future software programs.

 


Rich Schwerin (rich.schwerin@oracle.com) is a product marketing manager with Oracle Technology Marketing.


Send us your comments