AJAX Whitepaper

8/6/2019 AJAX Whitepaper

1/34

AJAX White paper

Cognizant Technology Solutions All rights reserved Page 1 of34

Asynchronous JavaScript And XML (AJAX)

Submitted on: September 15, 2005

Version 1.0

W h i t e p a p e r b y J a v a C o E

AJAX


2/34

AJAX White paper


Asynchronous JavaScript and XML (AJAX )

AJAX is a group of technologies to bring rich user experience to web based applications. AJAX

involves HTML, CSS, JavaScript, XML and XMLHTTPRequest object to present, interchange and

manipulate data asynchronously. AJAX is not a new way of developing web based applications, but

with the recent adoption of AJAX in popular Google applications like Google-Suggest and Google-Maps have created more interest in technical field. In fact the term AJAX is coined to this set of

technologies in February 2005 itself.

To quickly enable developers to build AJAX based rich client applications, commercial as well as open

source frameworks in both J2EE and .NET technologies are available on Internet. Also on the

browsers front, most of the existing popular browsers and upcoming browsers have support for AJAX

set of technologies including XMLHTTPRequest object.

Though AJAX will take some time to mature in terms of development and debugging tools, it is well

accepted and considered as promising technology by many industry leaders including Sun

Microsystems. AJAX was in news at JavaOne-05 conference and Sun has announced plans to adopt it

in its technology stack.

This white paper is written with intention to enable developers to understand AJAX quickly and start

working with it to build rich client applications.


3/34

AJAX White paper


TABLE OF CONTENTS

1 EXECUTIVE SUMMARY........................................................................................... 52 STRUCTURE OF PAPER......................................................................................... 63 OVERVIEW OF TYPICAL WEB TECHNOLOGIES................................................. 74 CONSIDERATIONS ON WEB APPLICATION DESIGN ......................................... 8

4.1 WEB SITE AND WEB APPLICATION ............................................................................... 84.2 CHALLENGES INVOLVED IN CURRENT WEB APPLICATIONS ........................................... 94.3 OVERVIEW OF RICH INTERNET APPLICATIONS ........................................................... 10

5 AJAX ........................................................................................................................ 125.1 OVERVIEW OF AJAX................................................................................................. 12

6 AJAX BASED POPULAR APPLICATIONS........................................................... 196.1 GOOGLE MAIL........................................................................................................... 196.2 GOOGLE SUGGEST ................................................................................................... 206.3 GOOGLE MAPS ......................................................................................................... 216.4 JAVARSS.COM ......................................................................................................... 21

7 AJAX ADOPTION BY MAJOR INDUSTRY PLAYERS......................................... 237.1 SUN......................................................................................................................... 237.2 MICROSOFT .............................................................................................................. 237.3 TIBCO ..................................................................................................................... 24

8 AJAX FRAMEWORKS AND LIBRARIES.............................................................. 258.1 SIMPLE WEB FRAMEWORK (SWF) ............................................................................ 258.2 SIMPLE AJAX(SAJAX) ............................................................................................ 258.3 AJAX.NET............................................................................................................... 258.4 BACKBASE ................................................................................................................ 258.5 USERX FRAMEWORK (FROM COGNIZANT .NETCOE)................................................ 25

9 PROOF OF CONCEPT............................................................................................ 2610 STRENGTHS AND LIMITATIONS OF AJAX......................................................... 27

10.1 AJAXSTRENGTHS.................................................................................................... 2710.2 AJAXLIMITATIONS ................................................................................................... 2710.3 CAUTION ................................................................................................................... 2810.4 AJAX IS NOT SUITABLE IN FOLLOWING SITUATIONS.................................................... 28

11 AJAX AND STRUTS INTEGRATION..................................................................... 3012 WHERE TO LEARN MORE?.................................................................................. 3213 REFERENCE........................................................................................................... 3314 ABOUT JCOE ......................................................................................................... 34


4/34

AJAX White paper


Table of figures

Fig 4.1 User experience and expectations .................................................... .............................9Fig 4.2 Rich Internet Application ............................................... .............................................. 10

Fig 5.1 Traditional web application ...................................................... .................................... 15Fig 5.2 AJAX based web application ................................................... .................................... 15Fig 5.3 Request-Response navigation flow in AJAX based application.......... ..... ...... ...... ..... ...... .16

Fig 5.4 Typical sequence diagram for AJAX based application........ ...... ...... ..... ...... ..... ..... ...... ... 17Fig 6.1 Google mail auto address suggestions .................................................... ..................19Fig 6.2 Google mail spelling check tool ...................................................... ........................... 19

Fig 6.3 Google suggest screen ................................................. .............................................. 20Fig 6.4 Google map screen.............................................. ....................................................... 21Fig 6.5 JavaRSS.com sample tool-tip .................................................. .................................... 22

Fig 6.6 AJAX functionality enable/disable screen ................................................... ..................22Fig 9.1 PoC sample screens ..................................................... .............................................. 26Fig 10.1 AJAX Struts integration............................................... .............................................. 30


5/34

AJAX White paper


1 Executive Summary

The intention of this white paper is to quickly understand upcoming set of technologies

under name AJAX. Though the AJAX is not a new set of technologies to web applicationdevelopers, its adoption in the popular search engine Google has created waves in theinternet community. The Rich Client Applications with rich user experience are achievablethrough AJAX to fulfill demands from the business user community.

Browser side components like JavaScript and XMLHTTPRequestare core ones in AJAX,which helps in achieving asynchronous communication with the server side components.AJAX technologies are supported by most of the popular browsers including InternetExplorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, and Netscape 7. On the other hand serverside components can be based on Java/J2EE or .NET platform. AJAX is technologyindependent in that sense.

In short time, mostly in year 2005, AJAX has become very popular. Several blogs, technical

and non technical articles have mentioned about it. Developers have started exploringopportunities with it to build rich web based applications as closer as possible to the thickrich clients having functionalities like responsive forms, incremental updates, etc.

This white paper provides sufficient information on the AJAX technologies, how it works andalso pros and cons of it.

This white paper is accompanied with an AJAX based PoC to help understand code leveldetails. The paper provides information on URL for downloading and installing this PoC.


6/34

AJAX White paper


2 Structure of Paper

This white paper structure is arranged in such a way to provide sufficient information onAJAX to both technical and non-technical members. Though it is recommended to gothrough all sections to understand AJAX in detail, following hints will help for quick grasping

from both the teams.

Non-technical members: Pre-requisites include

Understanding of how web application works

Basic understanding of HTML, XML and JavaScript

Technical members: Pre-requisites include

Understanding of how web application works

Understanding of HTML, HTTP, XML, JavaScript

Server side technologies like Servlet, etc.

Basic understanding of rich client applications

Sections useful for Non- Technical members Sections useful for Technical members

Overview of typical web technologies

AJAX Background

What is AJAX? How it works? AJAX current stage and future

Findings from AJAX PoC

Limitations of AJAX

All

(May skip section on overview of

typical web technologies)


7/34

AJAX White paper


3 Overview of typical web technologies

This section provides information on typical web technologies which are related to or part ofAJAX.

Technology Type Description Role in AJAXHTML Presentation Markup tags wrapping the contents

to display in web browser

Basic presentation

technology

CSS Presentation Cascaded Style Sheets are used to

manage presentation styles through

external configuration files

Aesthetic touches and

configurable presentation

styles

JavaScript Client side

processing

Client side language and technology

available with the ability to run

code and installed on a majority of

web clients (browsers)

Heart of the AJAX. AJAX

Engine is based on

JavaScript. Invoke and

manage asynchronous

communication with

backend systems

XML Data markup Extensible Markup language helps

binding information contents

through meaningful tags. These

tags can be user defined.

Information exchange

mechanism. Though XML

is not the only format

AJAX Engine receives

information in. In few

cases, JavaScript itself is

fetched asynchronously

XMLHTTPRequest Web browser

based

communication

handler

Provides web browser's

communication functionality withjust a handful of methods andproperties. It was basically part of

MSXML which ships with InternetExplorer 5.0 and above. It is nowsupported by major browsers

Extremely powerful

component to make HTTP

call and capture the

results with few lines of

code. The object acts likea browser and retrieve

the data from given URL

Servlet Server side Java

technology

parallel to CGI

Server side Java technology which

can be used to as middle tier to

fetch data from information

repositories and send it to client

It is not a part of AJAX

technology.

Web Server Information

server on

HTTP/S protocol

Static contents provider on HTTP/S

transport. It can be extended with

CGI or Servlet to provide dynamic

contents

It is not a part of AJAX

technology

Web Browser Web application

client

Standard web application client. It

has functionality to execute

downloaded code including

JavaScript and Java. New versions

of Web Browsers programmatically

support working with JavaScript

based XMLHTTPRequest objects

Basic client with

JavaScript enabled is

must for AJAX


8/34

AJAX White paper


4 Considerations on Web Application Design

4.1 Web Site and Web Application

Web Site:

In brief, a web site is a bunch of HTML (or other presentation) based pages linked together.The basic technology set behind it may include HTML, JavaScript, images, CSS, Flash, etc.

After the birth of Internet, in short time web sites became major mechanism for informationspreading. Initially the expectations from the information provider and receiver were least only contents (without major focus on its presentation). HTML was the only supportingtechnology to manage and display the contents.

But as the Internet and associated technologies matured, in addition to contents

presentation and navigation flow schemes between the pages became equally important.Dynamic HTML, Animations and Flash kind of technologies were highly used to provideattractive and rich user experiences.

As web technologies are maturing in terms of features and functionalities and improving interms of rich user interfaces and usability experiences, web sites are becoming moreattractive and powerful. Web sites like G-Mail from Google are more attractive and rich inuser experience compared to the other web based mail service providers. Similarly Google-suggest or Google-maps are relatively better in user experience compared to the other websites providing similar services.

Web Application:

Web application on the other hand is answer for orthodox thick client applications. Webapplication makes use of standard web technologies to develop and integrate complexbusiness functionalities as needed by end users. Here the business functionalities may notjust include informative content but it may also consist of complex transactional functions,dynamic updates and personalized or role based navigations through the pages.

Since the purpose of Web Applications is different than standard web sites, more focus in onthe functionality provided through the web technologies rather than the presentation andcontents as in Web sites. From usability standpoint, a web application needs to followstandard set of human interface guidelines, but these guidelines are not mandatory and userexpectations may vary and not satisfactory always.

Most of the time, web application users expect desktop-like functionality from the browserbased applications. This is challenging as the web applications are traditionally based ontechnologies with limited features. This is changing though. Combination of technologies,knowledge of their strengths and limitations, and best practices are helping to manage theuser expectations. The traditional web applications are improving their richness in terms ofpresentations and user experiences.


9/34

AJAX White paper


4.2 Challenges involved in current Web Applications

Most of the current web applications present in the Internet and Intranet world are based onthe cutting edge technologies from Microsoft and J2EE platforms. In the Java / J2EE areas,the web applications typically make use of the web application frameworks like Struts,Tapestry or may use template based frameworks like Velocity. The server side supporting

technologies include Servlet and JSP. Almost every new version of Java technology hasadded new features to fulfill growing expectations from the Web Application users. JavaServer Faces (JSF) is one of the examples from Java stack.

In addition to the technical challenges, todays web application developer needs to considerlimitations of the technologies involved. Non technical challenges include considerations forpage navigational flow, user interface design, page size and available associated serverside infrastructure.

Challenging Web ApplicationDevelopment process

Huge expectations from WebApplication users

General userexperience!

Fig 4.1 User experience and expectations

Few of the major challenges are listed below:

