Using AJAX in Domino Web Applications

First Bank, Inc.

Shyam Purshottam

spurshot@email.com

Topics Covered

• Traditional Web Applications

• What is AJaX?

• JavaScript Overview

• XMLHttpRequest (XHR)

• Pros and Cons

• Browsers that support AJaX

• Articles & Tutorial Links

• Demo (AJaX and Domino)

• Code Review

• Solutions for using AJaX

• Who is using?

• Wrap up

Traditional Web Application

In the traditional web application, the interaction between the customer and the server goes like this:

• Customer accesses Web application• Server processes request and sends data to the browser while the

customer waits• Customer clicks on a link or interacts with the application• Server processes request and sends data back to the browser while

the customer waits• Etc…..

There is a lot of customer waiting

AJaX is here to change that

• AJaX eliminates the start-stop-start-stop nature of interaction• AJAX gets rid of the hourglass.

– Imagine what it's like to have your Web application act just a like a desktop application?

What is AJaX?

• A name given to an existing approach to building dynamic web applications

• AJaX or Asynchronous JavaScript and XML is a way of developing Web applications that combines:– XHTML and CSS standards based presentation

– Interaction with the page through the DOM

– Data interchange with XML and XSLT

– Asynchronous data retrieval with XMLHttpRequest

– JavaScript to tie it all together

What is AJaX (Cont’d)

• AJaX acts as an Intermediary– The AJaX engine works within the Web browser(through JavaScript and

the DOM) to render the Web application and handle requests that the customer might have of the Web Server

– The beauty of it is that because the AJaX engine is handling the requests, it can hold most information in the engine itself, while allowing the interaction with the application and the customer to happen asynchronously and independently of any interaction with the server.

A Good Acronym?• A is for “Asynchronous”

– requests can be made asynchronously or synchronously

– both techniques allow web page to be updated without refreshing it

– Anything useful the user can do while processing request?• if yes then use asynchronous, otherwise use synchronous

• J is for “JavaScript”– typically JavaScript is used on the client-side(in the browser)

• only programming language supported out-of-the-box by most web browsers

– can use any language on server-side that can accept HTTP requests and return HTTP responses

• Domino Agents, Java servlets, CGI scripts, .....

• X is for “XML”– requests and response messages can contain XML

– can really contain any text(single text value, delimited text, …)

Uses For AJaX

• Asynchronous– examples

• Google Maps – http://maps.google.com– asynchronously loads graphic tiles to support map scrolling

• Google Suggest – http://www.google.com/suggest– asynchronously updates list of possible topic matches based on what

has been typed so far

• Synchronous– even when there is nothing useful for the user to do after a request is

submitted to a server, AJaX can be used to retrieve data and update selected parts of the page without refreshing the entire page

• better user experience

JavaScript Overview

• A programming language with syntax similar to Java• Supported by web browsers

– JavaScript can be downloaded from web servers along with HTML and executed in the browser

• Syntax to use from HTML– add <script> tag(s) to head section of HTML

– Can embed JavaScript code inside HTML or refer to external JavaScript files

– embedding• <script type=“text/javascript”>… code …</script>

– Referring• <script type=“text/javascript” src=“url”></script>

XMLHttpRequest (XHR)

• A JavaScript class supported by most web browsers• Allows HTTP requests to be sent from JavaScript code

– to send multiple, concurrent requests, use a different XMLHttpRequest instance of each

• HTTP responses are processed by “handler” functions– in client-side JavaScript

• Issue– code to create an XMLHttpRequest object differs between browsers

– can use a JavaScript library such as Sarissa to hide the differences

XMLHttpRequest Properties(partial list)

• readyState– 0 = UNINITIALIZED; open not yet called– 1 = LOADING; send for request not yet called– 2 = LOADED; send called, headers and status are available– 3 = INTERACTIVE; downloading response, only partially set– 4 = COMPLETED; finished downloading response

• responseText– response as text; null if error occurs or ready state<3

• responseXML– Response as DOM Document object; null if error occurs or ready state<3

• Status– integer status code

• statusText– string status

XMLHttpRequest Methods (partial list)

• Basic methods– open (method, url[, async]) – initialize a new HTTP request

