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

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

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

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

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 200sgood@teamsol.com

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

Please turn in your evaluations!

Ajax Fundamentals Web Applications

Technology

Doloto: Code Splitting for AJAX Applications

Rich Internet Applications 6. Ajax functionality

Testing Ajax Applications when to test, what to test, how to test Ajax applications Square One University Series

AJAX - Building Applications

Architecture in Ajax Applications

Ajax:From Desktop Applications towards Ajax Web Applications

Testing Ajax Web Applications

Designing Powerful Web Applications with AJAX & Other Rich Internet Applications

AJAX: Rich Internet Applications · 2021. 7. 6. · Rich Internet Applications AJAX AJAX example Conclusion More AJAX Search engine APIs Rich Internet Applications I A combination

9. jQuery - Fundamentals, DOM, Events, AJAX, UI

Ajax Applications

Building rich web applications with ASP.NET AJAX · Microsoft AJAX Library ASP.NET 2.0 AJAX Extensions ASP.NET AJAX Control Toolkit Current Version ASP.NET AJAX 1.0 Beta 2 Roadmap

Rich Web Applications With Ajax

Build Ajax Applications With Extjs

Testing AJAX Applications with Seleniumajaxexperience.techtarget.com/...Patrick_TestingAjax_Selenium.pdf · Testing AJAX Applications with Selenium Patrick Lightbody Gomez, Inc. Agenda

Recovering the Behaviour of AJAX Applications

PerformanceTuning Ajax Applications

Ajax Push For Revolutionary Enterprise Applications

AJAX and PHP: Building Responsive Web Applications

Ajax Applications : A Blueprint for Disaster