Using Ajax In Domino Web Applications


Published on

Published in: Technology, Business
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Using Ajax In Domino Web Applications

  1. 1. Using AJAX in Domino Web Applications First Bank, Inc. Shyam Purshottam [email_address]
  2. 2. Topics Covered <ul><li>Traditional Web Applications </li></ul><ul><li>What is AJaX? </li></ul><ul><li>JavaScript Overview </li></ul><ul><li>XMLHttpRequest (XHR) </li></ul><ul><li>Pros and Cons </li></ul><ul><li>Browsers that support AJaX </li></ul><ul><li>Articles & Tutorial Links </li></ul><ul><li>Demo (AJaX and Domino) </li></ul><ul><li>Code Review </li></ul><ul><li>Solutions for using AJaX </li></ul><ul><li>Who is using? </li></ul><ul><li>Wrap up </li></ul>
  3. 3. Traditional Web Application <ul><li>In the traditional web application, the interaction between the customer and the server goes like this: </li></ul><ul><li>Customer accesses Web application </li></ul><ul><li>Server processes request and sends data to the browser while the customer waits </li></ul><ul><li>Customer clicks on a link or interacts with the application </li></ul><ul><li>Server processes request and sends data back to the browser while the customer waits </li></ul><ul><li>Etc….. </li></ul><ul><li>There is a lot of customer waiting </li></ul>
  4. 4. AJaX is here to change that <ul><li>AJaX eliminates the start-stop-start-stop nature of interaction </li></ul><ul><li>AJAX gets rid of the hourglass. </li></ul><ul><ul><li>Imagine what it's like to have your Web application act just a like a desktop application? </li></ul></ul>
  5. 5. What is AJaX? <ul><li>A name given to an existing approach to building dynamic web applications </li></ul><ul><li>AJaX or A synchronous J avaScript a nd X ML is a way of developing Web applications that combines: </li></ul><ul><ul><li>XHTML and CSS standards based presentation </li></ul></ul><ul><ul><li>Interaction with the page through the DOM </li></ul></ul><ul><ul><li>Data interchange with XML and XSLT </li></ul></ul><ul><ul><li>Asynchronous data retrieval with XMLHttpRequest </li></ul></ul><ul><ul><li>JavaScript to tie it all together </li></ul></ul>
  6. 6. What is AJaX (Cont’d) <ul><li>AJaX acts as an Intermediary </li></ul><ul><ul><li>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 </li></ul></ul><ul><ul><li>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. </li></ul></ul>
  7. 7. A Good Acronym? <ul><li>A is for “Asynchronous” </li></ul><ul><ul><li>requests can be made asynchronously or synchronously </li></ul></ul><ul><ul><li>both techniques allow web page to be updated without refreshing it </li></ul></ul><ul><ul><li>Anything useful the user can do while processing request? </li></ul></ul><ul><ul><ul><li>if yes then use asynchronous, otherwise use synchronous </li></ul></ul></ul><ul><li>J is for “JavaScript” </li></ul><ul><ul><li>typically JavaScript is used on the client-side(in the browser) </li></ul></ul><ul><ul><ul><li>only programming language supported out-of-the-box by most web browsers </li></ul></ul></ul><ul><ul><li>can use any language on server-side that can accept HTTP requests and return HTTP responses </li></ul></ul><ul><ul><ul><li>Domino Agents, Java servlets, CGI scripts, ..... </li></ul></ul></ul><ul><li>X is for “XML” </li></ul><ul><ul><li>requests and response messages can contain XML </li></ul></ul><ul><ul><li>can really contain any text(single text value, delimited text, …) </li></ul></ul>
  8. 8. Uses For AJaX <ul><li>Asynchronous </li></ul><ul><ul><li>examples </li></ul></ul><ul><ul><ul><li>Google Maps – </li></ul></ul></ul><ul><ul><ul><ul><li>asynchronously loads graphic tiles to support map scrolling </li></ul></ul></ul></ul><ul><ul><ul><li>Google Suggest – </li></ul></ul></ul><ul><ul><ul><ul><li>asynchronously updates list of possible topic matches based on what has been typed so far </li></ul></ul></ul></ul><ul><li>Synchronous </li></ul><ul><ul><li>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 </li></ul></ul><ul><ul><ul><li>better user experience </li></ul></ul></ul>
  9. 9. JavaScript Overview <ul><li>A programming language with syntax similar to Java </li></ul><ul><li>Supported by web browsers </li></ul><ul><ul><li>JavaScript can be downloaded from web servers along with HTML and executed in the browser </li></ul></ul><ul><li>Syntax to use from HTML </li></ul><ul><ul><li>add <script> tag(s) to head section of HTML </li></ul></ul><ul><ul><li>Can embed JavaScript code inside HTML or refer to external JavaScript files </li></ul></ul><ul><ul><li>embedding </li></ul></ul><ul><ul><ul><li><script type=“text/javascript”>… code …</script> </li></ul></ul></ul><ul><ul><li>Referring </li></ul></ul><ul><ul><ul><li><script type=“text/javascript” src=“ url ”></script> </li></ul></ul></ul>
  10. 10. XMLHttpRequest (XHR) <ul><li>A JavaScript class supported by most web browsers </li></ul><ul><li>Allows HTTP requests to be sent from JavaScript code </li></ul><ul><ul><li>to send multiple, concurrent requests, use a different XMLHttpRequest instance of each </li></ul></ul><ul><li>HTTP responses are processed by “handler” functions </li></ul><ul><ul><li>in client-side JavaScript </li></ul></ul><ul><li>Issue </li></ul><ul><ul><li>code to create an XMLHttpRequest object differs between browsers </li></ul></ul><ul><ul><li>can use a JavaScript library such as Sarissa to hide the differences </li></ul></ul>
  11. 11. XMLHttpRequest Properties (partial list) <ul><li>readyState </li></ul><ul><ul><li>0 = UNINITIALIZED; open not yet called </li></ul></ul><ul><ul><li>1 = LOADING; send for request not yet called </li></ul></ul><ul><ul><li>2 = LOADED; send called, headers and status are available </li></ul></ul><ul><ul><li>3 = INTERACTIVE; downloading response, only partially set </li></ul></ul><ul><ul><li>4 = COMPLETED; finished downloading response </li></ul></ul><ul><li>responseText </li></ul><ul><ul><li>response as text; null if error occurs or ready state<3 </li></ul></ul><ul><li>responseXML </li></ul><ul><ul><li>Response as DOM Document object; null if error occurs or ready state<3 </li></ul></ul><ul><li>Status </li></ul><ul><ul><li>integer status code </li></ul></ul><ul><li>statusText </li></ul><ul><ul><li>string status </li></ul></ul>
  12. 12. XMLHttpRequest Methods (partial list) <ul><li>Basic methods </li></ul><ul><ul><li>open (method, url[, async]) – initialize a new HTTP request </li></ul></ul><ul><ul><ul><li>method can be “GET”, “POST”, “PUT” or “DELETE” </li></ul></ul></ul><ul><ul><ul><li>url must be an HTTP URL (start with http:// ) </li></ul></ul></ul><ul><ul><ul><li>async is a boolean indicating whether request should be sent asynchronously </li></ul></ul></ul><ul><ul><ul><ul><li>default to true </li></ul></ul></ul></ul><ul><ul><li>send (body) – sends HTTP request </li></ul></ul><ul><ul><li>abort() – called after send() to cancel request </li></ul></ul><ul><li>Header methods </li></ul><ul><ul><li>void setRequestHeader(name, value) </li></ul></ul><ul><ul><li>String getResponseHeader(name) </li></ul></ul><ul><ul><li>String getAllResponseHeaders() </li></ul></ul>
  13. 13. Using XMLHttpRequest <ul><li>To create an XMLHttpRequest </li></ul><ul><ul><li>var xhreq = new XMLHttpRequest(); </li></ul></ul><ul><li>To send synchronous GET request and obtain response </li></ul><ul><ul><li>“GET”, url, false); // false for sync </li></ul></ul><ul><ul><li>xhreq.send(null); </li></ul></ul><ul><ul><li>var domDoc = xhreq.responseXML; </li></ul></ul><ul><ul><li>item1 = domDoc.getElementByTagName(“title”); // parse DOM tree </li></ul></ul><ul><li>To send asynchronous GET request </li></ul><ul><ul><li>“GET”, url, true) // true for async </li></ul></ul><ul><ul><li>xhreq.onreadystatechange=function(){ </li></ul></ul><ul><ul><li>if (xhreq.readyState == 4){ </li></ul></ul><ul><ul><li> var domDoc = xhreq.responseXML; </li></ul></ul><ul><ul><li> item1 = domDoc.getElementByTagName(“title”); // parse DOM tree </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>xhreq.send(null); </li></ul></ul>
  14. 14. Pros and Cons <ul><li>Pros </li></ul><ul><ul><li>Interactivity </li></ul></ul><ul><ul><ul><li>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. </li></ul></ul></ul><ul><ul><li>Portability sample </li></ul></ul><ul><ul><ul><li>Ajax applications target a (relatively) well-documented platform, implemented by all major browsers on most existing platforms. Ajax applications are effectively cross-platform. </li></ul></ul></ul><ul><ul><ul><li>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. </li></ul></ul></ul>
  15. 15. Pros and Cons (Cont’d) <ul><li>Cons </li></ul><ul><ul><li>Usability </li></ul></ul><ul><ul><ul><li>Back button </li></ul></ul></ul><ul><ul><ul><ul><li>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. </li></ul></ul></ul></ul><ul><ul><li>Response-time concerns </li></ul></ul><ul><ul><ul><li>Network latency </li></ul></ul></ul><ul><ul><ul><ul><li>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. </li></ul></ul></ul></ul><ul><ul><li>JavaScript must be enabled </li></ul></ul><ul><ul><ul><ul><li>While no browser plug-in is required for Ajax, it requires users to have JavaScript enabled in their browsers. </li></ul></ul></ul></ul>
  16. 16. Browsers that support AJaX <ul><li>Apple Safari 1.2 and above </li></ul><ul><li>Konqueror </li></ul><ul><li>Microsoft Internet Explorer (and derived browsers) 5.0 and above (Mac OS 9 or X version not supported) </li></ul><ul><li>Mozilla/Mozilla Firefox (and derived browsers) 1.0 and above </li></ul><ul><li>Netscape 7.1 and above </li></ul><ul><li>Opera 7.6 and above </li></ul><ul><li>Opera Mobile Browser 8.0 and above. </li></ul><ul><li>WebRenderer (Java browser component) </li></ul>
  17. 17. Articles and Tutorial links <ul><li>Articles </li></ul><ul><ul><li>Ajax: A New Approach to Web Applications, by Jesse James Garrett. The original article which coined the term </li></ul></ul><ul><ul><ul><li> </li></ul></ul></ul><ul><ul><li>State of Ajax: Program, Challenges, and Implications for SOAs </li></ul></ul><ul><ul><ul><li> </li></ul></ul></ul><ul><ul><li>Why Ajax Matters Now by Jesse James Garrett Ajax gives software a fresh look </li></ul></ul><ul><ul><ul><li> </li></ul></ul></ul><ul><li>Tutorials </li></ul><ul><ul><li>AJAX: Getting Started by Mozilla Developer Center. </li></ul></ul><ul><ul><ul><li> </li></ul></ul></ul><ul><ul><li>Dynamic HTML and XML: The XMLHTTPRequest Object by Apple </li></ul></ul><ul><ul><ul><li> </li></ul></ul></ul><ul><ul><li>IBM developerWorks Article by Philip McCarthy </li></ul></ul><ul><ul><ul><li> </li></ul></ul></ul><ul><ul><li>Mastering Ajax, Part 1: Introduction to Ajax IBM </li></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
  18. 18. Demo (AjaX & Domino) <ul><li>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. </li></ul><ul><li>Demo 1: Registration Form </li></ul><ul><ul><li>Real-time Form Validation </li></ul></ul><ul><ul><ul><li>Validates whether a unique id has been taken or not when creating an account </li></ul></ul></ul><ul><ul><ul><li>Performs a server-side validation of form data in an HTML page without refreshes </li></ul></ul></ul>
  19. 19. Code Review Demo 1: Registration Form
  20. 20. Demo (AJaX & Domino) Cont’d <ul><li>Demo 2: Branch Sales Form </li></ul><ul><ul><li>Auto-Complete (similar to @DBLookup) </li></ul></ul><ul><ul><ul><li>Provides a simplified means of data retrieval based on a key input </li></ul></ul></ul><ul><ul><ul><li>Performs a server-side lookup of branch id and returns a set of associated values </li></ul></ul></ul>
  21. 21. Code Review Demo 2: Branch Sales Form
  22. 22. Solutions for using AJaX & Domino <ul><li>List of some solutions for using AJaX when developing Web applications with Domino platform </li></ul><ul><ul><li>Real-time form data validation </li></ul></ul><ul><ul><ul><li>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. </li></ul></ul></ul><ul><ul><li>Auto-Complete </li></ul></ul><ul><ul><ul><li>@DbLookup (without refreshing the HTML page) </li></ul></ul></ul><ul><ul><ul><li>A specific portion of form data such as an email address, name, or city name may be auto-completed as the user types. </li></ul></ul></ul><ul><ul><li>Domino View Navigation </li></ul></ul><ul><ul><ul><ul><li>Bob Obringer is working on the “Ultimate Domino View Navigator” ( </li></ul></ul></ul></ul>
  23. 23. Solutions for using AJaX & Domino (Cont’d) <ul><ul><li>Sophisticated User Interface Controls </li></ul></ul><ul><ul><ul><li>Controls such as tree controls, menus, and progress bars may be provided that do not require page refreshes. </li></ul></ul></ul><ul><ul><li>Refreshing Data on the Page </li></ul></ul><ul><ul><ul><li>HTML pages may poll data from a server for up to date data such as scores, stock quotes, weather, or application specific data. </li></ul></ul></ul><ul><ul><li>Server-Side Notifications </li></ul></ul><ul><ul><ul><li>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 </li></ul></ul></ul><ul><ul><li>Smart Shopping carts </li></ul></ul><ul><ul><ul><li>add, remove or edit products instantly </li></ul></ul></ul>
  24. 24. Who is using? <ul><li>Google Maps </li></ul><ul><li>Google Suggest </li></ul><ul><li>Gmail </li></ul><ul><li>Flickr (Yahoo company) </li></ul><ul><li>Amazon’s (search engine) </li></ul><ul><li>Backpack </li></ul><ul><li> </li></ul>
  25. 25. Wrap-up <ul><li>Summary </li></ul><ul><ul><li>AJaX is not a new technology </li></ul></ul><ul><ul><ul><li>AJaX is instead a new way of looking at technology that is already mature and stable </li></ul></ul></ul><ul><ul><li>don’t have to refresh the browser page in order to display new data from the server </li></ul></ul><ul><ul><li>Get data asynchronously with XMLHttpRequest </li></ul></ul><ul><ul><li>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! </li></ul></ul>
  26. 26. Wrap-up (Cont’d) <ul><li>Any questions? </li></ul><ul><li>Thank you very much for attending! </li></ul>