| Developer: J2EE
"Hello Ajax"! How to Do the Ajax Thing with Oracle JDeveloper
by Frank Nimphius
Get an introduction to Ajax programming by creating a simple "Hello World".
Published May 2006
For sure, the world's most successful computer program is "hello world". Translations of it are available in almost every programming language and pattern.
"Ajax" is a community acronym used by the software industry for a set of related Web browser technologies, which, in combination deliver the rich client user experience for Web applications. The promise of Ajax is to close the usability gap that currently exist between browser based web applications and existing client-server desktop applications. In this article you'll learn how to translate "hello world" into Ajax, going from simple to more advanced in small steps.
Because of the browser XmlHttpRequest object, Ajax applications can use asynchronous communication to retrieve data from the server. There is no 100 %-clear definition of what makes a Web application "Ajaxian." Therefore, the best way to look at Ajax is as a programming pattern to build the next generation of Web applications that bring us closer to what end users know from their client-server desktop clients. It is important to note that Ajax is not bound or related to J2EE and Java; rather, it can be used with .NET, PHP, CGI, and Perl as well. The good news about Ajax is that it doesn't require an example more complex than "hello world" to explain its principles.
This how-to provides you with a first-class, hands-on experience for building an Ajax type of application in J2EE with Oracle JDeveloper.
The technologies used within the exercises are:
Build an Ajax application with Oracle JDeveloper 10.1.3
Following the details listed in this section you build "Hello Ajax" incrementally starting with a static HTML client reading a text string from a server-side file. By the end of this how-to, you will have developed a Web page that reads its data from a servlet on the server, using a CSS style sheet to establish alternating background colors for the retrieved data rows. An input text field allows you to provide your input to the printed message. Download a complete Oracle JDeveloper 10.1.3 workspace
Build a Synchronous Ajax page
Congratulation, you created your first Ajax program!
Enhancing Your Ajax application
The following exercise is builds on the previous example and replaces the helloAjax.txt file with a Http Servlet. Because a servlet is more dynamic than a file in that it can contain logic to modify the format of the response based on pre-defined definitions, you use a CSS style sheet to color the returned rows alternating and also display a text typed in by the page user.
You will notice a slight delay the first time you run the application. This delay is caused by the initial startup time required by the servlet. This delay doesn't make a good impression to the users, which is why in the next section you are going to change the synchronous XmlHttpRequest call to an asynchronous call.
Making Your Ajax Application Asynchronous
Asynchronous requests allow the application user to continue his work in the browser while waiting for the server response. If the user cannot proceed with his work unless the server responded, then still using an asynchronous request is a better approach than synchronous call. For example, instead of the user staring at a pressed button, you can show him some nice "end-user entertainment" widgets, like a progress bar. For this part of the hands-on we are not going that far and instead only change the synchronous call to a asynchronous call.