Article - An Introduction to Ajax and Java Studio Creator 2

Skip to Content Sun Java Solaris Communities My SDN Account Join SDN

Developers Home > Sun Java Studio Creator > How To

An Introduction to Ajax and Java Studio Creator 2

By Steve Fleming and Beth Stearns, January 2006

Print-friendly Version

This article provides an overview of Ajax (or Asynchronous JavaScript And XML) and describes how Ajax fits in well with the Sun Java Studio Creator 2 IDE. It begins with some background information about Ajax (which you may elsewhere see written as Ajax) particularly how Ajax compares with different HTML technologies. The article then provides a more technical overview of Ajax before describing how Ajax and the Java Studio Creator 2 IDE can be used together.

Contents

-	What is Ajax?
-	Ajax and Sun Java Studio Creator 2
-	Summary: Ajax and Java Studio Creator
-	Sequence Diagram

What is Ajax?

Ajax, which is growing rapidly in popularity, is a technique for creating improved web browser user interfaces for a web application. It is becoming so widely used that you probably have seen Ajax at web sites you have accessed, perhaps without even realizing it. Ajax can help increase the speed and usability of an application's web pages by updating only part of the page at a time, rather than requiring the entire page to be reloaded after a user-initiated change.

Furthermore, Ajax uses capabilities already present in modern web browsers and does not require any plug-ins. To better understand Ajax, let's look at a simple example of a web application that includes Ajax and then compare it with HTML and DHTML.

Google(TM) Suggest is a good example of a simple web application using Ajax. See Figure 1.

Figure 1: An Ajax Example: Google Suggest

Here's how this application works. As you type data into an input field, Google offers suggestions to complete the input in a short list that appears below the entry field. For example, in Figure 1, we have typed the letters "aja" and the application continuously updates the suggested list of choices based on what we've typed. In addition to presenting a list of possible entries that complete the input, Google also suggests "ajax" as the most likely choice, pre-types the last part of the string (the "x") in the entry field, and places this choice at the top of the list. If "ajax" is the entry we want, we can simply press the enter key to Google's entry "ajax" without typing the entire string. Suppose instead we wanted Google's suggested "ajanta caves". We can use the down arrow to move to "ajanta caves" and, when highlighted, press the enter key or use the mouse to click that selection. A third option is to continue typing: Google continuously updates the suggestions based on what we type.

Google Suggest accomplishes these improvements in the web browser interface using a technique call Ajax. To better understand what Ajax is, let's first compare it with two other web page techniques, HTML and DHTML.

Ajax and HTML
We could easily implement the functionality of Google Suggest using a simple HTML web application like the one shown in Figure 2.

Figure 2: HTML only mockup of Google Suggest functions

In this HTML-only mockup, the user could click the Suggest button to display a new web page with a list of suggestions. However, the Ajax user interface we just described offers two improvements over the HTML-only mockup:

The Ajax interface requires less user interaction and time. Since the user does not need to click a button to obtain suggestions, the Ajax user interface requires fewer user steps and thus saves the user time.
The Ajax user interface is simpler. Since no extra buttons are needed and because the user only needs to work with a single page rather than two pages, the Ajax interface is less complicated.

Users generally find it easier to accomplish tasks that require fewer actions on their part. Keeping everything to one page also reduces user interactions since there is no clicking or typing to get to another page. To get a feel for this, imagine if you were traveling by air and had to stop en route for an hour layover. Would you rather continue on the same plane or change to a different plane, especially if that means changing terminals and passing through security? Most people find it easier to continue on the same plane rather than change to a second plane for a trip.

In summary, web application developers are excited about Ajax because it provides a technique that saves users time and simplifies the user interface compared with a non-Ajax HTML application.

Ajax and DHTML
A web application that uses DHTML can also offer an improved user experience over a simple HTML application. With DHTML we could easily pop-up a list of choices that update dynamically as the user types in an input field. Both Ajax and DHTML leverage the capabilities of JavaScript running in a web browser.

What makes Ajax exciting is that the web server can provide an updated list of choices each time the user types a key. In a non-Ajax DHTML application you need to send the data for the list of choices when you first send the page and that data must work for all possible user inputs. Clearly for many applications like Google Suggest it is virtually impossible to send all the data to support all possible user inputs. Although in other cases, like a dictionary search, it might be theoretically possible to send all the data with the web page, the transmission time would be prohibitive. Ajax techniques allow JavaScript running in the browser to request and work with data from the server based on user inputs to the web page.

In summary, web application developers are also excited about Ajax is because it allows DHTML-like interactive web page techniques to be used with data requested from the server after user interactions with the page.

