Driving Technology Directions on Cloud Computing Platform

Ezhil Arasan Babaraj

Subscribe to Ezhil Arasan Babaraj: eMailAlertsEmail Alerts
Get Ezhil Arasan Babaraj: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn

Related Topics: RIA Developer's Journal, Java EE Journal

RIA & Ajax: Article

Meet AJAX: Intelligent Web Applications with AJAX

A peek into modern technologies for browser-based applications

Our AJAX-enabled page is ready. The complete working example is available at: www.ajaxmaker.com:8080/blog/zipsearch.htm.

Remote Scripting - An Alternative Approach
Some older AJAX implementations are based on so-called remote scripting. The idea is that the user's actions result in querying the server via IFRAME, and the server responds with the JavaScript, which is immediately executed as soon as it reaches the client. This is a big difference compared to XMLHttpRequest approach, where the server responds with the data and the client interprets the data. The advantage is that this solution supports older browsers.

The HTML portion of the IFRAME-based example (see Listing 2) is similar to the one we've used in the XMLHTTPRequest scenario, but this time we'll introduce an extra IFRAME element - controller:

Zip:<input id="zipcode" type="text" maxlength="5" onKeyUp="zipChanged()"
style="width:60" size="20"/>
City: <input id="city" disabled maxlength="32" style="width:160" size="20"/>
State:<input id="state" disabled maxlength="2" style="width:30" size="20"/>
<iframe id="controller" style="visibility:hidden;width:0;height:0"></iframe>

We keep calling zipChanged() per every key stroke, but this time the function ask(), called from zipChanged() (see Listing 3), sets the IFRAME's src property, instead of invoking an XMLHTTPRequest:

function ask(url, fieldToFill, lookupField)
   var controller = document.getElementById("controller");
   controller.src = url+"&field="+fieldToFill.id+"&zip="+lookupField.id;

The server-side logic is presented by a sketchy resolveZip.jsp (see Listing 4). It's different from its XMLHTTPRequest counterpart in that it returns JavaScript statements, which set the global values of the variables field lookup and city and the call function response() from the global window's execution context as soon as it gets to the browser.

The function response() is a modified version of the handleResponse() which is absolved from dealing with uncompleted requests (see Listing 2.)

The Fine Print
For simplicity's sake, we've "overlooked" some important issues in our sample code:

1.  The fact that the instances of the XMLHTTPRequest object and callback invocations haven't been destroyed after being used, which causes memory leaks after every call. Properly written code should destroy or reuse such instances in the object pool. Object management techniques common to the server software have to be used for the client

2.  In quite a few places the errors weren't handled properly. For example, the call to request.open() in the method ask() can throw an exception that has to be caught and processed even though JavaScript exceptions don't have to be checked. The handleResponse() function is another example. It has to check headers and responseText for possible server-side and communication errors. In case of an error, it has to try to recover and/or report an error. Properly developed AJAX applications eliminate loosing data on "submissions" due to disconnects and other low-level communication problems via a robust, self-recovering framework.

3.  Current server-side frameworks provide quite a few functions that have to be reconciled with a refresh-free approach. For example, let's consider a custom server-side authentication with a timeout. In that case we'd have to intercept security system response to the XMLHTTPRequest calls, bring up the login screen, and then re-issue the request after the user was authenticated.

All these problems are typical of any application code working with low-level APIs and all of them can be resolved. The good news is that the technologies needed to resolve these issues are quite familiar to most Java developers like Web Services, custom tags, and XML/XSLT. The only difference is that nowadays these technologies come to the rescue on the client in the form of:

  • Web Services using SOAP/REST/RPC for a simple communication standard
  • Client-side custom tags for packaging rich client-side controls with integrated AJAX functionality
  • XML- and XSLT-based data manipulation
JDJ will publish more articles on AJAX where you'll learn how to use these technologies to make AJAX solutions both simple and robust.

The AJAX approach offers a rich Internet experience on a par with that of desktop applications. AJAX features have to be applied selectively: you definitely don't want your credit card charged by the background process while you're still shopping. Is AJAX momentum sustainable? We certainly hope so. We've been developing AJAX applications for the last five years and can attest that it's sound and very effective. However, it requires that a developer be exposed to a much wider set of technologies than the ones used in the traditional "click-refresh" Web applications.

More Stories By Victor Rasputnis

