Trees, the DOM and AJAX

1
Trees, the DOM and AJAX
2
Example Tree
3
Formal Definition (from Googles definetree)

• In graph theory, a directed acyclic graph (DAG)
  in which the root node has no parent and every
  other node has exactly one parent.www.mindspring.
  com/scarlson/tc/glossary.htm
• In computer science, a tree is a widely-used
  computer data structure that emulates a tree
  structure with a set of linked nodes. Each node
  has zero or more child nodes, which are below it
  in the tree.A node that has a child is called the
  child's parent node. A child has at most one
  parent a node without a parent is called the
  root node (or root). Nodes with no children are
  called leaf nodes. en.wikipedia.org/wiki/Tree_(co
  mputing)

4
Uses of Trees

• Paragraph Numbering in a Document
• Family (aSexual reproduction!)
• File system e.g. Unix, Dos
• Classification e.g. Linnaeus, Dewey
• Hierarchical Database e.g. IBMs MIS, LDAP
• Web site structure
• Hierarchical Menu
• Organisational Hierarchy
• Class Hierarchy in Java
• Assembly / Part hierarchy
• Document Object Model
• XML
• B-tree for efficient indexing

5
Tree Terminology
Current Node F B
Root A  
Leaf D, E, G, J, K, L  
Non-leaf A, B, C, F, H  
Natural Order A, B, D, E, C, F, G, H, J , K, L  
Subtree F, G, H, J, K, L  
Level 2  
6
Legal Numberingin a document
In natural order with A as root   1          B 1.1       D 1.2        E 2.          C 2.1        F 2.1.1     G 2.1.2     H 2.1.2.1  J 2.1.2.2  K 2.1.2.3  L
7
Family Terminology
CurrentNode F B
Parent (at most 1) C  
Children G, H  
Siblings (none)  
Descendents G, H, J, K, L  
Ancestors C, A  
Node and Descendents F, G, H, J, K, L  
8
File system

• File system in Unix or Windows
• C\Program Files\eXist\webapp\admin\admin.xql
• Actually this is a Forest of trees, each drive
  a separate Tree
• Shortcuts (symbolic links in UNIX) cut across
  this tree structure

9
Folder Hierarchy
10
Navigation in File System
Relative to F B
Root /  
Current directory (context) .  
First Child G (or ./G)  
Parent ..  
Sibling (none)  
A Cousin ../../B/E  
Absolute Path /A/C/F  
Leaf name File  
Node name Directory or Folder  
11
Type (A Kind of) Hierarchyrelative to F
Relative to F B
supertype C  
subtype G, H  
G and H would inherit all the attributes and
methods of F and define additional attributes and
methods of their own.  A type hierarchy allows
sharing of definitions. see Normalisation Easi
ly confused with an Object Hierarchy or
Whole/Part hierarchy.
12
Object Hierarchy

• An object hierarchy supports one or more of a
  number of kinds of relationship.
• Containment 
• One object is contained within, is a part of, 
  a parent object.  A containment relationship is
  used to move, copy or delete a whole subtree.
• Scoping 
• Names of objects must be unique within some
  scope. Often these scopes are hierarchical.  The
  name of a child is unique within the scope of the
  parent. 
• Delegation 
• A child object delegates responsibility for a
  property to its parent, and so on up the
  hierarchy until an object defines the property. 
• Aggregation 
• A parent object has properties determined by the
  properties of its children.  For example, the
  value of the cost in a non-leaf would be
  defined as the sum of cost values over all
  children, with actual cost values defined at the
  leaves. Min, max, average are other aggregate
  relationships.
• Distribution 
• A parent property is distributed over the
  children for example a budget value defined in
  the parent is distributed over the children.

13
HTML Document (Object Tree)
lthtmlgt ltheadgt lttitlegtSample
Documentlt/titlegt lt/headgt ltbodygt
lth1gtAn HTML Documentlt/h1gt ltpgtThis is
a ltigtsimplelt/igt document. lt/pgt lt/bodygt
lt/htmlgt
From Flanagan,D. (2002) JavaScript The Definitive
Guide , OReilly on-line
14
Document Object Model Class Tree
From Flanagan,D. (2002) JavaScript The Definitive
Guide , OReilly on-line
15
The DOM
conceptual
Object Model Classes Element, Text Methods
getElementsByTagName()
W3C DOM level 1
binding
logical
ECMAScript (Javascript)
Java
PHP
physical
Gecko (Firefox)
Trident (IE6)
Layout Engines
Presto (Opera)
16
  XPATH DOM
Declarative Procedural (navigational)
Root /  document
Context Node Current Directory (self) .
Local Name n
Child 1 last() n.childNodes n.firstChild n.lastChild
Parent .. f.parentNode
Sibling ../g ../ f.nextSibling f.previousSibling
Attribute f/_at_att f.getAttribute(att) 
Locate node by ID //_at_id'f1' document.getElementById('f1') 
Locate nodes by Tag //img document.getElementsByTagName('img')
Number of nodes in sequence s.length s.length
Select by predicate _at_size 10 and . 'fred'
17
AJAX ZIP decode

• Zip decode (in Firefox)
• Backend matches partial zipcode to a database and
  returns the data as XML
• Script uses AJAX to update the page dynamically
  without a full refresh
• As digits are entered, code in Javascript makes a
  request to the server for the list of matches
• The matches are used to update the DOM

18
var url "getZip.php?zipcode" // The
server-side script var http getHTTPObject() //
create the HTTP Object var isWorking false
ltinput type"text" size"5" name"zip" id"zip"
onkeyup"getList()" onfocus"getList()"
/gt function getList() if (!isWorking
http) var zipcode document.getElementById(
"zip").value http.open("GET", url
escape(zipcode), true) http.onreadystatechang
e updateList / this sets the
call-back function to be invoked when
a response from the HTTP request is returned
/ isWorking true http.send(null)
function updateList() if (http.readyState
4) // Use the XML DOM to unpack the
zip, city and state values var xmlDocument
http.responseXML .
Create HTTPConnection
On event keyup, call getList()
Get the value in the input field
Open HTTP connection, calling server script
Call this function when reply
If completed
Get the XML document returned
19
Sample returned XML
lt?xml version"1.0" standalone"yes"?gt ltresultgt
ltzipgt ltzipcodegt95472lt/zipcodegt
ltcitygtSebastopollt/citygt ltstategtCAlt/stategt
lt/zipgt ltzipgt ltzipcodegt95473lt/zipcodegt
ltcitygtSebastopollt/citygt ltstategtCAlt/stategt
lt/zipgt ltzipgt ltzipcodegt95476lt/zipcodegt
ltcitygtSonomalt/citygt ltstategtCAlt/stategt
lt/zipgt lt/resultgt
20
document
tag
result
element
zip
zip
zipcode
city
state
zipcode
city
state
text
95472
Sebastopol
95473
Sebastopol
CA
CA
21
DOM access in JavaScript
function updateList() if (http.readyState
4) // Use the XML DOM to unpack the zip,
city and state values var xmlDocument
http.responseXML list
document.createElement('div') // to hold the
tree of results for (i in
xmlDocument.firstChild.childNodes) var
el xmlDocument.firstChild.childNodesi
if (el.nodeName'zip') // just the zip
tags var zipcode el.childNodes0.fi
rstChild.data var city
el.childNodes1.firstChild.data var
state el.childNodes2.firstChild.data
var x document.createElement('div')
var t document.createTextNode(zipcode '
' city ', ' state)
x.appendChild(t) list.appendChild(x)
var list
document.getElementById('list')
divlist.removeChild(divlist.firstChild)
divlist.appendChild(list) isWorking
false
22
Access to nodes
XMLDocument
firstChild
childNodes1
result
zip
zip
childNodes0
firstChild
zipcode
city
state
zipcode
city
state
data
95472
Sebastopol
95473
Sebastopol
CA
CA
XMLDocument
.firstChild
.childNodes1
.childNodes0
.firstChild
.data
23
HTML Document (skeleton)
(document)
html
body
head
idlist
h1
div
form
document.getElementById(list)
24
function updateList() if (http.readyState
4) // Use the XML DOM to unpack the zip,
city and state values var xmlDocument
http.responseXML list
document.createElement('div') // to hold the
tree of results for (i in
xmlDocument.firstChild.childNodes) var
el xmlDocument.firstChild.childNodesi
if (el.nodeName'zip') // just the zip
tags var zipcode el.childNodes0.fi
rstChild.data var city
el.childNodes1.firstChild.data var
state el.childNodes2.firstChild.data
var x document.createElement('div')
var t document.createTextNode(zipcode '
' city ', ' state)
x.appendChild(t) list.appendChild(x)
var divlist
document.getElementById('list')
divlist.removeChild(divlist.firstChild)
divlist.appendChild(list) isWorking
false
25
Update the page
idlist
div
var divlist
div
div
div
div
div
div
div
95473 Sebastapol, CA
95472 Sebastapol, CA
95474 Sonoma, CA
26
Design Issues

• DOM interface not fully supported in IE6 so this
  code fails need workarounds for full browser
  compatibility
• Server could output HTML, then client can just
  update using innerHTML, but less general
• Multiple concurrent requests possible but complex
• Interface no longer behaves like standard page
  back button goes all the way back.
• AJAX is at the heart of the browser-as-desktop
  applications Flickr, GoogleMap, Google Suggest.
• Security restrictions on the Browser restricts
  the target of HTTPXMLRequest calls to the same
  host as the current page. This is a major
  restriction on this approach when constructing
  mashups.

27
Tutorial overview

• Test and critique a few AJAX application.
• What are the pluses and minuses about this type
  of interface?
• What domains are well-handled by tree structures
  and what are not?