Login | Register   
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

AJAX: A Fresh Look at Web Development

AJAX enables a dynamic, asynchronous Web experience without the need for page refreshes. Find out how this combination of technologies that you already know and love can reinvent your Web development.


advertisement
ouldn't it be nice if you could turn your plain old Web pages into something more exciting? Isn't it time to inject some life into your decade-old Web technologies? If you feel the need for the fresher, richer, and more interactive Web experience, get to know AJAX.

If you use Google Maps or the Gmail Web client you actually have experienced an AJAX-based solution already. AJAX, which stands for asynchronous JavaScript and XML, is a conglomerate technology that enables dynamic, asynchronous behavior on Web pages without the need for annoying browser page refreshes. Utilizing AJAX, users can interact with Web pages almost as they would with rich clients.

AJAX is a simple technology that all the major browsers already support. As you will see shortly, the only prerequisite for AJAX implementation is knowledge of JavaScript.



How AJAX Works

If you've used the Gmail Web client or Google Maps you probably noticed that you can scroll over the map or spell check the typed text, respectively, without page submits. AJAX, the technology behind this behavior, handles the requested operations in _JavaScript and asynchronously invokes the server-side operations that provide the desired results.

Introducing the XMLHttpRequest
At the core of AJAX technology is a JavaScript object: XMLHttpRequest. This object has been supplied through browser implementations—first through Internet Explorer, and then through Mozilla/Safari. At the time of writing this article, version 8 of the Opera browser supplied a compatible implementation. However, Opera has had a somewhat rocky history in terms of the stability of its XMLHttpRequest implementation.

AJAX in Action

In order to demonstrate AJAX, this tutorial implements a common portal scenario: e-mail message previewing. (Click here for the application source code.) Most Web portals allow portal users to preview the contents of their e-mail inboxes from the main page. In order to view the body text in their messages, however, users need to click on the individual messages—one by one, refreshing the page each time. This case study demonstrates how to practically accomplish richer Web client behavior, similar to what rich clients like Outlook Express and Mozilla Thunderbird provide, utilizing the existing Web technologies of AJAX.

It builds a portlet that provides not only access to the list of most recent messages but also previews of the messages themselves—all from the main page without needing to refresh.

In order to access message content, you need a server component that provides access to the messages. This demonstration utilizes a trivial servlet that will serve as a simulator, providing a comma-separated representation of the messages: from, subject, date, and message body:

@Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { if ( req.getParameter( "message_id" ).equals( "1" ) ){ resp.getWriter().println( "John Doe,Greetings,10-10-2005,Hi.I am doing good" ); }else if ( req.getParameter( "message_id" ).equals( "2" ) ){ resp.getWriter().println( "Joanna Doe,Hi,10-10-2005,Document is complete." ); }else if ( req.getParameter( "message_id" ).equals( "3" ) ){ resp.getWriter().println( "Joanna Doe,Hi,10-10-2005,Meeting is at 3." ); ... }else{ resp.getWriter().println( ",NA ,NA ,NA ,Nothing to display" ); }//end else }//end service

Your portal will have a mail preview portal window/portlet with a simplistic inbox listing on the left side and the preview pane on the right side. As you mouse over the message on the left, the preview pane makes the server call and displays the message text—in real time—utilizing AJAX.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap