Asynchronous Javascript and XML (Ajax) : White Paper by Java Coe

AJAX White paper
AJAX
Asynchronous JavaScript And XML (AJAX) White paper by Java CoE
Submitted on: September 15, 2005 Version 1.0
Cognizant Technology Solutions
All rights reserved
Page 1 of 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 GoogleMaps 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.
All rights reserved
Page 2 of 34
AJAX White paper
TABLE OF CONTENTS
1 2 3 4 4.1 4.2 4.3 5 5.1 6 6.1 6.2 6.3 6.4 7 7.1 7.2 7.3 8 8.1 8.2 8.3 8.4 8.5 9 10 10.1 10.2 10.3 10.4 11 12 13 14 EXECUTIVE SUMMARY........................................................................................... 5 STRUCTURE OF PAPER ......................................................................................... 6 OVERVIEW OF TYPICAL WEB TECHNOLOGIES................................................. 7 CONSIDERATIONS ON WEB APPLICATION DESIGN ......................................... 8 W EB SITE AND W EB APPLICATION ............................................................................... 8 CHALLENGES INVOLVED IN CURRENT W EB APPLICATIONS ........................................... 9 OVERVIEW OF RICH INTERNET APPLICATIONS ........................................................... 10 AJAX ........................................................................................................................ 12 OVERVIEW OF AJAX................................................................................................. 12 AJAX BASED POPULAR A PPLICATIONS........................................................... 19 GOOGLE MAIL ........................................................................................................... 19 GOOGLE SUGGEST ................................................................................................... 20 GOOGLE MAPS ......................................................................................................... 21 JAVARSS.COM ......................................................................................................... 21 AJAX ADOPTION BY MAJOR INDUSTRY PLAY ERS......................................... 23 SUN......................................................................................................................... 23 MICROSOFT .............................................................................................................. 23 TIBCO ..................................................................................................................... 24 AJAX FRAMEWORKS AND LIBRARIES .............................................................. 25 SIMPLE W EB FRAMEWORK (SWF) ............................................................................ 25 SIMPLE AJAX (SAJAX) ............................................................................................ 25 AJAX.NET ............................................................................................................... 25 BACKBASE ................................................................................................................ 25 USERX FRAMEWORK (FROM COGNIZANT .NET COE)................................................ 25 PROOF OF CONCEPT............................................................................................ 26 STRENGTHS AND LIMITA TIONS OF AJAX ......................................................... 27 AJAX STRENGTHS .................................................................................................... 27 AJAX L IMITATIONS ................................................................................................... 27 CAUTION ................................................................................................................... 28 AJAX IS NOT SUITABLE IN FOLLOWING SITUATIONS .................................................... 28 AJAX AND STRUTS INTEGRATION..................................................................... 30 WHERE TO LEARN MORE?.................................................................................. 32 REFERENCE........................................................................................................... 33 ABOUT JCOE ......................................................................................................... 34
All rights reserved
Page 3 of 34
AJAX White paper
Table of figures
Fig 4.1 Fig 4.2 Fig 5.1 Fig 5.2 Fig 5.3 Fig 5.4 Fig 6.1 Fig 6.2 Fig 6.3 Fig 6.4 Fig 6.5 Fig 6.6 Fig 9.1 Fig 10.1 User experience and expectations .................................................................................9 Rich Internet Application ............................................................................................. 10 Traditional web application .......................................................................................... 15 AJAX based web application ....................................................................................... 15 Request-Response navigation flow in AJAX based application....................................... 16 Typical sequence diagram for AJAX based application.................................................. 17 Google mail auto address suggestions ...................................................................... 19 Google mail spelling check tool ................................................................................. 19 Google suggest screen ............................................................................................... 20 Google map screen..................................................................................................... 21 JavaRSS.com sample tool-tip ...................................................................................... 22 AJAX functionality enable/disable screen ..................................................................... 22 PoC sample screens ................................................................................................... 26 AJAX Struts integration............................................................................................. 30
All rights reserved
Page 4 of 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 application developers, its adoption in the popular search engine Google has created waves in the internet community. The Rich Client Applications with rich user experience are achievable through AJAX to fulfill demands from the business user community. Browser side components like JavaScript and XMLHTTPRequest are 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 Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, and Netscape 7. On the other hand server side components can be based on Java/J2EE or .NET platform. AJAX is technology independent 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 exploring opportunities with it to build rich web based applications as closer as possible to the thick rich clients having functionalities like responsive forms, incremental updates, etc. This white paper provides sufficient information on the AJAX technologies, how it works and also pros and cons of it. This white paper is accompanied with an AJAX based PoC to help understand code level details. The paper provides information on URL for downloading and installing this PoC.
All rights reserved
Page 5 of 34
AJAX White paper
2 Structure of Paper
This white paper structure is arranged in such a way to provide sufficient information on AJAX to both technical and non-technical members. Though it is recommended to go through 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)
All rights reserved
Page 6 of 34
AJAX White paper
3 Overview of typical web technologies

