Ajax Fundamentals Web Applications
-
Upload
dominion -
Category
Technology
-
view
2.232 -
download
0
description
Transcript of Ajax Fundamentals Web Applications
Advisor.comAdvisor.com
AJAX Fundamentals for Web Applications
Scott Good, PresidentTeamwork Solutions
Advisor.comAdvisor.com
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
Advisor.comAdvisor.com
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.
Advisor.comAdvisor.com
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
Advisor.comAdvisor.com
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
Advisor.comAdvisor.com
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
Advisor.comAdvisor.com
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)
Advisor.comAdvisor.com
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
Advisor.comAdvisor.com
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();
}}
Advisor.comAdvisor.com
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
Advisor.comAdvisor.com
Building an AJAX request
var ajaxReq;
function createAJAXRequest(fromURL, respFunction) {if (window.ActiveXObject) {
// Internet ExplorerajaxReq = 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);
}
Advisor.comAdvisor.com
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)
Advisor.comAdvisor.com
Building an AJAX request
var ajaxReq;
function createAJAXRequest(fromURL, respFunction) {if (window.ActiveXObject) {
// Internet ExplorerajaxReq = 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);
}
Advisor.comAdvisor.com
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);
Advisor.comAdvisor.com
Building an AJAX request
var ajaxReq;
function createAJAXRequest(fromURL, respFunction) {if (window.ActiveXObject) {
// Internet ExplorerajaxReq = 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);
}
Advisor.comAdvisor.com
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);
Advisor.comAdvisor.com
Demo
Make a simple AJAX request from the NAB Need a simple function to run:
function processReturnValue(){alert(ajaxReq.responseText);
}
Advisor.comAdvisor.com
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);}
}
Advisor.comAdvisor.com
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);
}}
}
Advisor.comAdvisor.com
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
Advisor.comAdvisor.com
Dealing with the XML you get back
The bad news: You need to learn XML The good news: It isn’t rocket science (probably)
Advisor.comAdvisor.com
?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
Advisor.comAdvisor.com
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
Advisor.comAdvisor.com
XML DOM Properties
childNodes (array) firstChild lastChild nextSibling nodeValue parentNode previousSibling
Advisor.comAdvisor.com
XML DOM Methods
getElementById(id) getElementsByTagName(name) hasChildNodes() getAttribute(name)
Advisor.comAdvisor.com
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
Advisor.comAdvisor.com
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
Advisor.comAdvisor.com
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
Advisor.comAdvisor.com
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
Advisor.comAdvisor.com
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
Advisor.comAdvisor.com
Questions?
Scott GoodTeamwork Solutions
614.457.7100 extension [email protected]
www.scottgood.com (blog)www.notesworkflow.com
Please turn in your evaluations!