1. Navigation simplicity: Most of the enterprise class web applications are complex innature and need to show complex information on screen in text and graphical format.Normally these screens are linked together and shown with navigational links.Developer needs to be very creative to achieve navigational simplicity

2. User Interface interactions: If the big and complex page is broken in multiple subpages, user needs to navigate through the pages back and forth. This navigation orpage flipping is confusing and frustrating sometimes and seamless user interaction

can not be achieved

3. Data size and complex views: A typical enterprise application needs to show datalinks on the screens which can be drilled down further to find more details associatedwith that link. For example, a page needs to show countries and major cities in thosecountries when someone selects from drop down or clicks on the country link. Atypical web application may request to the server to download names of cities for agiven country passing the selected country name. This is a form submit operation


10/34

AJAX White paper


and will cause page flicker. The other way is to download complete information andmaintain on the client side and show the cities through client side code itself. Thebottleneck here is the amount of data needed to be present on client side

4. Hints and suggestions: Most of the web applications wait for the client to submit theform and if something is wrong in the entered form data, indicate the user to correctit. On the low bandwidth networks viewing and submitting these forms is frustrating.Hints and suggestions when user is on the form page itself help the user. Forexample, a user registration form providing hint to the user about non availability ofselected login name before submitting the form can avoid getting her frustrated

5. Portion updates: In a complex page, some portion of the application may need to beupdated with latest information or as computation result. The application is requiredto be very interactive and need to have intelligence to respond to user inputs andchange their state or interface without full page refresh or interruptive communicationto the server

4.3 Overview of Rich Internet ApplicationsRich Internet Applications empowers web application developers to achieve innovative userexperiences and applications with features that would have been impossible for a developerto achieve through the traditional web technologies.

Rich Internet Applications integrate best of Desktop applications and Web basedapplications and can handle different rich media formats including audio and video.

Fig 4.2 Rich Internet Application

Traditionally desktop applications are popular for effective user interfaces. The desktopinterfaces are users friendly and responsive (without any page refresh). Further the desktopapplications can work equally well in online and offline mode. Rich user interfaces wouldallow sophisticated user interfaces on thick clients but the use limits to the machine where ithas been installed.

Browser Interface No installation on

client side

Slow responsetime

Limited UI support

Rich UI Highly Responsive

Require client side

installations

Version conflictsDesktopApplication

Web

Application

Rich Media

Rich

Internet

Application

Browser Interface No installation on client

side Rich UI Highly Responsive


11/34

AJAX White paper


Web applications on the other hand are better in cross platform support, does not need anyinstallation on client side, support need based information download and can use widevariety of Internet technologies. Web based solutions have relatively simpler user interfacebut are easily deployable for larger number of clients.

Rich Internet Applications bring best of these approaches together to provide best userinterfaces and user experiences. Rich Internet Applications can be integrated with thelegacy applications. It can also act as an interactive presentation layer on the top of webservices.

AJAX is being used for implementing Rich Internet Applications. Google G-Mail isconsidered as classic example of AJAX based Rich Internet Application where the flicker-less user experience is achieved through the asynchronous background operations throughJavaScript.


12/34

AJAX White paper


5 AJAX

5.1 Overview of AJAX

AJAX or Asynchronous JavaScript And XML is a set of web development technologies for

creating interactive web applications. Combinations of following technologies help webdevelopers to bring rich user experience to the application user:

HTML and CSS for presenting information

JavaScript and XML DOM (Document Object Model) to dynamically display and

interact with the information

XMLHTTPRequest and XML to interchange and manipulate data asynchronouslywith the web server (Although AJAX applications can use other technologies likepreformatted HTML, plain text, JavaScript as alternative to XML)

Like other popular open source technologies such as PHP supporting Web Applications,AJAX is not a technology in its own. It is combination of many above-mentionedtechnologies.

AJAX is not a new approach of building Web applications.In theory, asynchronous data retrieval became possiblein 1996 with Netscape 2.0 browser with support for framesand JavaScript. Few developers developed applicationswith this functionality and fetched the data asynchronouslyby using hidden frames.

For the developers targeting Internet Explorers, asynchronous communication techniques

are available for years. Previously this model was known as remote scripting or remoting. Inaddition to the hidden frames, web developers have tried this approach with Java Applets toemulate this interaction model. What has changed in recent past is support forXMLHTTPRequest object by most of the popular browsers. Although this object is notmentioned in the JavaScript specification, there are many browsers which support its fullfunctionality. Since most of the existing popular browsers are already supporting it, it hasbecome de facto standard that will likely be supported even after the W3C specificationbecomes final and starts being implemented in new browsers, too. So there is no obviousrisk adopting this object.

Static HTML pages can asynchronously make call to the server from which it is loaded by usingJavaScript technology and XMLHTTPRequest object. This call returns back XML document to the

client. On the client side JavaScript can use this XML document to update or modify the DocumentObject Model of HTML page.

The HTML pages interact with the JavaScript based on events such as mouse over, click, etc. tofetch the required data from the server instead of reloading the complete web page every time thechange is needed to be displayed

AdaptivePaths Jesse James

Garrett, coined the AJAX acronymin an essay written in February2005. This essay is available athttp://adaptivepath.com/


13/34

AJAX White paper


The key goal of AJAX based applications is to decompose jarring transitions that downloadthe entire new web page into a series of smaller more frequent transactions. Theasynchronous background process can update the data without interrupting the user.Application component can poll for XMLHTTPRequest objects readystate=loadedevent tonotify data extracting component notifying download operation is complete.

XML

XMLHTTPRequest Object

XMLHTTPRequest object allows client side JavaScript to make synchronous or asynchronous calls to the serverside components (HTTP GET/POST requests). Microsoft implemented this object as an ActiveX component inInternet Explorer 5 and soon other browsers started supporting it. Though the name consists of XML, this object canbe used for interchanging the data formats. As of today this object is supported in IE 5.0+, Safari 1.2, Mozilla 1.0,Firefox and Netscape 7