This section provides information on typical web technologies which are related to or part of AJAX.
Technology HTML CSS
Type Presentation Presentation
JavaScript
Client side processing
Description Markup tags wrapping the contents to display in web browser Cascaded Style Sheets are used to manage presentation styles through external configuration files Client side language and technology available with the ability to run code and installed on a majority of web clients (browsers)
Role in AJAX Basic presentation technology Aesthetic touches and configurable presentation styles Heart of the AJAX. AJAX Engine is based on JavaScript. Invoke and manage asynchronous communication with backend systems Information exchange mechanism. Though XML is not the only format AJAX Engine receives information in. In few cases, JavaScript itself is fetched asynchronously Extremely powerful component to make HTTP call and capture the results with few lines of code. The object acts like a browser and retrieve the data from given URL It is not a part of AJAX technology.
XML
Data markup
Extensible Markup language helps binding information contents through meaningful tags. These tags can be user defined.
XMLHTTPRequest
Web browser based communication handler
Provides web browser's communication functionality with just a handful of methods and properties. It was basically part of MSXML which ships with Internet Explorer 5.0 and above. It is now supported by major browsers Server side Java technology which can be used to as middle tier to fetch data from information repositories and send it to client Static contents provider on HTTP/S transport. It can be extended with CGI or Servlet to provide dynamic contents 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
Servlet
Server side Java technology parallel to CGI
Web Server
Information server on HTTP/S protocol
It is not a part of AJAX technology
Web Browser
Web application client
Basic client with JavaScript enabled is must for AJAX
All rights reserved
Page 7 of 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 information spreading. Initially the expectations from the information provider and receiver were least only contents (without major focus on its presentation). HTML was the only supporting technology 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 provide attractive and rich user experiences. As web technologies are maturing in terms of features and functionalities and improving in terms of rich user interfaces and usability experiences, web sites are becoming more attractive and powerful. Web sites like G-Mail from Google are more attractive and rich in user experience compared to the other web based mail service providers. Similarly Googlesuggest or Google-maps are relatively better in user experience compared to the other web sites providing similar services. Web Application: Web application on the other hand is answer for orthodox thick client applications. Web application makes use of standard web technologies to develop and integrate complex business functionalities as needed by end users. Here the business functionalities may not just 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 on the functionality provided through the web technologies rather than the presentation and contents as in Web sites. From usability standpoint, a web application needs to follow standard set of human interface guidelines, but these guidelines are not mandatory and user expectations may vary and not satisfactory always. Most of the time, web application users expect desktop-like functionality from the browser based applications. This is challenging as the web applications are traditionally based on technologies with limited features. This is changing though. Combination of technologies, knowledge of their strengths and limitations, and best practices are helping to manage the user expectations. The traditional web applications are improving their richness in terms of presentations and user experiences.
All rights reserved
Page 8 of 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 on the 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 has added new features to fulfill growing expectations from the Web Application users. Java Server Faces (JSF) is one of the examples from Java stack. In addition to the technical challenges, todays web application developer needs to consider limitations of the technologies involved. Non technical challenges include considerations for page navigational flow, user interface design, page size and available associated server side infrastructure.
Challenging Web Application Development process

Fig 4.1 User experience and expectations
Huge expectations from Web Application users
General user experience!
Few of the major challenges are listed below: 1. Navigation simplicity: Most of the enterprise class web applications are complex in nature 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 sub pages, user needs to navigate through the pages back and forth. This navigation or page 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 data links on the screens which can be drilled down further to find more details associated with that link. For example, a page needs to show countries and major cities in those countries when someone selects from drop down or clicks on the country link. A typical web application may request to the server to download names of cities for a given country passing the selected country name. This is a form submit operation
All rights reserved
Page 9 of 34
AJAX White paper
and will cause page flicker. The other way is to download complete information and maintain on the client side and show the cities through client side code itself. The bottleneck 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 the form and if something is wrong in the entered form data, indicate the user to correct it. 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. For example, a user registration form providing hint to the user about non availability of selected 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 be updated with latest information or as computation result. The application is required to be very interactive and need to have intelligence to respond to user inputs and change their state or interface without full page refresh or interruptive communication to the server
4.3
Overview of Rich Internet Applications
Rich Internet Applications empowers web application developers to achieve innovative user experiences and applications with features that would have been impossible for a developer to achieve through the traditional web technologies. Rich Internet Applications integrate best of Desktop applications and Web based applications and can handle different rich media formats including audio and video.
Rich UI Highly Responsive Require client side installations Version conflicts Browser Interface No installation on client side Slow response time Limited UI support
Desktop Application
Rich Internet Application
Web Application
Rich Media
Browser Interface No installation on client side Rich UI Highly Responsive
Fig 4.2
Rich Internet Application
Traditionally desktop applications are popular for effective user interfaces. The desktop interfaces are users friendly and responsive (without any page refresh). Further the desktop applications can work equally well in online and offline mode. Rich user interfaces would allow sophisticated user interfaces on thick clients but the use limits to the machine where it has been installed.
All rights reserved
Page 10 of 34
AJAX White paper
Web applications on the other hand are better in cross platform support, does not need any installation on client side, support need based information download and can use wide variety of Internet technologies. Web based solutions have relatively simpler user interface but are easily deployable for larger number of clients. Rich Internet Applications bring best of these approaches together to provide best user interfaces and user experiences. Rich Internet Applications can be integrated with the legacy applications. It can also act as an interactive presentation layer on the top of web services. AJAX is being used for implementing Rich Internet Applications. Google G-Mail is considered as classic example of AJAX based Rich Internet Application where the flickerless user experience is achieved through the asynchronous background operations through JavaScript.
All rights reserved
Page 11 of 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 web developers 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 asynchronously with the web server (Although AJAX applications can use other technologies like preformatted 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-mentioned technologies.
i AdaptivePaths Jesse James
Garrett, coined the AJAX acronym in an essay written in February 2005. This essay is available at http://adaptivepath.com/
AJAX is not a new approach of building Web applications. In theory, asynchronous data retrieval became possible in 1996 with Netscape 2.0 browser with support for frames and JavaScript. Few developers developed applications with this functionality and fetched the data asynchronously by 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. In addition to the hidden frames, web developers have tried this approach with Java Applets to emulate this interaction model. What has changed in recent past is support for XMLHTTPRequest object by most of the popular browsers. Although this object is not mentioned in the JavaScript specification, there are many browsers which support its full functionality. Since most of the existing popular browsers are already supporting it, it has become de facto standard that will likely be supported even after the W3C specification becomes final and starts being implemented in new browsers, too. So there is no obvious risk adopting this object. Static HTML pages can asynchronously make call to the server from which it is loaded by using JavaScript 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 Document Object Model of HTML page. The HTML pages interact with the JavaScript based on events such as mouse over, click, etc. to fetch the required data from the server instead of reloading the complete web page every time the change is needed to be displayed
All rights reserved
Page 12 of 34
AJAX White paper
The key goal of AJAX based applications is to decompose jarring transitions that download the entire new web page into a series of smaller more frequent transactions. The asynchronous background process can update the data without interrupting the user. Application component can poll for XMLHTTPRequest objects readystate=loaded event to notify data extracting component notifying download operation is complete.
XMLHTTPRequest Object
XMLHTTPRequest object allows client side JavaScript to make synchronous or asynchronous calls to the server side components (HTTP GET/POST requests). Microsoft implemented this object as an ActiveX component in Internet Explorer 5 and soon other browsers started supporting it. Though the name consists of XML, this object can be 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
XML functionality but none of the browser has supported it. So to make a call from browser to the server, the only way is
to 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")
This object is not a standard W3C standard. W3C DOM Level 3 Load and Save specification contains similar
Methods supported by this object Method abort() getAllResponseHeaders() getResponseHeader("headername") open("method","URL",async,"uname","pswd") Description Cancels the current request Returns the complete set of http headers as a string Returns the value of the specified http header Specifies the method, URL, and other optional attributes of a request The method parameter can have a value of "GET", "POST", or "PUT" (use "GET" when requesting data and use "POST" when sending data The URL parameter may be either a relative or complete URL. The async parameter specifies whether the request should be handled asynchronously or not. true means that script processing carries on after the send() method, without waiting for a response. false means that the script waits for a response before continuing script processing send(content) setRequestHeader("label","value") Sends the request Adds a label/value pair to the http header to be sent
All rights reserved
Page 13 of 34
AJAX White paper
This object has following properties Property Description
onreadystatechange An event handler for an event that (1) From IDC White paper on Rich Client Technologies fires at every state change readyState Returns the state of the object: 0 = uninitialized 1 = loading 2 = loaded 3 = interactive 4 = complete responseText responseXML status statusText Returns the response as a string Returns the response as XML. Returns the status as a number (e.g. 404 for "Not Found") 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 get notified when the call is complete. This object provides facility for callback mechanism. Please see the code below to understand how this works
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> 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 notifications xmlHttpObj.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; } } </SCRIPT>
All rights reserved
Page 14 of 34
AJAX White paper
How AJAX works? Traditional web applications submit the form data to the server on HTTP/S and wait for the response from the server in response to the sent request. On the Server side this request data is received by using CGI or Servlet like technologies, parsed and then appropriate action 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, CSS based 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 HTML and JavaScript appropriately display the page. The overall interaction model is requestresponse based and for each submitted request, there is a new web page constructed by server and sent back to the client. This process is interruptive and takes considerable time for each new page fetch. On the other hand, AJAX based applications can send requests to the Server to retrieve only the data that is needed. This information exchange is basically carried out through XML based communication format and the response is processed on the client side to display the requested data.
Fig 5.2
AJAX based web application
All rights reserved
Page 15 of 34
AJAX White paper
This results in more responsive applications as only very limited amount of data is being exchanged between the client and server. AJAX applications make lot of micro level requests of fetching low volume data from the server. These applications are developed with the help of AJAX frameworks and utilities which gets downloaded to the client side when the application is loaded for the first time from the server. This JavaScript based AJAX engine consists of many useful functions for carrying out asynchronous communication, data manipulation and display. These engines can be developed as a part of project or can be downloaded and used from the open source communities. Few of the open source AJAX engines include DWR, SWF and others. More details on these engines are available in the section on Frameworks and utilities. Following example shows a sample screen from the P and describes how the AJAX oC request and response propagates through different components for checking whether the user 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 the JavaScript and validate () method is called in AJAX engine which is part of the client side downloaded page. 3. The validate () method creates the XMLHTTPRequest object, opens the URL connection to the server side component, register with the callback method handler and passes it the text entered into the ID text field. 4. XMLHTTPRequest object communicates with the server side component, say Servlet and passes the client side information to it. This interaction is carried out asynchronously.
All rights reserved
Page 16 of 34
AJAX White paper
5. Servlet interacts with the database (through faade in practical cases) and checks if the 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 and on ready state it parses returned information 8. In case of error, the client side logic displays the message ID in use. In case of success, 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 to generate specific action to invoke particular action specific function in JavaScript based AJAX Engine. JavaScript based engine create the XMLHTTPRequest object Open method on the XMLHTTPRequest object is called with specific URL to which the request is needed to sent and response is expected from
All rights reserved
Page 17 of 34
AJAX White paper
Request is sent to the backend system. The server side component interprets the incoming request and processes it. After processing the server side component send the response back to the client Meanwhile the AJAX engine asynchronously processes the notifications in the callback method. The readyState property can be checked to find whether the response is received and available on the client side (readyState = 4) AJAX engine parses the received response and builds the DOM from it and updates 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 individual component is responsible for specific AJAX functionality. Though this may increase number of server side components, application developer can achieve flexibility of reusing this specific component in multiple applications. Sun has suggested multiple options of integrating AJAX and JSF for developing such independent components. See resources for the 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 AJAX components need to be treated as UI helper components only and no complex business logic should be tightly coupled with it. Though AJAX sends multiple requests to server on background, the amount of data exchange is actually very small and may not cause any bandwidth congestion problems. Since the business functionality is different for each application, what information needs to be sent in response to the AJAX request and how it is being retrieved from underlying data sources will be different for different applications and in complex applications may cause increase CPU and other resources utilization. Great care needs to be taken when AJAX functionality 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 to deal with different backend resources and take different processing time to return back to the client. On the client side UI has some dependency based logic which needs to have ordering 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, remote calls may not return in the order in which they were sent. There is no direct way to control their response order. Obviously this can be done through some sort of server side programming logic. Other ways is to use Direct Web Remoting (DWR) framework which is a open source AJAX software for making AJAX development easier using extensive libraries. DWR offers a function in its engine.js file named DWREngine.setOrdered (boolean). DWR achieves this by only sending new requests when old requests have been completed. Obvious drawback of this setting is slowing down of application, and may leave users with an unresponsive browser.
All rights reserved
Page 18 of 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 its adoption by Google in many of its applications including Google Mail, Google-suggest and Google-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 through these applications.
6.1
Google Mail
Google has gained huge user base for its G-Mail service in short time. It is based on the AJAX technologies for automatic address filtering. As user starts typing the recipient address, the mail program immediately shows the matching addresses and dynamically constrains the list as user continue typing. In Outlook, user needs to type CTRL-K to complete 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 correct words 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 the UI and the server is only the data. G-Mail loads JavaScript based AJAX engine on startup of every session and subsequent Server side interaction is carried out through it. The Server side response to the AJAX request is not XML though. It is a pure JavaScript function. In fact the Google Developers called this functionality as just JavaScript and not AJAX. Cognizant Technology Solutions All rights reserved Page 19 of 34
AJAX White paper
i Loading of JavaScript engine

on the client side browser for email based application was initially carried out by a web based mail service provider called Oddpost. Yahoo bought this company recently in Q2-2005
This is a different approach than the other web mail service providers including Hotmail and Yahoo which loads the UI on every action. To reduce the traffic and improve performance, server side component sends HTML file which only consists of JavaScript array declarations that UI engine parses and uses that information to decide what portion of the UI is needed to update.
Since the basic functionality is based on AJAX technologies, G-Mail provides all its standard features on IE 5.5 +, Netscape 7.1+, Mozilla 1.4+, Firefox 0.8+ and Safari 1.2.1+. On other browsers, G-Mail standard features are not available. So features like, spellchecker, auto address 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 a dynamic user interface. When user starts typing in, the background process sends the typed text to the server and fetches the appropriate words starting with the typed text. As user goes on typing additional characters to complete the word, more refined results are fetched from 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 the JavaScript code in response to the request. For example, in the above example, when the Google-Suggest URL is typed as below user can see the response as pure JavaScript function which AJAX engine parses and populates the suggestion box. URL: http://www.google.com/complete/search?hl=en&js=true&qu=cogn
All rights reserved
Page 20 of 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,000 results", "351,000 results"), new Array(""));
The sendRPCDone function is present in ac.js file which is part of the Google-Suggest home page. This function carries out important tasks like caching retrieved results, parsing it, displaying it, etc.
6.3
Google Maps
Google-Maps is another example of AJAX uses from Google family. Google-Maps provide details of geographical areas with zooming facility. At present this facility is available for only USA and few other countries. This dynamic, interactive service helps user to drag the map without clicking and waiting for the response.
Fig 6.4
Google map screen
Google-Maps provide scrolling map functionality by only downloading the newly visible tiles and 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 integration with this functionality in applications with JavaScript.
6.4
JavaRSS.com
This is a popular portal with latest Java technologies news from different vendors and other popular web sites. This site uses AJAX to display tool tip information with more details on the article links. Tool tip information is not embedded in the web page. It is fetched from the server side on mouseover event.
All rights reserved
Page 21 of 34
AJAX White paper
Fig 6.5
JavaRSS.com sample tool-tip
By default JavaRSS.com works with AJAX functionality disabled. This means the entire mouse over tool tips get downloaded to the client side page and use can see it if they look into web page source. Following code snipped shows contents in the webpage for abovedisplayed tool tip
To enable the AJAX functionality, user can go to settings window and enable AJAX functionality.
Fig 6.6
AJAX functionality enable/disable screen
Once the AJAX functionality is enabled, the tool tips contents does not get downloaded to the web page. Once the AJAX functionality is enabled the same tool-tip related source code looks like
Where JavaScript function d(3,2737) passes channelId and itemId parameters to getDescription() function which appends these parameters to the URL to fetch appropriate information downloaded and shown as tool tip. AJAX enablement on this web site reduces the initial page load size by more than half, there by loading the page faster for a better user experience.
All rights reserved
Page 22 of 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-2005 conference held in San Francisco. Sun has announced their plans to support or increase their support for AJAX based development. Sun is working on a development tool called Java Studio Creator and Version 2 is due in December 2005. Java Studio creator is an easy-to-use visual IDE for building rich web applications with minimal code creation. Sun officials mentioned that Java Studio will ease the process of building rich Internet applications through the advanced features supported by this tool. The main aim of this tool is to simplify Java development process and provide support for AJAX through component library. The Sun blueprint project has put lots of information on AJAX and J2EE to enable dynamic web applications. Following contents are taken from summary of the blueprint. (https://bpcatalog.dev.java.net/nonav/ajax/index.html) 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 applications with APIs for tying in HTTP processing, databases, web services, XML processing and business objects. With a better understanding of this interaction model, today's applications can become more interactive providing a better experience to the end user.
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 these technologies mature, there are possibilities to have more ready made components available as 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 in September 2005. Developers can use Atlas software through Visual Studio 2005 and ASP.NET 2.0 which are scheduled to be released in November 2005. It is also planning to provide sample templates or starter kits around AJAX in near future. While Microsoft has used the technology since 1998 in it's web based Outlook service, it did not aggressively marketed 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 browsers supporting 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 lifetime management, multicast event handlers, etc.
All rights reserved
Page 23 of 34
AJAX White paper
7.3
TIBCO
TIBCO has been working on rich Internet application framework based on AJAX called TIBCO General Interface. This framework provides rich graphical user interface features and performance of desktop applications without adding any client side plug-in into the browsers. TIBCO General Interface incorporates AJAX and adds powerful features like component libraries, 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 and TIBCO General Interface Builder built entirely in JavaScript, DHTML, XML/XSL to enable developers to create extremely interactive browser-based applications that work like desktop applications and deploy like websites. It is the leading, and most mature of the rich-client products which are now coming to be known as AJAX. This product is powering enterprise grade applications since 2001. The current version is 2.4 and In JavaOne-2005 TIBCO announced AJAX accelerator program and early access program for version 3.0
All rights reserved
Page 24 of 34
AJAX White paper
8 AJAX Frameworks and libraries

Open source community has quickly added few frameworks and libraries based on AJAX to help developers start building their applications on top of it. This paper lists few of the them here.
8.1
Simple Web Framework (SWF)
Simple Web Framework is Java web framework for creating web applications targeting Struts developers who want to develop Rich Client Applications but do not want to migrate to JSF. It supports standard form submit type event processing as well as XMLHTTPRequest based event posting with In place Page Updating (IPU) rather than loading the page again.
More information Latest Version Documentation License Type https://swf.dev.java.net/docs/Overview.html 0.6 JavaDocs available Apache Software License
8.2
Simple AJAX (SAJAX)
Simple AJAX toolkit makes it easy to call ASP, Cold Fusion, PHP etc. functions from the web pages via JavaScript without refreshing browser pages. Support for Java is not yet added.
More information Latest Version Documentation License Type http://www.modernmethod.com/sajax/index.phtml 1.0 Help and Forums available BSD
8.3
AJAX.NET
AJAX.NET provides flexible and easy to use ASP.NET based AJAX web application framework.
More information Latest Version Documentation License Type http://www.modernmethod.com/sajax/index.phtml 1.0 Forums available BorgWorX Public License (short BPL).
8.4
Backbase
Backbase provides AJAX based frameworks in different editions. It is a commercial product.

More information Latest Version Documentation License Type http://www.backbase.com 3.0 User guides, technical support, training Commercial
8.5
UserX framework (From Cognizant .NET CoE)
Cognizant .NET CoE has developed a framework based on JavaScript, XML-RPC and HTML. More details can be found at .NET CoE website
All rights reserved
Page 25 of 34
AJAX White paper
9 Proof of Concept
This whitepaper is based on hands on experience with small PoC on AJAX. Following are the features developed in the PoC. For simplicity and understanding the basics, these features are developed in pure JavaScript and Java technologies without using any specific framework. PoC maintains the JCoE members information and have ability to add / update members into 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 be communicated to the user when the user is on the registration page itself b. Select box will have location details and upon selecting particular location from the 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 functionality d. While adding new core user, the office address will be populated automatically when the user selects the location e. 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
Fig 9.1 PoC sample screens
Search user functionality showing the result on the same page without form submit operation
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 provide following URL http://hostName:port/ajax
All rights reserved
Page 26 of 34
AJAX White paper
10 Strengths and Limitations of AJAX

AJAX PoC was a simple exercise carried out by JCOE team to understand strengths and weaknesses of the AJAX technology. Following strengths and weaknesses are based on PoC 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 selecting master data, corresponding client information can be fetched asynchronously Real time data fetch like address details, stock quotes, inventory details is possible 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 are chances 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 application developed may not be accessible for older versions of browsers There are discrepancies in supporting the JavaScript by different browsers. The way IE creates the XMLHTTPRequest object is different than the other browsers AJAX based application users do not quickly understand what action they need to take on click of button or link. They are accustomed to form submit and wait for response kind of applications. When they see no page being refreshed they get confused. Visual clue on what is going on background is needed Since AJAX does not maintain the browser history, back button does not work in these applications. Users expect website like functionality on these applications. AJAX is best used in applications to update small portions of the page in asynchronous way. Application user may not understand what has changed on the screen after he clicked on button or link. Some sort of indication (blinking text or some other indication) is must AJAX Engine needs to be downloaded on the client side when the session is initiated. Depending on the size of engine and network bandwidth, user may find delays in starting the application Debugging JavaScript based huge code is tedious Since the page updates are occurring asynchronously, it is difficult to keep track of overall application context. AJAX based applications uses too much of JavaScript and sometimes if not managed properly are difficult to debug. In addition to browsers compatibility, those are needed to be tested for asynchronous behaviors All rights reserved Page 27 of 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 as that 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 care needs to be taken to understand how asynchronous behavior works and how exactly client-server RPC works. In some cases it is highly possible to overlook some of the issues. Some of the more common cases related to security include: Quick & dirty RPC mechanisms that allow arbitrary code execution on the server (For example the bug in CPAINT AJAX toolkit affected many sites recently) o Client-side script injection to destroy server side function if not blocked in component HTML renderers o Overly-permissive proxies that allow arbitrary cross-domain scripting
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 code before it runs. For example, an attacker could search for strings of text containing SQL instructions and replace that code with different queries that retrieve different information from the server.
10.3 Caution
PoC is tested on Internet Explorer, Mozilla and Netscape major versions. Though AJAX has guaranteed support from major browsers, while creating PoC we identified few discrepancies to the JavaScript support provided by these browsers which caused distortion in view. Only Internet Explorer has provided undistorted view.
10.4 AJAX is not suitable in following situations If your application need to support wide range of browsers. Since AJAX is maturing in terms of support for XMLHTTPRequest, JavaScript discrepancies, etc, it is advisable not to consider this technology until the browsers support is improved. 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 based applications 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 some time to mature the toolset. Other companies are appearing in market with AJAX specific toolset like ThinkCap(JX) from http://www.clearnova.com/. This tool helps with its Visual Design Environment for Rich Internet Applications. If you do not have strong JavaScript resources in your project. Since JavaScript is heart of AJAX, strong knowledge of writing and debugging JavaScript codebase is must.
All rights reserved
Page 28 of 34
AJAX White paper
When the application needs extensive back and forward buttons, AJAX is not good choice as AJAX does not support back button functionality. Traditionally back button is being used for navigation on web sites. Application user needs to educate that there is difference between web site and web application. On web application 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. The distinction between a static page, loaded in its entirety, and a page which has been modified dynamically might be a subtle one; users generally expect that clicking the back button in web applications will undo their last change and in Ajax applications this might not be the case as there is no static pages developed for an AJAX requests. There are few open source AJAX related frameworks like dojo.org which are working on removing this bottleneck from AJAX functionality by allowing tracking of Ajax requests via callbacks which are called whenever the back button is pressed, restoring the application state that existed at the time.
All rights reserved
Page 29 of 34
AJAX White paper
11 AJAX and Struts integration

Struts and AJAX can be integrated together to utilize the advantages offered by both these technologies. Struts can provide popular MVC2 based web application framework and AJAX specific 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 other possible 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 some faade objects and sends data back to the AJAX engine. Struts front controller, form beans and corresponding Actions are also present in the application and may not directly relate to the AJAX functionality. Once user access particular URL of Struts based application: 1. Application returns the HTML page to client. This page is embedded with AJAX engine 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 box 3. As user enters the name, AJAX engine gets invoked and receives data which user has entered in search box 4. AJAX engine communicates with the AJAX Servlet and passes this information to it (by using URL of Servlet and by using XMLHTTPRequest object).
All rights reserved
Page 30 of 34
AJAX White paper
5. AJAX Servlet interacts with the database through standard faade objects and retrieves data to be sent to the client side AJAX engine 6. AJAX Servlet sends back this data to client side AJAX Engine 7. Information is parsed through callback() function present in AJAX engine 8. 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 select names from 9. User selects particular name, adds other information on the form and then clicks on the add button. This request goes to the Struts front Controller. (Other Struts specific tasks take place accordingly, for example form beans get populated with the form data, etc.) 10. Struts front controller works with corresponding Action classes and these Action classes in return work on database to add data through standard implementation based on different design patterns. AJAX and Struts functionality, though integrated together, is partitioned separately. The server side functionality is accessed through different URLs and corresponding server side components are different Servlets and POJOs. Specific AJAX function and AJAX Servlet can act as reusable component set and can be integrated with JSF based implementation, too.
All rights reserved
Page 31 of 34
AJAX White paper
12 Where to learn more?
# 1 2 3 4 5
http://adaptivepath.com/
Web site
Description Information on AJAX and general Q/A Java blueprints on AJAX and JSF A video clip describing AJAX General description on AJAX J2EE and AJAX
http://bpcatalog.dev.java.net/nonav/ajax/index.html http://www.cmswatch.com/images/AjaxFinal.html http://en.wikipedia.org/wiki/AJAX http://java.sun.com/developer/technicalArticles/J2EE/AJAX/
All rights reserved
Page 32 of 34
AJAX White paper
13 Reference
# 1
Web site
http://www.macromedia.com/platform/whitepapers/idc_impact_of_rias.pdf
Description
Rich Internet Applications Paper by IDC 2003-2004 J2EE AJAX blueprints Atlas project information Adaptivepath website TIBCO General Interface Javalobby discussion TheServerside discussion Google suggest, Google Map websites and FAQ Ajaxian Blog discussion AJAX articles, presentations, discussions Blog at SourceLabs.com
2 3 4 5 6 7 8 9 10 11
https://bpcatalog.dev.java.net/nonav/ajax/index.html http://weblogs.asp.net/scottgu/archive/2005/06/28/416185.aspx http://www.adaptivepath.com/publications/essays/archives/000385.php http://www.tibco.com/software/business_optimization/generalinterface.jsp http://javalobby.com/java/forums/t21372.html http://www.theserverside.com/news/thread.tss?thread_id=33319 http://www.google.com/webhp?complete=1&hl=en http://maps.google.com/ http://www.ajaxian.com http://www.ajaxmatters.com/r/welcome
http://sourcelabs.com/ajb/archives/2005/05/ajax_mistakes.html
All rights reserved
Page 33 of 34
AJAX White paper
14 About JCOE
JCOE has been part of the Global Technology Office (GTO), since September 2004. JCOE develops 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 to rapidly build and deliver high quality Java-based solutions and providing a technology career path 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 design and development of Microcontroller based embedded systems to J2EE based enterprise applications. He has worked as consultant to few of the fortune 500 companies in California including 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 at Swarraj.kulkarni@cognizant.com (VNet: 22708)
All rights reserved
Page 34 of 34

Asynchronous Javascript and XML (Ajax) : White Paper by Java Coe

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Asynchronous Javascript and XML (Ajax) : White Paper by Java Coe

Uploaded by

Copyright:

Available Formats

AJAX White paper

Cognizant Technology Solutions

All rights reserved

AJAX White paper