• method can be “GET”, “POST”, “PUT” or “DELETE”• url must be an HTTP URL (start with http://)• async is a boolean indicating whether request should be sent

asynchronously– default to true

– send (body) – sends HTTP request

– abort() – called after send() to cancel request

• Header methods– void setRequestHeader(name, value)

– String getResponseHeader(name)

– String getAllResponseHeaders()

Using XMLHttpRequest• To create an XMLHttpRequest

var xhreq = new XMLHttpRequest();

• To send synchronous GET request and obtain responsexhreq.open(“GET”, url, false); // false for syncxhreq.send(null); var domDoc = xhreq.responseXML;item1 = domDoc.getElementByTagName(“title”); // parse DOM tree

• To send asynchronous GET requestxhreq.open(“GET”, url, true) // true for asyncxhreq.onreadystatechange=function(){

if (xhreq.readyState == 4){ var domDoc = xhreq.responseXML; item1 = domDoc.getElementByTagName(“title”); // parse DOM tree}

}xhreq.send(null);

Pros and Cons

• Pros– Interactivity

• Due to the fact that Ajax applications are mostly executed on the user's computer, they can perform a number of tasks without their performance being limited by the network. This permits the development of interactive applications, in particular reactive and rich graphic user interfaces.

– Portability sample• Ajax applications target a (relatively) well-documented platform,

implemented by all major browsers on most existing platforms. Ajax applications are effectively cross-platform.

• While the Ajax platform is more restricted than the Java platform, current Ajax applications effectively fill part of the one-time niche of Java applets: extending the browser with portable, lightweight mini-applications.

Pros and Cons (Cont’d)• Cons

– Usability• Back button

– 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.

– Response-time concerns• Network latency

– The interval between user request and server response — needs to be considered carefully during Ajax development. Without clear feedback to the user, the users might experience delay in the interface of the web application.

– JavaScript must be enabled– While no browser plug-in is required for Ajax, it requires users to have

JavaScript enabled in their browsers.

Browsers that support AJaX• Apple Safari 1.2 and above

• Konqueror

• Microsoft Internet Explorer (and derived browsers) 5.0 and above (Mac OS 9 or X version not supported)

• Mozilla/Mozilla Firefox (and derived browsers) 1.0 and above

• Netscape 7.1 and above

• Opera 7.6 and above

• Opera Mobile Browser 8.0 and above.

• WebRenderer (Java browser component)

Articles and Tutorial links• Articles

– Ajax: A New Approach to Web Applications, by Jesse James Garrett. The original article which coined the term

• http://www.adaptivepath.com/publications/essays/archives/000385.php– State of Ajax: Program, Challenges, and Implications for SOAs

• http://hinchcliffe.org/archive/2005/08/18/1675.aspx– Why Ajax Matters Now by Jesse James Garrett Ajax gives software a fresh look

• http://www.ok-cancel.com/archives/article/2005/09/why-ajax-matters-now.html

• Tutorials– AJAX: Getting Started by Mozilla Developer Center.

• http://developer.mozilla.org/en/docs/AJAX:Getting_Started– Dynamic HTML and XML: The XMLHTTPRequest Object by Apple

• http://developer.apple.com/internet/webcontent/xmlhttpreq.html– IBM developerWorks Article by Philip McCarthy

• http://www-128.ibm.com/developerworks/library/j-ajax1/– Mastering Ajax, Part 1: Introduction to Ajax IBM

• http://www.asp.net/default/aspx?tabindex=7&tabid=47

Demo (AjaX & Domino)

• The powerful tools for processing XML that are built into today’s browsers, along with XML generation capabilities that are built into the Domino server, make a great combination.

• Demo 1: Registration Form– Real-time Form Validation

• Validates whether a unique id has been taken or not when creating an account

• Performs a server-side validation of form data in an HTML page without refreshes

Code Review

Demo 1: Registration Form

Demo (AJaX & Domino) Cont’d

• Demo 2: Branch Sales Form– Auto-Complete (similar to @DBLookup)

• Provides a simplified means of data retrieval based on a key input• Performs a server-side lookup of branch id and returns a set of associated

values

Code Review

Demo 2: Branch Sales Form

Solutions for using AJaX & Domino• List of some solutions for using AJaX when developing Web

applications with Domino platform

– Real-time form data validation• such as user ids, serial numbers, postal codes, or even special coupon

codes form data that require server-side validation can be validated in a form before the user submits a form.

– Auto-Complete• @DbLookup (without refreshing the HTML page)• A specific portion of form data such as an email address, name, or city name

may be auto-completed as the user types.

– Domino View Navigation– Bob Obringer is working on the “Ultimate Domino View Navigator”

(http://bob-obringer.com/A557B7/blog.nsf/dx/04272005071321PMBOBV8U.htm?opendocument)

Solutions for using AJaX & Domino (Cont’d)

– Sophisticated User Interface Controls• Controls such as tree controls, menus, and progress bars may be provided

that do not require page refreshes.

– Refreshing Data on the Page• HTML pages may poll data from a server for up to date data such as scores,

stock quotes, weather, or application specific data.

– Server-Side Notifications• An HTML page may simulate a server-side push by polling the server for

event notifications which may notify the client with a message, refresh page data, or redirect the client to another page

– Smart Shopping carts• add, remove or edit products instantly

Who is using?

• Google Maps• Google Suggest• Gmail• Flickr (Yahoo company)• Amazon’s A9.com (search engine)• Backpack• Chicagocrime.org

Wrap-up

• Summary– AJaX is not a new technology

• AJaX is instead a new way of looking at technology that is already mature and stable

– don’t have to refresh the browser page in order to display new data from the server

– Get data asynchronously with XMLHttpRequest

If you’re designing Web applications right now, why aren’t you using AJaX?. Your customers will thank you, and frankly, it’s just fun!

Wrap-up (Cont’d)

• Any questions?• Thank you very much for attending!