Dr. Victor Rasputnis is a Managing Principal of Farata Systems. He's responsible for providing architectural design, implementation management and mentoring to companies migrating to XML Internet technologies. He holds a PhD in computer science from the Moscow Institute of Robotics. You can reach him at vrasputnis@faratasystems.com

More Stories By Anatole Tartakovsky

Anatole Tartakovsky is a Managing Principal of Farata Systems. He's responsible for creation of frameworks and reusable components. Anatole authored number of books and articles on AJAX, XML, Internet and client-server technologies. He holds an MS in mathematics. You can reach him at atartakovsky@faratasystems.com

More Stories By Igor Nys

Igor Nys is a Director of Technology Solutions at EPAM Systems, Inc, a company combining IT consulting expertise with advanced onshore-offshore software development practices. Igor has been working on many different computer platforms and languages including Java, C++, PowerBuilder, Lisp, Assembler since the mid 80's. Igor is currently managing a number of large distributed projects between US and Europe. In addition Igor is the author of the award-winning freeware system-management tools, and he was closely involved in the development of XMLSP technology - one of the AJAX pioneers.

Comments (8) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.

Most Recent Comments
SYS-CON India News Desk 02/19/06 07:05:30 PM EST

Browser-based applications are widely used and we like the fact that we can access them from anywhere. But from the users' perspective, the productivity level of Web applications still doesn't approximate the productivity of desktop programs. The good news is the gap is closing: the accumulated potential of multiple technologies has boosted a whole new breed of HTML-based apps that are as powerful as the desktop ones. Meet AJAX.

Anatole Tartakovsky 12/26/05 06:15:32 PM EST

I received number of questions on the future of the AJAX recently - tried to give my personal view on the possible development in the blog - http://anatolet.blogspot.com

Frank 12/19/05 07:04:50 PM EST

You mention the need to destroy the request and callback objects, but my O'Reilly reference says there is no need to clean up in javascript. Which is correct.

How do you destroy the request and especially the callback objects (can I destroy the callback in the callback!!!)?

Halans 10/15/05 06:25:27 PM EDT

Nice, to the point, Ajax article.
Though some comments (nitpicking)... Wasn't the term 'Ajax' introduced in the Adaptive Path article from february 2005, not march 2004?
You add style attributes with values 'width:30', but you should add 'px' ('width:30px') to make it standards compliant and make firefox display it correctly (IE is way too lax).
Wouldn't you best upon readyState==4 also check the http status 200 before continuing?
You should best add an existing default url to the iframe (ex 'blank.html'), because when you would do this over https (without a url to begin with) you would get an ugly security message in IE, making you pull your hair out to solve this (I lost a bunch one time).
While you did the iframe example, you might have integrated it with the xmlhttprequest for gracefull degradation in an (corporate) IE environment with ActiveX disabled, no?
But like I said, nitpicking.
Looking forward for the upcoming Ajax articles.

Victor Rasputnis 10/04/05 08:04:22 AM EDT

Anand, you are right. The example was meant to be the most obvious, to avoid problems with getRealPath() or explanation around getResourseAsStream() etc. You have a good eye :), thanks again.

Anand 10/03/05 01:42:54 PM EDT

Thanks Victor. I had figured out application instead of using getServletContext() on BEA. However my problem was with the

properties.load(new java.io.FileInputStream(key + ".property"));

I had the file in the same folder and thought that I did not need to provide it with an explicit path such as c:\\ but I guess that is not the case. Also one more change to the html file that I figured in the line:
zip.length = 3 ? updateState(zip) : zip.length == 5 ? updateCity(zip):"";

should be

zip.length == 3 ? updateState(zip) : zip.length == 5 ? updateCity(zip):"";

Victor Rasputnis 09/30/05 10:31:34 PM EDT

Anand, getServletContext() is available in Tomcat JSP, but not in WebLogic (WL -getServletConfig().getServletContext()). Anyway, I replaced gSC() to _application_ for simplicity. Please download again. Most importantly, please also download the DATA files or ZIP will remain red, no matter what :).

Kind Regards,
Victor Rasputnis

Anand 09/29/05 08:42:16 AM EDT

I tried doing this sample using both IE 6 and Firefox. Everytime I type in 3 digits (valid zip code) it paints the box red. It does not populate the city and state. Using BEA I got an error on the JSP page saying that getServletContext() was not recognized. On Tomcat I did not get any error but the program won't work.
Any suggestions ?