|
The AJAX Approach to Richer Interfaces
Apply the JSF-component model to encapsulate complex AJAX code into components for simplifying interactive Web applications
by Chris Schalk
April 5, 2006
In the relatively short history of the Web there has been a constant evolution of technologies ranging from the Common Gateway Interface (CGI), Perl, Active Server Pages (ASP), JavaServer Pages (JSP), to JavaServer Faces (JSF). However, what has remained largely the same throughout the Web’s history until recently has been the familiar notion of building applications that constantly refresh complete pages.
A new class of Web applications is now beginning to emerge that offers a familiar rich client behavior that was predominant just before the Web became popular. The development of newer, richer Web applications, often referred to as rich Internet applications (RIA), provides the user with a much more vivid experience that is similar to desktop applications. Gone is the notion of constantly having to refresh the entire page for each transaction. The key to providing this much richer end-user experience over the Web is the clever usage of client-side JavaScript and/or DHTML using an asynchronous JavaScript and XML (AJAX) approach.
AJAX by itself provides a superior end-user experience, but it relies heavily on advanced JavaScript coding. However, when coupled with JSF, this complexity can be reduced drastically. AJAX allows a Web client to make requests in an asynchronous manner to the server, independent of the end user submitting the entire page. In addition to greatly improving the user interface interaction it also allows for a more sophisticated event model where interactions are based on specific UI events as opposed to a simplistic HTTP GET or POST event where the entire page is refreshed.
Is AJAX new? Not really. Remote JavaScript, of which AJAX is one example, has garnered the most attention as of late and provides the ability to interact with a server by using XML data. AJAX is possible because the leading browsers now offer objects that can make independent XML HTTP requests. Microsoft Internet Explorer 5 and later offers an XMLHTTP object, while Mozilla-based browsers provide an XMLHttpRequest object. Both objects offer essentially the same ability to request XML data from a server and process the response data in a similar fashion.
The required server-side AJAX technology, which interacts with the client-side JavaScript, can be built using any Web technology that can dynamically generate XML (or any markup) ranging from PHP to Java servlets.
A JSF Solution
As you might guess, creating client-side JavaScript code to communicate asynchronously with a server can often be a very complex challenge, especially when working with an intricate user interface. Fortunately, this challenge is where JSF provides a solution and makes AJAX very easy to use by encapsulating complex AJAX JavaScript code into the JSF-component technology. Before we review examples of AJAX-enabled JSF components, it is useful to understand the core AJAX architecture involved in an AJAX client-server transaction.
As mentioned previously, AJAX is possible, providing the two core technologies are present: a JavaScript-enabled browser that supports either the XMLHTTP or XMLHttpRequest object and an HTTP server technology that can respond in XML. Since today’s popular browsers support JavaScript and the necessary XML HTTP request objects, and almost any Web server technology can generate XML (or any markup), the core AJAX technology is widely available. The architecture for a pure AJAX application is very straightforward (see Figure 1).
As you can see in Figure 1, an AJAX application in its simplest form is essentially a standard HTML user interface with JavaScript functions to interact with any type of HTTP server technology that can handle the request and respond dynamically in XML. The key elements of a core AJAX application are an HTML page and a server-side Web technology that can process HTTP requests (such as Java servlets, PHP, and so on) and respond in XML markup. The HTML page contains user interface (UI) elements that interact with AJAX JavaScript functions and JavaScript functions that interact with an AJAX server.
Reviewing the key elements in a more realistic scenario involves an HTML UI with elements such as an input field, a button, or anything that can be linked to JavaScript. For example, a button could fire a JavaScript function when pressed, or for even more subtle usage an input field could fire a JavaScript function as the user types into the field. This functionality is accomplished by setting the onkeyup attribute of the input field to a JavaScript function that processes the data in the input field. For example, the input field searchField will call the JavaScript function lookup( ) when an onkeyup event occurs (that is, during typing):
<input type="text" id=
"searchField" size=
"20" onkeyup="lookup(
'searchField');">
Back to top
|