0
Trees, the DOM and AJAX
Example Tree
Formal Definition  (from Google’s  define:tree ) <ul><li>In graph theory, a directed acyclic graph (DAG) in which the root...
Uses of Trees <ul><li>Paragraph Numbering in a Document </li></ul><ul><li>Family (aSexual reproduction!) </li></ul><ul><li...
Tree Terminology   2 Level   F, G, H, J, K, L Subtree   A, B, D, E, C, F, G, H, J , K, L Natural Order   A, B, C, F, H Non...
Legal Numbering in a document In natural order with A as root   1           B 1.1        D 1.2        E 2.          C 2.1 ...
Family Terminology   F, G, H, J, K, L Node and Descendents   C, A Ancestors   G, H, J, K, L Descendents   (none) Siblings ...
File system <ul><li>File system in Unix or Windows </li></ul><ul><ul><li>C:Program FileseXistwebappadminadmin.xql </li></u...
Folder Hierarchy
Navigation in File System   Directory or Folder Node name   File Leaf name   /A/C/F Absolute Path   ../../B/E A Cousin   (...
Type (A Kind of) Hierarchy relative to F G and H would inherit all the attributes and methods of F and define additional a...
Object Hierarchy <ul><li>An object hierarchy supports one or more of a number of kinds of relationship.  </li></ul><ul><li...
HTML Document (Object Tree) <html> <head> <title>Sample Document</title>  </head>  <body> <h1>An HTML Document</h1> <p>Thi...
Document Object Model  Class Tree From Flanagan,D. (2002) JavaScript The Definitive Guide , O’Reilly [on-line]
The DOM logical physical conceptual ECMAScript (Javascript) Gecko (Firefox) Object Model: Classes : Element, Text… Methods...
[@size= 10 and . ='fred'] Select by predicate s.length s.length Number of nodes in sequence document.getElementsByTagName(...
AJAX ZIP decode <ul><li>Zip decode  (in Firefox) </li></ul><ul><li>Backend matches partial zipcode to a database and retur...
var url = &quot;getZip.php?zipcode=&quot;; // The server-side script var http = getHTTPObject(); //  create the HTTP Objec...
Sample returned XML <?xml version=&quot;1.0&quot; standalone=&quot;yes&quot;?> <result> <zip> <zipcode>95472</zipcode> <ci...
result zip zipcode city state 95472 Sebastopol CA zip zipcode city state 95473 Sebastopol CA document element text tag
function updateList() { if (http.readyState == 4) { // Use the XML DOM to unpack the zip, city and state values var xmlDoc...
result zip zipcode city state 95472 Sebastopol CA zip zipcode city state 95473 Sebastopol CA XMLDocument firstChild childN...
(document) html body h1 div head form id=‘list’ HTML Document (skeleton) document.getElementById(‘list’)
function updateList() { if (http.readyState == 4) { // Use the XML DOM to unpack the zip, city and state values var xmlDoc...
div div 95473: Sebastapol, CA div div 95472: Sebastapol, CA 95474: Sonoma, CA div id=‘list’ div div div Update the page va...
Design Issues <ul><li>DOM interface  not fully supported in IE6 so this code fails – need workarounds for full browser com...
Tutorial overview <ul><li>Test and critique a few AJAX application. </li></ul><ul><li>What are the pluses and minuses abou...
Upcoming SlideShare
Loading in...5
×

slides

579

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
579
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "slides"

  1. 1. Trees, the DOM and AJAX
  2. 2. Example Tree
  3. 3. Formal Definition (from Google’s define:tree ) <ul><li>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 </li></ul><ul><li>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_(computing ) </li></ul>
  4. 4. Uses of Trees <ul><li>Paragraph Numbering in a Document </li></ul><ul><li>Family (aSexual reproduction!) </li></ul><ul><li>File system e.g. Unix, Dos </li></ul><ul><li>Classification e.g. Linnaeus, Dewey </li></ul><ul><li>Hierarchical Database e.g. IBMs MIS, LDAP </li></ul><ul><li>Web site structure </li></ul><ul><li>Hierarchical Menu </li></ul><ul><li>Organisational Hierarchy </li></ul><ul><li>Class Hierarchy in Java </li></ul><ul><li>Assembly / Part hierarchy </li></ul><ul><li>Document Object Model </li></ul><ul><li>XML </li></ul><ul><li>B-tree for efficient indexing </li></ul>
  5. 5. Tree Terminology   2 Level   F, G, H, J, K, L Subtree   A, B, D, E, C, F, G, H, J , K, L Natural Order   A, B, C, F, H Non-leaf   D, E, G, J, K, L Leaf   A Root B F Current Node
  6. 6. Legal Numbering in 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. 7. Family Terminology   F, G, H, J, K, L Node and Descendents   C, A Ancestors   G, H, J, K, L Descendents   (none) Siblings   G, H Children   C Parent (at most 1) B F CurrentNode
  8. 8. File system <ul><li>File system in Unix or Windows </li></ul><ul><ul><li>C:Program FileseXistwebappadminadmin.xql </li></ul></ul><ul><li>Actually this is a ‘Forest’ of trees, each drive a separate Tree </li></ul><ul><li>Shortcuts (symbolic links in UNIX) cut across this tree structure </li></ul>
  9. 9. Folder Hierarchy
  10. 10. Navigation in File System   Directory or Folder Node name   File Leaf name   /A/C/F Absolute Path   ../../B/E A Cousin   (none) Sibling   .. Parent   G (or ./G) First Child   . Current directory (context)   / Root B F Relative to
  11. 11. Type (A Kind of) Hierarchy relative to F 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’ Easily confused with an Object Hierarchy or Whole/Part hierarchy.   G, H subtype   C supertype B F Relative to
  12. 12. Object Hierarchy <ul><li>An object hierarchy supports one or more of a number of kinds of relationship. </li></ul><ul><li>Containment:   </li></ul><ul><ul><li>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. </li></ul></ul><ul><li>Scoping:   </li></ul><ul><ul><li>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.  </li></ul></ul><ul><li>Delegation :  </li></ul><ul><ul><li>A child object delegates responsibility for a property to its parent, and so on up the hierarchy until an object defines the property.  </li></ul></ul><ul><li>Aggregation:   </li></ul><ul><ul><li>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. </li></ul></ul><ul><li>Distribution:   </li></ul><ul><ul><li>A parent property is distributed over the children – for example a budget value defined in the parent is distributed over the children. </li></ul></ul>
  13. 13. HTML Document (Object Tree) <html> <head> <title>Sample Document</title> </head> <body> <h1>An HTML Document</h1> <p>This is a <i>simple</i> document. </p> </body> </html> From Flanagan,D. (2002) JavaScript The Definitive Guide , O’Reilly [on-line]
  14. 14. Document Object Model Class Tree From Flanagan,D. (2002) JavaScript The Definitive Guide , O’Reilly [on-line]
  15. 15. The DOM logical physical conceptual ECMAScript (Javascript) Gecko (Firefox) Object Model: Classes : Element, Text… Methods: getElementsByTagName() Java binding W3C DOM level 1 PHP Layout Engines Presto (Opera) Trident (IE6)
  16. 16. [@size= 10 and . ='fred'] Select by predicate s.length s.length Number of nodes in sequence document.getElementsByTagName('img') //img Locate nodes by Tag document.getElementById('f1')  //[@id='f1'] Locate node by ID f.getAttribute(att)  f/@att Attribute f.nextSibling f.previousSibling ../g ../* Sibling f.parentNode .. Parent n.childNodes n.firstChild n.lastChild * [1] [last()] Child n Local Name . Context Node Current Directory (self)   document / Root Procedural (navigational) Declarative DOM XPATH  
  17. 17. AJAX ZIP decode <ul><li>Zip decode (in Firefox) </li></ul><ul><li>Backend matches partial zipcode to a database and returns the data as XML </li></ul><ul><li>Script uses AJAX to update the page dynamically without a full refresh </li></ul><ul><ul><li>As digits are entered, code in Javascript makes a request to the server for the list of matches </li></ul></ul><ul><ul><li>The matches are used to update the DOM </li></ul></ul>
  18. 18. var url = &quot;getZip.php?zipcode=&quot;; // The server-side script var http = getHTTPObject(); // create the HTTP Object var isWorking = false; <input type=&quot;text&quot; size=&quot;5&quot; name=&quot;zip&quot; id=&quot;zip&quot; onkeyup=&quot;getList();&quot; onfocus=&quot;getList();&quot; /> function getList() { if (!isWorking && http) { var zipcode = document.getElementById(&quot;zip&quot;).value; http.open(&quot;GET&quot;, url + escape(zipcode), true); http.onreadystatechange = 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. 19. Sample returned XML <?xml version=&quot;1.0&quot; standalone=&quot;yes&quot;?> <result> <zip> <zipcode>95472</zipcode> <city>Sebastopol</city> <state>CA</state> </zip> <zip> <zipcode>95473</zipcode> <city>Sebastopol</city> <state>CA</state> </zip> <zip> <zipcode>95476</zipcode> <city>Sonoma</city> <state>CA</state> </zip> </result>
  20. 20. result zip zipcode city state 95472 Sebastopol CA zip zipcode city state 95473 Sebastopol CA document element text tag
  21. 21. 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.childNodes[i]; if (el.nodeName=='zip') { // just the zip tags var zipcode = el.childNodes[0].firstChild.data var city = el.childNodes[1].firstChild.data; var state = el.childNodes[2].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; } } DOM access in JavaScript
  22. 22. result zip zipcode city state 95472 Sebastopol CA zip zipcode city state 95473 Sebastopol CA XMLDocument firstChild childNodes[1] childNodes[0] firstChild data XMLDocument .firstChild .childNodes[1] .childNodes[0] .firstChild .data Access to nodes
  23. 23. (document) html body h1 div head form id=‘list’ HTML Document (skeleton) document.getElementById(‘list’)
  24. 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.childNodes[i]; if (el.nodeName=='zip') { // just the zip tags var zipcode = el.childNodes[0].firstChild.data var city = el.childNodes[1].firstChild.data; var state = el.childNodes[2].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. 25. div div 95473: Sebastapol, CA div div 95472: Sebastapol, CA 95474: Sonoma, CA div id=‘list’ div div div Update the page var divlist
  26. 26. Design Issues <ul><li>DOM interface not fully supported in IE6 so this code fails – need workarounds for full browser compatibility </li></ul><ul><li>Server could output HTML, then client can just update using innerHTML, but less general </li></ul><ul><li>Multiple concurrent requests possible but complex </li></ul><ul><li>Interface no longer behaves like standard page – back button goes all the way back. </li></ul><ul><li>AJAX is at the heart of the browser-as-desktop applications – Flickr, GoogleMap, Google Suggest . </li></ul><ul><li>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. </li></ul>
  27. 27. Tutorial overview <ul><li>Test and critique a few AJAX application. </li></ul><ul><li>What are the pluses and minuses about this type of interface? </li></ul><ul><li>What domains are well-handled by tree structures and what are not? </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×