This object is not a standard W3C standard. W3C DOM Level 3 Load and Save specification contains similarfunctionality but none of the browser has supported it. So to make a call from browser to the server, the only way isto use XMLHTTPRequest object as on today

To create an XMLHTTPRequest object

o For Mozilla, Safari, Firefox and Netscape

var xmlhttp=new XMLHttpRequest()

o For Internet Explorer

var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

Methods supported by this object

Method Description

abort() Cancels the current request

getAllResponseHeaders() Returns the complete set of http headers as a string

getResponseHeader("headername") Returns the value of the specified http header

open("method","URL",async,"uname","pswd") Specifies the method, URL, and other optionalattributes of a request

The method parameter can have a value of "GET","POST", or "PUT" (use "GET" when requesting dataand use "POST" when sending data

The URL parameter may be either a relative orcomplete URL.

The async parameter specifies whether the requestshould be handled asynchronously or not. true meansthat script processing carries on after the send()method, without waiting for a response. false meansthat the script waits for a response before continuingscript processing

send(content) Sends the request

setRequestHeader("label","value") Adds a label/value pair to the http header to be sent


14/34

AJAX White paper


(1) From IDC White paper on Rich Client Technologies

This object has following properties

Property Description

onreadystatechange An event handler for an event that fires at every state change

readyState Returns the state of the object:

0 = uninitialized1 = loading2 = loaded3 = interactive4 = complete

responseText Returns the response as a string

responseXML Returns the response as XML.

status Returns the status as a number (e.g. 404 for "Not Found")

statusText Returns the status as a string (e.g. "Not Found" or "OK")

It transmits cookies with its requests just like normal requests from browser. Request made with this object does not modify browsers history states. That means clicking on back button of

the browser will not display the previous pages.

When the XMLHTTPRequest object is used in asynchronous mode, JavaScript code needs to poll or getnotified when the call is complete. This object provides facility for callback mechanism. Please see the codebelow to understand how this works

var xmlHttpObj = new ActiveXObject( "Microsoft.XMLHTTP" );var userName;

function validateuser (pUserName) {

userName = puserName;

var url = " http://localhost:8080/AJAXDemo/Servlet/validateuser?userName=" + userName;xmlHttpObj.open( "POST", url, true );

// Event handler for processing callback notificationsxmlHttpObj.onreadystatechange = manageCallbacks;

try {xmlHttpObj.send();

}catch (error) {

alert("Report some problem here");//do some processing}

}

function manageCallbacks () {switch (xmlHttpObj.readyState) {

case 4:if (xmlHttpObj.responseText == "exists")alert("Passed user name already present");break;

}}


15/34

AJAX White paper


How AJAX works?

Traditional web applications submit the form data to the server on HTTP/S and wait for theresponse from the server in response to the sent request. On the Server side this requestdata is received by using CGI or Servlet like technologies, parsed and then appropriateaction is taken depending upon the action name and data passed from the client side.

Fig 5.1 Traditional web application

Server side component then form the web page based on the HTML, JavaScript, CSSbased technologies (this may include some other proprietary or commercial technologies,too) and sent back to the browser based client. Web browsers with inbuilt support for HTMLand JavaScript appropriately display the page. The overall interaction model is request-response based and for each submitted request, there is a new web page constructed byserver and sent back to the client. This process is interruptive and takes considerable timefor each new page fetch.

On the other hand, AJAX based applications can send requests to the Server to retrieveonly the data that is needed. This information exchange is basically carried out through XMLbased communication format and the response is processed on the client side to display therequested data.

Fig 5.2 AJAX based web application


16/34

AJAX White paper


This results in more responsive applications as only very limited amount of data is beingexchanged between the client and server. AJAX applications make lot of micro levelrequests of fetching low volume data from the server. These applications are developed withthe help of AJAX frameworks and utilities which gets downloaded to the client side when theapplication is loaded for the first time from the server. This JavaScript based AJAX engineconsists of many useful functions for carrying out asynchronous communication, datamanipulation and display. These engines can be developed as a part of project or can bedownloaded and used from the open source communities. Few of the open source AJAXengines include DWR, SWF and others. More details on these engines are available in thesection on Frameworks and utilities.

Following example shows a sample screen from the PoC and describes how the AJAXrequest and response propagates through different components for checking whether theuser ID is valid and whether it is already taken by someone else.

Fig 5.3 Request-Response navigation flow in AJAX based application

1. User enters ID into the user ID text field.

2. As he types, on every key stroke the onkeyup event is captured through theJavaScript and validate () method is called in AJAX engine which is part of the clientside downloaded page.

3. The validate () method creates the XMLHTTPRequest object, opens the URLconnection to the server side component, register with the callback method handlerand passes it the text entered into the ID text field.

4. XMLHTTPRequest object communicates with the server side component, sayServlet and passes the client side information to it. This interaction is carried outasynchronously.


17/34

AJAX White paper


5. Servlet interacts with the database (through faade in practical cases) and checks ifthe entered ID is already present in the system.

6. Servlet sends information back to the requester.

7. The callback method checks for the progress ids with XMLHTTPRequest object andon ready state it parses returned information

8. In case of error, the client side logic displays the message ID in use. In case ofsuccess, it does not show anything.

Sequence diagram:

Following sequence diagram explains generic AJAX request response process.

Fig 5.4 Typical sequence diagram for AJAX based application

In the web application user may click on the link or moves the mouse over link togenerate specific action to invoke particular action specific function in JavaScriptbased AJAX Engine.

JavaScript based engine create the XMLHTTPRequest object

Open method on the XMLHTTPRequest object is called with specific URL towhich the request is needed to sent and response is expected from


18/34

AJAX White paper


Request is sent to the backend system. The server side component interprets theincoming request and processes it. After processing the server side componentsend the response back to the client

Meanwhile the AJAX engine asynchronously processes the notifications in thecallback method. The readyState property can be checked to find whether theresponse is received and available on the client side (readyState = 4)

AJAX engine parses the received response and builds the DOM from it andupdates the web application screen to display data

Does AJAX complicate server side programming?

Server side application components need to be designed in such a way that each individualcomponent is responsible for specific AJAX functionality. Though this may increase numberof server side components, application developer can achieve flexibility of reusing thisspecific component in multiple applications. Sun has suggested multiple options ofintegrating AJAX and JSF for developing such independent components. See resources forthe website. This approach separates AJAX and non-AJAX based functional component in

neat way and as per need they can be interchanged. The key point here is AJAXcomponents need to be treated as UI helper components only and no complex businesslogic should be tightly coupled with it.

Though AJAX sends multiple requests to server on background, the amount of dataexchange is actually very small and may not cause any bandwidth congestion problems.Since the business functionality is different for each application, what information needs tobe sent in response to the AJAX request and how it is being retrieved from underlying datasources will be different for different applications and in complex applications may causeincrease CPU and other resources utilization. Great care needs to be taken when AJAXfunctionality is decided to be put into such applications

How does AJAX deal with ordering of callbacks?

This is a situation where the application UI sends two different asynchronous requests todeal with different backend resources and take different processing time to return back tothe client. On the client side UI has some dependency based logic which needs to haveordering of these requests or responses in place. Will AJAX help in these situations?

The answer is no and yes together. Since AJAX is a normally asynchronous model, remotecalls may not return in the order in which they were sent. There is no direct way to controltheir response order. Obviously this can be done through some sort of server sideprogramming logic.

Other ways is to use Direct Web Remoting (DWR) framework which is a open source AJAXsoftware for making AJAX development easier using extensive libraries. DWR offers afunction in its engine.js file named DWREngine.setOrdered (boolean). DWR achieves this byonly sending new requests when old requests have been completed. Obvious drawback ofthis setting is slowing down of application, and may leave users with an unresponsivebrowser.


19/34

AJAX White paper


6 AJAX based popular applications

AJAX has become very popular in short time. The main driving force for its popularity is itsadoption by Google in many of its applications including Google Mail, Google-suggest andGoogle-Maps. Since Google is the first choice for most of the developers these days,everybody got attracted to the responsiveness and user experience they achieve throughthese applications.

6.1 Google Mail

Google has gained huge user base for its G-Mail service in short time. It is based on theAJAX technologies for automatic address filtering. As user starts typing the recipientaddress, the mail program immediately shows the matching addresses and dynamicallyconstrains the list as user continue typing. In Outlook, user needs to type CTRL-K tocomplete the address. G-Mail is faster and user friendly.

Fig 6.1 Google mail auto address suggestions

Spelling check is another good feature provided in G-Mail. When user invokes it from the

message composer, the misspelled words are shown in red color and appropriate correctwords are shown in the drop down.

Fig 6.2 Google mail spelling check tool

G-Mails behavior is embedded in the User Interface engine, all the interaction between theUI and the server is only the data. G-Mail loads JavaScript based AJAX engine on startup ofevery session and subsequent Server side interaction is carried out through it. The Serverside response to the AJAX request is not XML though. It is a pure JavaScript function. Infact the Google Developers called this functionality as just JavaScript and not AJAX.


20/34

AJAX White paper


This is a different approach than the other web mailservice providers including Hotmail and Yahoo which loadsthe UI on every action. To reduce the traffic and improveperformance, server side component sends HTML filewhich only consists of JavaScript array declarations that UIengine parses and uses that information to decide whatportion of the UI is needed to update.

Since the basic functionality is based on AJAX technologies, G-Mail provides all its standardfeatures on IE 5.5 +, Netscape 7.1+, Mozilla 1.4+, Firefox 0.8+ and Safari 1.2.1+. On otherbrowsers, G-Mail standard features are not available. So features like, spellchecker, autoaddress completion, etc. are not available on the other browsers

6.2 Google Suggest

Google-suggest is an advanced search engine. It uses XMLHTTPRequest object to create adynamic user interface. When user starts typing in, the background process sends the typedtext to the server and fetches the appropriate words starting with the typed text. As usergoes on typing additional characters to complete the word, more refined results are fetchedfrom server as suggestions.

Fig 6.3 Google suggest screen

Google-suggest cache the already fetched suggested keywords, so if user presses back key

client does not need to fetch results from the server again. The server always returns theJavaScript code in response to the request. For example, in the above example, when theGoogle-Suggest URL is typed as below user can see the response as pure JavaScriptfunction which AJAX engine parses and populates the suggestion box.

URL: http://www.google.com/complete/search?hl=en&js=true&qu=cogn

oa ng o ava cr p eng ne

on the client side browser for e-mail based application was initiallycarried out by a web based mailservice provider called Oddpost.Yahoo bought this company

recently in Q2-2005


21/34

AJAX White paper


Response from Server side:

sendRPCDone(frameElement, "cogn", new Array("cognos", "cognizant", "cognac", "cognitive dissonance","cognitive", "cognitive therapy", "cognitive behavioral therapy", "cognitive psychology", "cognitive development","cognitive behavioural therapy"), new Array("1,070,000 results", "1,100,000 results", "2,760,000 results","212,000 results", "14,600,000 results", "3,530,000 results", "1,210,000 results", "4,640,000 results", "5,450,000results", "351,000 results"), new Array(""));

The sendRPCDone function is present in ac.js file which is part of the Google-Suggesthome page. This function carries out important tasks like caching retrieved results, parsingit, displaying it, etc.

6.3 Google Maps

Google-Maps is another example of AJAX uses from Google family. Google-Maps providedetails of geographical areas with zooming facility. At present this facility is available for onlyUSA and few other countries. This dynamic, interactive service helps user to drag the mapwithout clicking and waiting for the response.

Fig 6.4 Google map screen

Google-Maps provide scrolling map functionality by only downloading the newly visible tilesand moving the rest of images. In addition to the standard XML, XSL, XSLT processor,JavaScript based technologies; Google has come up with standard API for easy integrationwith this functionality in applications with JavaScript.

6.4 JavaRSS.com

This is a popular portal with latest Java technologies news from different vendors and otherpopular web sites. This site uses AJAX to display tool tip information with more details onthe article links. Tool tip information is not embedded in the web page. It is fetched from theserver side on mouseover event.


22/34

AJAX White paper


Fig 6.5 JavaRSS.com sample tool-tip

By default JavaRSS.com works with AJAX functionality disabled. This means the entiremouse over tool tips get downloaded to the client side page and use can see it if they lookinto web page source. Following code snipped shows contents in the webpage for above-displayed tool tip

To enable the AJAX functionality, user can go to settings window and enable AJAXfunctionality.

Fig 6.6 AJAX functionality enable/disable screen

Once the AJAX functionality is enabled, the tool tips contents does not get downloaded tothe web page. Once the AJAX functionality is enabled the same tool-tip related source codelooks like

Where JavaScript function d(3,2737) passes channelId and itemId parameters togetDescription() function which appends these parameters to the URL to fetch appropriateinformation downloaded and shown as tool tip.

AJAX enablement on this web site reduces the initial page load size by more than half, thereby loading the page faster for a better user experience.


23/34

AJAX White paper


7 AJAX adoption by major industry players

7.1 SUN

Sun Microsystems Inc has given considerable attention to AJAX in JavaOne-2005conference held in San Francisco. Sun has announced their plans to support or increasetheir support for AJAX based development. Sun is working on a development tool calledJava Studio Creator and Version 2 is due in December 2005. Java Studio creator is aneasy-to-use visual IDE for building rich web applications with minimal code creation. Sunofficials mentioned that Java Studio will ease the process of building rich Internetapplications through the advanced features supported by this tool. The main aim of this toolis to simplify Java development process and provide support for AJAX through componentlibrary.

The Sun blueprint project has put lots of information on AJAX and J2EE to enable dynamicweb applications. Following contents are taken from summary of the blueprint.(https://bpcatalog.dev.java.net/nonav/ajax/index.html)

AJAX and Java Server Faces (JSF) can be integrated together to take advantages of both

the technologies. Creator IDE comes with a JSF based auto completion text field component(available for free of cost on Java.net) based on AJAX technologies. As both thesetechnologies mature, there are possibilities to have more ready made components availableas part of IDE itself.

7.2 Microsoft

Microsoft is working on Web client framework and tools under project name Atlas to help

developers build AJAX based applications easily. Atlas is scheduled to be released inSeptember 2005. Developers can use Atlas software through Visual Studio 2005 andASP.NET 2.0 which are scheduled to be released in November 2005. It is also planning toprovide sample templates or starter kits around AJAX in near future. While Microsoft hasused the technology since 1998 in it's web based Outlook service, it did not aggressivelymarketed the term AJAX or set of technologies or support for it in any of their development

platforms until now.

Atlas framework will consist of following components

Browser compatibility layer to address issues still present for different browserssupporting scripting

A set of rich UI components like auto completion form field, drag-and-drop, etc.

Base utility package for string manipulation, timers, etc.

Extensible core framework that adds features to JavaScript such as lifetimemanagement, multicast event handlers, etc.

We have seen that there are many possible problems that AJAX interactions can solve.J2EE technology provides a good base to develop and deploy AJAX based applicationswith APIs for tying in HTTP processing, databases, web services, XML processing andbusiness objects. With a better understanding of this interaction model, today'sapplications can become more interactive providing a better experience to the end user.


24/34

AJAX White paper


7.3 TIBCO

TIBCO has been working on rich Internet application framework based on AJAX calledTIBCO General Interface. This framework provides rich graphical user interface features andperformance of desktop applications without adding any client side plug-in into the browsers.TIBCO General Interface incorporates AJAX and adds powerful features like componentlibraries, visual tooling, debugging support and other enterprise grade services for efficient

development of Rich Internet Applications.

TIBCO GI is a combination of two products: TIBCO General Interface Framework andTIBCO General Interface Builder built entirely in JavaScript, DHTML, XML/XSL to enabledevelopers to create extremely interactive browser-based applications that work like desktopapplications and deploy like websites. It is the leading, and most mature of the rich-clientproducts which are now coming to be known as AJAX.

This product is powering enterprise grade applications since 2001. The current version is2.4 and In JavaOne-2005 TIBCO announced AJAX accelerator program and early accessprogram for version 3.0


25/34

AJAX White paper


8 AJAX Frameworks and libraries

Open source community has quickly added few frameworks and libraries based on AJAX tohelp developers start building their applications on top of it. This paper lists few of the themhere.

8.1 Simple Web Framework (SWF)Simple Web Framework is Java web framework for creating web applications targetingStruts developers who want to develop Rich Client Applications but do not want to migrateto JSF. It supports standard form submit type event processing as well asXMLHTTPRequest based event posting with In place Page Updating (IPU) rather thanloading the page again.

8.2 Simple AJAX (SAJAX)

Simple AJAX toolkit makes it easy to call ASP, Cold Fusion, PHP etc. functions from theweb pages via JavaScript without refreshing browser pages. Support for Java is not yetadded.

8.3 AJAX.NET

AJAX.NET provides flexible and easy to use ASP.NET based AJAX web applicationframework.

8.4 Backbase

Backbase provides AJAX based frameworks in different editions. It is a commercial product.

8.5 UserX framework (From Cognizant .NET CoE)

Cognizant .NET CoE has developed a framework based on JavaScript, XML-RPC andHTML. More details can be found at .NET CoE website

More information https://swf.dev.java.net/docs/Overview.html

Latest Version 0.6

Documentation JavaDocs available

License Type Apache Software License

More information http://www.modernmethod.com/sajax/index.phtml

Latest Version 1.0

Documentation Help and Forums available

License Type BSD

More information http://www.modernmethod.com/sajax/index.phtml

Latest Version 1.0

Documentation Forums available

License Type BorgWorX Public License (short BPL).

More information http://www.backbase.comLatest Version 3.0

Documentation User guides, technical support, training

License Type Commercial


26/34

AJAX White paper


9 Proof of Concept

This whitepaper is based on hands on experience with small PoC on AJAX. Following arethe features developed in the PoC. For simplicity and understanding the basics, thesefeatures are developed in pure JavaScript and Java technologies without using any specificframework.

PoC maintains the JCoE members information and have ability to add / update membersinto the system. Java based in memory database HSQL is used for storing the information.

PoC Features:

a. In the user registration process, already used USER_ID should becommunicated to the user when the user is on the registration page itself

b. Select box will have location details and upon selecting particular location fromthe select box a pop-up box will show core member names from that location

c. The search user criterion will have Google suggest kind of functionalityd. While adding new core user, the office address will be populated automatically

when the user selects the locatione. Tool tip for the selected skill-set will be fetched dynamically from the backend

Few screens from PoC showing AJAX functionality:

Automatic detection of ID in use asynchronously

through AJAX

Once the user selects location, address field gets

populated asynchronously

Fetching more details for Core skills and sub skills

from the server asynchronously

Search user functionality showing the result on the same

page without form submit operation

Fig 9.1 PoC sample screens

Where to download PoC from and how to use it? :

PoC .war file is available from JCoE portal. Please visit JCoE portal and look for AJAX links.Copy downloaded ajax.war file into Tomcat webapps folder. Start the server and providefollowing URL http://hostName:port/ajax


27/34

AJAX White paper


10 Strengths and Limitations of AJAX

AJAX PoC was a simple exercise carried out by JCOE team to understand strengths andweaknesses of the AJAX technology. Following strengths and weaknesses are based onPoC and overall understanding from different websites and blogs.

10.1 AJAX Strengths

Rich user interface and user experiences

Based on standard matured technologies

Real time validation of user entered information is possible Suggestions and prompts to help users are possible

No need to fetch complete set of data to the client in single trip. On selectingmaster data, corresponding client information can be fetched asynchronously

Real time data fetch like address details, stock quotes, inventory details ispossible without interrupting the application user

Since the information exchange is in small pockets, there is performance

improvement in overall application behavior Relatively easy to implement. Few OSS/Commercial frameworks are already

available. As it becomes more popular, there will be more choice

As major industry players are showing interest in this technology there arechances that in near future, there will be supporting tools and technologies

10.2 AJAX Limitations

Not all the browsers support XMLHTTPRequest object. It means the applicationdeveloped may not be accessible for older versions of browsers

There are discrepancies in supporting the JavaScript by different browsers. Theway IE creates the XMLHTTPRequest object is different than the other browsers

AJAX based application users do not quickly understand what action they needto take on click of button or link. They are accustomed to form submit and wait forresponse kind of applications. When they see no page being refreshed they getconfused. Visual clue on what is going on background is needed

Since AJAX does not maintain the browser history, back button does not work inthese applications. Users expect website like functionality on these applications.

AJAX is best used in applications to update small portions of the page inasynchronous way. Application user may not understand what has changed onthe screen after he clicked on button or link. Some sort of indication (blinking textor some other indication) is must

AJAX Engine needs to be downloaded on the client side when the session isinitiated. Depending on the size of engine and network bandwidth, user may finddelays in starting the application

Debugging JavaScript based huge code is tedious

Since the page updates are occurring asynchronously, it is difficult to keep trackof overall application context.

AJAX based applications uses too much of JavaScript and sometimes if notmanaged properly are difficult to debug. In addition to browsers compatibility,those are needed to be tested for asynchronous behaviors


28/34

AJAX White paper


No standard tools available for development and debugging

AJAX engine source code is easily viewable on client browsers

Though X in AJAX stands for XML, there is no standardized format(XML/JavaScript/Plain Text, etc) for fetching information back from server.

The underlying technology and platform for AJAX applications is the same asthat for non-AJAX web applications, so the underlying security holes are the

same for both of the applications. But since AJAX itself is maturing, more careneeds to be taken to understand how asynchronous behavior works and howexactly client-server RPC works. In some cases it is highly possible to overlooksome of the issues. Some of the more common cases related to security include:

o Quick & dirty RPC mechanisms that allow arbitrary code execution onthe server (For example the bug in CPAINT AJAX toolkit affected manysites recently)

o Client-side script injection to destroy server side function if not blocked incomponent HTML renderers

o Overly-permissive proxies that allow arbitrary cross-domain scriptingo What's more, JavaScript code is not compiled the way languages such as

C and Java are. And end-user can view or even edit the JavaScript codebefore it runs. For example, an attacker could search for strings of textcontaining SQL instructions and replace that code with different queriesthat retrieve different information from the server.

10.3 Caution

PoC is tested on Internet Explorer, Mozilla and Netscape major versions. ThoughAJAX has guaranteed support from major browsers, while creating PoC weidentified few discrepancies to the JavaScript support provided by thesebrowsers which caused distortion in view. Only Internet Explorer has providedundistorted view.

10.4 AJAX is not suitable in following situations

If your application need to support wide range of browsers. Since AJAX ismaturing in terms of support for XMLHTTPRequest, JavaScript discrepancies,etc, it is advisable not to consider this technology until the browsers support isimproved.

If your application need high end graphics support for UI, AJAX is not suitable.

If your project has strict deadlines. Think twice before you start using AJAX

today. It is because there are no standard tools to start developing AJAX basedapplications quickly. Tool set market is maturing and will take another year or so.Though SUN and Microsoft has announced their plans for tools it will take sometime to mature the toolset. Other companies are appearing in market with AJAXspecific toolset like ThinkCap(JX) from http://www.clearnova.com/. This toolhelps with its Visual Design Environment for Rich Internet Applications.

If you do not have strong JavaScript resources in your project. Since JavaScriptis heart of AJAX, strong knowledge of writing and debugging JavaScriptcodebase is must.


29/34

AJAX White paper


When the application needs extensive back and forward buttons, AJAX is notgood choice as AJAX does not support back button functionality. Traditionallyback button is being used for navigation on web sites. Application user needs toeducate that there is difference between web site and web application. On webapplication navigation flow should be only through application specific links/buttons.

Returning to the previous state is not possible when a page is updated dynamically,since browsers typically record only static page visits in their history lists. Thedistinction between a static page, loaded in its entirety, and a pagewhich has beenmodified dynamically might be a subtle one; users generally expect that clicking theback button in web applications will undo their last change and in Ajax applicationsthis might not be the case as there is no static pages developed for an AJAXrequests.

There are few open source AJAX related frameworks like dojo.org which are workingon removing this bottleneck from AJAX functionality by allowing tracking of Ajaxrequests via callbacks which are called whenever the back button is pressed,

restoring the application state that existed at the time.


30/34

AJAX White paper


11 AJAX and Struts integration

Struts and AJAX can be integrated together to utilize the advantages offered by both thesetechnologies. Struts can provide popular MVC2 based web application framework and AJAXspecific components can add asynchronous functionality for page updates and to provide

AJAX specific advantages to the application.

Typical Struts + AJAX application will follow the sequence shown in the following diagram.(This is very simple approach of integrating AJAX in Struts application. There are otherpossible ways, too)

Fig 10.1 AJAX Struts integration

This typical approach shows that, in addition to the struts specific front controller Servlet,there is AJAX Servlet on server side, which interacts with the database through somefaade objects and sends data back to the AJAX engine. Struts front controller, form beansand corresponding Actions are also present in the application and may not directly relate tothe AJAX functionality.

Once user access particular URL of Struts based application:

1. Application returns the HTML page to client. This page is embedded with AJAXengine code (JavaScript)2. For a specific requirement, say for adding user specific information to the database,

application user searches particular user by entering first name in search box3. As user enters the name, AJAX engine gets invoked and receives data which user

has entered in search box4. AJAX engine communicates with the AJAX Servlet and passes this information to it

(by using URL of Servlet and by using XMLHTTPRequest object).


31/34

AJAX White paper


5. AJAX Servlet interacts with the database through standard faade objects andretrieves data to be sent to the client side AJAX engine

6. AJAX Servlet sends back this data to client side AJAX Engine7. Information is parsed through callback() function present in AJAX engine8. Fetched information is used to provide suggestions to the user. As user completes

the name in this search box, he will see filtered information as suggestions to selectnames from

9. User selects particular name, adds other information on the form and then clicks onthe add button. This request goes to the Struts front Controller. (Other Strutsspecific tasks take place accordingly, for example form beans get populated with theform data, etc.)

10. Struts front controller works with corresponding Action classes and these Actionclasses in return work on database to add data through standard implementationbased on different design patterns.

AJAX and Struts functionality, though integrated together, is partitioned separately. Theserver side functionality is accessed through different URLs and corresponding server sidecomponents are different Servlets and POJOs.

Specific AJAX function and AJAX Servlet can act as reusable component set and can beintegrated with JSF based implementation, too.


32/34

AJAX White paper


12 Where to learn more?

# Web site Description

1 http://adaptivepath.com/ Information on AJAX and general Q/A

2 http://bpcatalog.dev.java.net/nonav/ajax/index.html Java blueprints on AJAX and JSF

3 http://www.cmswatch.com/images/AjaxFinal.html A video clip describing AJAX

4 http://en.wikipedia.org/wiki/AJAX General description on AJAX

5 http://java.sun.com/developer/technicalArticles/J2EE/AJAX/ J2EE and AJAX


33/34

AJAX White paper


13 Reference

# Web site Description

1 http://www.macromedia.com/platform/whitepapers/idc_impact_of_rias.pdf Rich Internet Applications Paper by IDC 2003-2004

2 https://bpcatalog.dev.java.net/nonav/ajax/index.html J2EE AJAX blueprints

3 http://weblogs.asp.net/scottgu/archive/2005/06/28/416185.aspx Atlas project information

4 http://www.adaptivepath.com/publications/essays/archives/000385.php Adaptivepath website

5 http://www.tibco.com/software/business_optimization/generalinterface.jsp TIBCO General Interface

6 http://javalobby.com/java/forums/t21372.html Javalobby discussion

7 http://www.theserverside.com/news/thread.tss?thread_id=33319 TheServerside discussion

8 http://www.google.com/webhp?complete=1&hl=en

http://maps.google.com/

Google suggest, Google Mapwebsites and FAQ

9 http://www.ajaxian.com Ajaxian Blog discussion

10 http://www.ajaxmatters.com/r/welcome AJAX articles, presentations,discussions

11 http://sourcelabs.com/ajb/archives/2005/05/ajax_mistakes.html Blog at SourceLabs.com


34/34

AJAX White paper

14 About JCOE

JCOE has been part of the Global Technology Office (GTO), since September 2004. JCOEdevelops thought leadership and excellence in Java technologies. It aims to enable

knowledge sharing within Cognizants Java community and gain mind share on Java

technologies for success in the marketplace. Other goals include developing accelerators torapidly build and deliver high quality Java-based solutions and providing a technology careerpath for Java enthusiasts.

More information on JCoE is available at http://jcoe.cognizant.com

About Author:

Swarraj Kulkarni has 13 years of industry experience. His experience ranges from designand development of Microcontroller based embedded systems to J2EE based enterpriseapplications. He has worked as consultant to few of the fortune 500 companies in Californiaincluding Symantec, NEC, National Semiconductor, etc. He is a JCoE anchor for Banking

and Financial Services (BFS) and is based in Pune. He can be reached [email protected] (VNet: 22708)

Documents

AJAX Whitepaper