Ajax Technical Overview

There are many different tools and technologies for building web application including Java Studio Creator, PHP, J2EE, Ruby on Rails, DotNet, and others. Ajax can be used by all these communities because an Ajax web application only requires a modern web browser. Ajax is not tied to any specific tool, web application framework, or industry vendor. For these reasons a broad range of communities have an active interest in using Ajax. Let's now take a more technical look at Ajax.

First let's dive right in with a look at the steps to using Ajax in a web application.

Figure 3 shows the processing steps taken over time, from the user, browser, and server perspectives, for a web application with Ajax. The steps are numbered according to their sequence in time, with time increasing from top to bottom in the table.

Figure 3: UML Sequence Diagram for Web Application with Ajax Processing

These steps correspond to a scenario such as the one described for Google Suggest. They show how processing moves in a defined sequence among the server, browser, and user. Let's walk through these steps in the order they occur.

Web server sends page with Ajax component

When a page includes Ajax then the Ajax-specific part is considered to be an Ajax component. An Ajax component corresponds to an HTML component, but it has enhanced Ajax processing in both the browser and the server. For Google Suggest, an HTML input component is enhanced to become what may be generically described as an "Auto-Complete Text Field" Ajax component.
Browser displays web page with Ajax component

Although the display to the user at this point often is no different than the display for a non-Ajax component, JavaScript code for the page is waiting beneath the covers to play its part in the Ajax processing.
User provides input to Ajax component in web browser

For our Google Suggest example, the user types "aja". Processing can happen as soon as the first letter is typed, or, as in the case of Google Suggest, quickly typed letters may be lumped together and sent as one request to the server to reduce server load.
Browser runs JavaScript code to process user input

In this step, JavaScript processes the user inputs in the same way as for a page leveraging DHTML. These user inputs may result in JavaScript events. For example, a user types some text into an input field and this may invoke JavaScript events. In a web application with Ajax, these JavaScript events may request data from the server (described in the next step).
Browser asynchronously requests data from server according to user input

JavaScript code running in the browser makes a call to the server that is asynchronous from the normal HTTP request response processing for the page. Typically the data request is based on the user's inputs. For the Google Suggest example, the data request includes the string "aja" typed by the user.
Server processes and responds to browser request for data

The browser uses an HTTP or HTTPS URL to request data from the server. The server can implement an HTTP response by choosing from the many technologies and frameworks used in web applications. Typically the browser request includes parameters, such as "aja", and the server can use the request parameters to form a response. The server response data can be formatted in different ways, just like an HTTP response, and the server indicates the format by setting the "Content-Type" header. XML is a convenient response format for processing in the browser.
Browser updates display using data received from server

In the Google Suggest example, JavaScript code processes the response returned from the server and uses that data to display the list of suggestions shown in Figure 1.
User selects from the suggestions

In this scenario, the next step is that the user selects from the list displayed in step 7 or continues typing (as in step 3).
Browser processes the user's selection and submits the page

JavaScript processes the user's selection: It sets the text field to the selection, closes the display of suggestions, and then, if this is the last field on the form as it is in this simple scenario, submits the page via a standard HTTP request. If there are additional fields on the form, which is the typical case, JavaScript continues to process these fields. In fact, inputs into one component may very well cause side effects that change the presentation of other components on the same page, all without a complete page refresh.
Server responds to HTTP request

In the example, Google's server prepares a web page with search results based on the user's selection.
Browser displays HTTP response

The search results page displays in the user's web browser. This is the last step in the scenario.

Let's quickly summarize the Ajax processing. The magic of Ajax begins when JavaScript running in the browser asynchronously requests data from a web server based on the user's inputs. The server's response is then used to dynamically update portions of the web page. All of this happens without submitting the page.

Summary: What is Ajax?

Ajax is a technique for creating improved web browser user interfaces for a web application.
Ajax has broad interest and is actively being used by many different communities involved with web applications
Ajax uses JavaScript running in the browser to asynchronously obtain data from the server and then update a portion of a web page.

Ajax and Sun Java Studio Creator 2

In a JavaOne 2005 keynote demo, Tor Norbye built, deployed, and demonstrated in a browser a Google Suggest-like web application in just three minutes time. Tor was able to work so quickly because he used the Sun Java Studio Creator 2 IDE with an associated Ajax-enabled text completion component.

The Java Studio Creator IDE's components/properties/events approach for developing web applications is well matched for Ajax. Java Studio Creator 2 is accompanied by components with improved user interfaces via DHTML functionality. These DHTML components generate JavaScript running in the web browser, which generally saves you from the need to implement and test JavaScript yourself. Component properties let you customize the appearance and behavior of a component, including aspects implemented in DHTML. Events let you easily write server application code for the component.

