Ajax Fundamentals Web Applications
Upcoming SlideShare
Loading in...5
×
 

Ajax Fundamentals Web Applications

on

  • 3,693 views

 

Statistics

Views

Total Views
3,693
Views on SlideShare
3,689
Embed Views
4

Actions

Likes
0
Downloads
73
Comments
0

1 Embed 4

http://www.slideshare.net 4

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Ajax Fundamentals Web Applications Ajax Fundamentals Web Applications Presentation Transcript

  • AJAX Fundamentals for Web Applications Scott Good, President Teamwork Solutions
  • Scott Good
    • President, Teamwork Solutions
      • Cincinnati, Columbus
      • 2-time Beacon Award Finalists
    • Notes Developer/Designer, 13 years
    • Extensive workflow experience
      • ProcessIt!
        • 2006 Advisor Editor’s Choice Gold Award
      • ApproveIt!
    • Have written more than 40 Lotus Advisor articles
      • CSS
      • LotusScript
      • JavaScript
      • AJAX (starting May ’06 issue)
      • Web development
  • Teamwork Solutions…
    • Custom application development
    • Offers a range of Notes- and web-based application development tools
      • ProcessIt! Workflow
      • ProcessIt! Document Library
      • Etc.
    • Consulting
      • Notes, Domino and related technologies
      • Helping set application development standards
      • Conversions from Notes to web
      • Etc.
  • Agenda
    • What is AJAX (and why should you care)?
    • How can it be used in Domino apps?
    • How to make an AJAX request
    • Dealing with the XML you get back
    • Putting it into an application
    • Questions & answers
  • What is AJAX?
    • A synchronous J avaScript A nd X ML
    • VERY hot right now but not new
    • A combination of technologies
    • Able to work independently of the UI
      • (Asynchronous)
    • Uses XML as a data format
  • Why should you care?
    • Can make web applications much…
      • Faster
      • More intuitive
      • Easier to use
    • Breaks through a lot of traditional limitations of web applications
      • Creates a sometimes-link with the server without requiring the UI to refresh
    • Demo Google Maps
  • How can it be used in Domino apps?
    • Lets you dynamically retrieve data from the server while the user does something else
    • Possible uses:
      • Check budget availability
      • Validate part numbers
      • Get sub-category lists from top-category choice
      • Look up names from NAB as characters are typed
    • The list is limited mostly by your imagination
    • NOTE: Older browsers cannot do this (IE prior to 5.5 or so, etc)
  • How to make an AJAX request
    • The basic object, which makes the request, varies depending on browser
    • MS Internet Explorer
      • Uses XMLHTTP ActiveX object
      • ajaxReq = new ActiveXObject(“Microsoft.XMLHTTP”);
    • Firefox, etc.
      • Use an internal XMLHttpRequest object
      • ajaxReq = new XMLHttpRequest();
    • Unless you can be absolutely sure of the browser, you must build for both
    • Determine which by checking for window.ActiveXObject
  • Building an AJAX request
    • var ajaxReq;
    • function createAJAXRequest() {
    • if (window.ActiveXObject) {
    • // Internet Explorer
    • ajaxReq = new ActiveXObject(“Microsoft.XMLHTTP”);
    • } else if (window.XMLHttpRequest) {
    • // Firefox, Mozilla, etc.
    • ajaxReq = new XMLHttpRequest();
    • }
    • }
  • Building an AJAX request
    • All that does is create a handle to “ajaxReq”
      • Can make requests
      • Can receive back XML
    • No request has been made yet
    • Still need to tell it where to make the request and how
  • Building an AJAX request
    • var ajaxReq;
    • function createAJAXRequest( fromURL , respFunction) {
    • if (window.ActiveXObject) {
    • // Internet Explorer
    • ajaxReq = new ActiveXObject(“Microsoft.XMLHTTP”);
    • } else if (window.XMLHttpRequest) {
    • // Firefox, Mozilla, etc.
    • ajaxReq = new XMLHttpRequest();
    • }
    • ajaxReq.open(“GET”, fromURL);
    • ajaxReq.onreadystatechange = eval(respFunction);
    • ajaxReq.send(null);
    • }
  • ajaxReq.open
    • Two required parameters:
      • The method (GET, POST or PUT)
      • The URL you’re retrieving from
    • Has additional optional parameters
      • e.g., you can disable asynchronous response
      • You don’t need these for now
    • For now, you’ll always be doing GETs
    • ajaxReq.open(“GET”, fromURL)
  • Building an AJAX request
    • var ajaxReq;
    • function createAJAXRequest(fromURL, respFunction ) {
    • if (window.ActiveXObject) {
    • // Internet Explorer
    • ajaxReq = new ActiveXObject(“Microsoft.XMLHTTP”);
    • } else if (window.XMLHttpRequest) {
    • // Firefox, Mozilla, etc.
    • ajaxReq = new XMLHttpRequest();
    • }
    • ajaxReq.open(“GET”, fromURL);
    • ajaxReq.onreadystatechange = eval(respFunction);
    • ajaxReq.send(null);
    • }
  • ajaxReq.onreadystatechange
    • XMLHttp object, whichever kind, works on its own in the background
      • Makes a request for something
      • Waits for a response
      • Gets a response, does something with it
    • The time spent waiting is “ready state”
    • onreadystatechange property is how you tell it what to do when it gets a response
    • ajaxReq.onreadystatechange = eval(respFunction);
  • Building an AJAX request
    • var ajaxReq;
    • function createAJAXRequest(fromURL, respFunction) {
    • if (window.ActiveXObject) {
    • // Internet Explorer
    • ajaxReq = new ActiveXObject(“Microsoft.XMLHTTP”);
    • } else if (window.XMLHttpRequest) {
    • // Firefox, Mozilla, etc.
    • ajaxReq = new XMLHttpRequest();
    • }
    • ajaxReq.open(“GET”, fromURL);
    • ajaxReq.onreadystatechange = eval(respFunction);
    • ajaxReq.send(null);
    • }
  • ajaxReq.send
    • Actually makes the request
    • Has an optional parameter which can be used to send information or an object to the target of the request
    • ajaxReq.send(null);
  • Demo
    • Make a simple AJAX request from the NAB
    • Need a simple function to run:
    • function processReturnValue(){
    • alert(ajaxReq.responseText);
    • }
  • Ready state values
    • 0 = uninitialized
    • 1 = loading
    • 2 = loaded
    • 3 = interactive
    • 4 = complete
    • All you really care about is ready state 4
    • function processReturnValue(){
    • if (ajaxReq.readyState == 4) {
    • alert(ajaxReq.responseText);
    • }
    • }
  • Also care about HTTP status
    • HTTP status values:
      • 404 = Not found
      • 500 = Internal error
      • 100 = Continue
      • 200 = Complete (what you want)
    • function processReturnValue(){
    • if (ajaxReq.readyState == 4) {
    • if (ajaxReq.status == 200) {
    • alert(ajaxReq.responseText);
    • }
    • }
    • }
  • Demo2
    • 1. Corrected code, put result into the form using innerHTML
    • 2. Do it from a field
    • 3. Add &startkey= parameter to get names based on characters entered
  • Dealing with the XML you get back
    • The bad news: You need to learn XML
    • The good news: It isn’t rocket science (probably)
  • ?readviewentries
    • Look at ($VIMPeopleAndGroups) XML:
    • Nodes:
      • <viewentries> is the view
      • <viewentry> is a row
      • <entrydata> is a column
      • <text> is a value in the column
    • Attributes:
      • toplevelentries
      • position
      • unid
      • noteid
      • siblings
      • columnnumber
      • name
  • Navigating this mess with JS
    • ajaxReq.responseXML will return an XML object
      • (ajaxReq.responseText was just text)
    • Objects can be manipulated with JavaScript
    • Using code, you can climb up and down the XML DOM (Document Object Model--its hierarchy) to get what you need
  • XML DOM Properties
    • childNodes (array)
    • firstChild
    • lastChild
    • nextSibling
    • nodeValue
    • parentNode
    • previousSibling
  • XML DOM Methods
    • getElementById(id)
    • getElementsByTagName(name)
    • hasChildNodes()
    • getAttribute(name)
  • Using the DOM Properties/Methods
    • You use the Properties and methods to work your way through the hierarchy of the XML to get to what you want…
    • var xmlData = ajaxReq.responseXML;
    • var vRows = xmlData.getElementsByTagName(&quot;viewentry&quot;);
    • for (var i = 0; i < vRows.length; i++){
    • alert(vRows[i].getAttribute(“position”));
    • }
    • Demo this
  • Using the DOM Properties/Methods
    • To go from 1 st row to its first column:
    • var firstColumn = vRows[i].firstChild;
    • From first column to the 2 nd column:
    • var secondColumn = firstColumn.nextSibling;
    • If you know the hierarchy, you can just climb down the tree to the actual values <text>…
    • colsVals[1].firstChild.firstSibling.firstChild.nodeValue;
    • … almost
      • IE and Firefox treat the XML as having different numbers of levels
  • Solving the problem
    • You must have code which can traverse however many levels there are and return the value
    • Your best bet: A recursive function
      • Hint: <text> nodes are always at the bottom of the hierarchy
    • Demo
  • What you have
    • At this point, all you have are data elements you can surround with HTML
    • But, what more do you need?
    • With HTML you have…
      • JavaScript
      • DHTML
      • CSS
      • And so on
    • You have retrieved data from another place, asynchronously, and made it available to whatever you’re doing
  • Carrying it a bit further
    • Without a lot of additional work, this could become any number of things:
      • Entry validation
      • NAB picker (demo)
      • Type-ahead (demo)
      • Or something else
    • It’s powerful technology and not all that hard to do
  • Questions?
    • Scott Good
    • Teamwork Solutions
    • 614.457.7100 extension 200
    • [email_address]
    • www.scottgood.com (blog)
    • www.notesworkflow.com
    • Please turn in your evaluations!