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

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.

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

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

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)

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

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(); } }

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

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); }

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)

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); }

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

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); }

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

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); }

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); } }

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); } } }

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

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)

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

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

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

childNodes (array)

firstChild

lastChild

nextSibling

nodeValue

parentNode

previousSibling

XML DOM Methods getElementById(id) getElementsByTagName(name) hasChildNodes() getAttribute(name)

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

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

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

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

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

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!

Scott Good

Teamwork Solutions

614.457.7100 extension 200

[email_address]

www.scottgood.com (blog)

www.notesworkflow.com

Please turn in your evaluations!