Tor's demo showed that it is possible to build a web application with Ajax user interface improvements using Java Studio Creator 2 and its component-based approach to web application development. An Ajax component includes the JavaScript that runs in the browser to process user inputs, request data from the web server, and update the web page based on the server response. (This functionality is discussed in steps 4 through 7 in the technical overview section.) An Ajax component can save you from the need to develop JavaScript in the same way that components provided with Java Studio Creator today can save you from the need to implement JavaScript and DHTML.

To help you see how this works, we're releasing an add-on component library as an update to Java Studio Creator 2 that allows you to use a variety of sample Ajax components. (These components are the BluePrints Ajax components.) The Sample Ajax Components article walks you through the samples and helps you learn more. Like non-Ajax components, when an Ajax component is enhanced to support Java Studio Creator 2, you can efficiently build a web application using the Ajax component.

One interesting thing the samples show is how easily an event handler in the IDE can process the asynchronous Ajax request. In Java Studio Creator 2, you may simply write an event handler that returns a result as described in steps 4 through 7. The IDE makes this extremely easy: when you are ready to write the event handler, double click the component and the IDE opens the Java source code to the event handler method template it has just created. While Tor's example showed a component making a web service request, in general, an Ajax event handler can perform processing that does not require a web service. For example, an Ajax event handler can perform a database query and return results from the query. Regardless of the form of an Ajax request, the server processing and browser user interface design should together ensure a responsive user interface.

Also, the Ajax event handler has all the flexibility and power of JavaServer Faces event handlers, including binding Ajax request events to properties, which we mention in the Sample Ajax Components article.

Ajax components also can have properties that may be used in the Ajax processing on the client and/or server side. For example, one of the samples includes properties that are used as parameters for a Google Maps display request. The IDE makes it easy to set these properties, just like for other non-Ajax components.

Summary: Ajax and Java Studio Creator

Java Studio Creator 2's component/properties/events approach for developing web applications works very well with Ajax.
Asynchronous Ajax requests to the server can be implemented by simple event handler code that returns results.
Ajax event handler code may work with data in general ways as other event handlers do.
You may create a web service when implementing your Ajax event handler, although this is not necessary.
Ajax components may have properties that can be used in Ajax processing on the client and/or server side depending on the component implementation.

Digging Deeper
For a more technical look at the internals of Ajax with respect to Java Studio Creator, look at the JavaOne 2005 conference session on Ajax and J2EE. The conference session includes additional references.

Things You Can Do
Installing and Using the Blueprints Sample Ajax Components in Java Studio Creator is an article that will help you learn about Ajax, what Ajax can do, and what the IDE can do with Ajax. The components are samples and thus are not for use in your production web applications. As your understanding of Ajax grows, you can think about how your web applications might be extended to incorporate Ajax components. If you feel there is an Ajax-based user interface improvement that would be helpful for your web applications, feel free to drop us a suggestion via the forum.

Sequence Diagram

Table 1 gives the text equivalent for the steps shown in Figure 3.

Table 1. Web Application with Ajax Processing: Steps Over Time

Time Step	User	Browser	Server

1			Send web page with Ajax component
2		Display web page with Ajax component
3	Provide input to Ajax component
4		Run JavaScript to process user input
5		Asynchronously request data from server
6			Process and respond to data request
7		Update display for data received
8	Select item from updated display
9		Process user's selection and submit page
10			Process and respond to HTTP request
11		Display HTTP response

Return to the Sun Java Studio Creator developer resources pages.

Find out more about Java Studio Creator and Ajax on our Ajax page

See a screencast demo by Ed Burns (co-spec lead for JavaServer Faces) of the Ajax components available inside Java Studio Creator.

Oracle is reviewing the Sun product roadmap and will provide guidance to customers in accordance with Oracle's standard product communication policies. Any resulting features and timing of release of such features as determined by Oracle's review of roadmaps, are at the sole discretion of Oracle. All product roadmap information, whether communicated by Sun Microsystems or by Oracle, does not represent a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions. It is intended for information purposes only, and may not be incorporated into any contract.


	About Sun \| About This Site \| Newsletters \| Contact Us \| Employment \| How to Buy \| Licensing \| Terms of Use \| Privacy \| Trademarks © 2010, Oracle Corporation and/or its affiliates		A Sun Developer Network Site Unless otherwise licensed, code in all technical manuals herein (including articles, FAQs, samples) is provided under this License. Sun Developer RSS Feeds