Using AJAX in Domino Web Applications First Bank, Inc. Shyam

1
Using AJAX in Domino Web Applications

• First Bank, Inc.
• Shyam Purshottam
• spurshot_at_email.com

2
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

3
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

4
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?

5
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

6
What is AJaX (Contd)

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

7
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, )

8
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

9
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 ltscriptgt tag(s) to head section of HTML
• Can embed JavaScript code inside HTML or refer to
  external JavaScript files
• embedding
• ltscript typetext/javascriptgt code lt/scriptgt
• Referring
• ltscript typetext/javascript srcurlgtlt/scriptgt
  

10
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

11
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
  statelt3
• responseXML
• Response as DOM Document object null if error
  occurs or ready statelt3
• Status
• integer status code
• statusText
• string status

12
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()

13
Using XMLHttpRequest

• To create an XMLHttpRequest
• var xhreq new XMLHttpRequest()
• To send synchronous GET request and obtain
  response
• xhreq.open(GET, url, false) // false for
  sync
• xhreq.send(null)
• var domDoc xhreq.responseXML
• item1 domDoc.getElementByTagName(title) //
  parse DOM tree
• To send asynchronous GET request
• xhreq.open(GET, url, true) // true for async
• xhreq.onreadystatechangefunction()
• if (xhreq.readyState 4)
• var domDoc xhreq.responseXML
• item1 domDoc.getElementByTagName(title)
  // parse DOM tree
• xhreq.send(null)

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

15
Pros and Cons (Contd)

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

16
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)

17
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/ar
  chives/000385.php
• State of Ajax Program, Challenges, and
  Implications for SOAs
• http//hinchcliffe.org/archive/2005/08/18/1675.asp
  x
• 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/AJAXGetting_
  Started
• Dynamic HTML and XML The XMLHTTPRequest Object
  by Apple
• http//developer.apple.com/internet/webcontent/xml
  httpreq.html
• IBM developerWorks Article by Philip McCarthy
• http//www-128.ibm.com/developerworks/library/j-aj
  ax1/
• Mastering Ajax, Part 1 Introduction to Ajax IBM
• http//www.asp.net/default/aspx?tabindex7tabid4
  7

18
Demo (AjaX Domino)

• The powerful tools for processing XML that are
  built into todays 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

19
Code Review

• Demo 1 Registration Form

20
Demo (AJaX Domino) Contd

• Demo 2 Branch Sales Form
• Auto-Complete (similar to _at_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

21
Code Review

• Demo 2 Branch Sales Form

22
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
• _at_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/bl
  og.nsf/dx/04272005071321PMBOBV8U.htm?opendocument)
  

23
Solutions for using AJaX Domino (Contd)

• 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

24
Who is using?

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

25
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
• dont have to refresh the browser page in order
  to display new data from the server
• Get data asynchronously with XMLHttpRequest
• If youre designing Web applications right now,
  why arent you using AJaX?. Your customers will
  thank you, and frankly, its just fun!

26
Wrap-up (Contd)

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