ajax fundamentals web applications

Advisor.comAdvisor.com

AJAX Fundamentals for Web Applications

Scott Good, PresidentTeamwork 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?

Asynchronous JavaScript And XML 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 objectajaxReq = 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 ExplorerajaxReq = new

ActiveXObject(“Microsoft.XMLHTTP”);} else if (window.XMLHttpRequest) {

// Firefox, Mozilla, etc.ajaxReq = new XMLHttpRequest();

}}



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



var ajaxReq;

function createAJAXRequest(fromURL, respFunction) {if (window.ActiveXObject) {




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



var ajaxReq;






}


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



var ajaxReq;






}


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("viewentry");for (var i = 0; i < vRows.length; i++){

alert(vRows[i].getAttribute(“position”));}

Demo this


Using the DOM Properties/Methods

To go from 1st row to its first column:var firstColumn = vRows[i].firstChild;

From first column to the 2nd 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 GoodTeamwork Solutions

614.457.7100 extension [email protected]

www.scottgood.com (blog)www.notesworkflow.com

Please turn in your evaluations!

ajax fundamentals web applications

Technology

request ajaxreq

fromurl ajaxreq

evalrespfunction ajaxreq

response ajaxreq

internet explorer ajaxreq

xmlhttp activex object

new xmlhttprequest

simple ajax request