Post on 09-Jul-2020
DOMPhylobase - Thasso Griebel
Model vs. Interface
Model vs. Web Interface
Model for Web UI
Model for Web UI
Model for Web UI
Model for Web UI
Document Object Model
• Represents Objects in
• HTML
• XHTML
• XML
• Tree Structured
• Cross-Platform and language independent
The DOM Tree
• Contains all objects
• Can be queried
• Can be manipulated
• Contains structural semantics
• headings, paragraphs, lists ...
A DOM Client
• Takes a DOM Tree
• Applies visual informations and renders the DOM tree ( CSS )
• Submits Requests ( Links, Forms )
• Provides API access to the DOM (manipulations, JavaScript)
StylesheetDOM Tree
Semantic Structure Interaction
Interaction
• JavaScript
• Can be embedded in HTML
• interacts with the DOM tree
• runs locally
• HTTP POST/GET request
• Submit form data
• runs on the server
JS-Example
Plain HTML
<!DOCTYPE HTML><html> <head>
... </head> <body id="home"> <div id="header"> <ul id="nav"> <li class="first"><a href="http://www.mozilla.org/projects/">Learn About Mozilla</a></li> <li><a href="http://www.mozilla.org/projects/">Our Community</a></li> <li><a href="http://www.mozilla.org/projects/">Our Projects</a></li> <li><a href="http://www.mozilla.org/causes/">Our Causes</a></li> </ul> </div> </body></html>
With Javascript <!DOCTYPE HTML><html> <head>
...
<script> function fillText(){ alert("Hello"); }</script>
</head> <body id="home"> <div id="header"> <ul id="nav">
<li class="first"><a href="javascript:fillText()">Learn About Mozilla</a></li> <li><a href="http://www.mozilla.org/projects/">Our Community</a></li> <li><a href="http://www.mozilla.org/projects/">Our Projects</a></li> <li><a href="http://www.mozilla.org/causes/">Our Causes</a></li> </ul> </div> </body></html>
DOM Manipulation<!DOCTYPE HTML><html> <head>
...
<script> function fillText(){ var o=document.getElementById('myDiv'); o.innerHTML="Hello World"; }</script>
</head> <body id="home"> <div id="header"> <ul id="nav">
<li class="first"><a href="javascript:fillText()">Learn About Mozilla</a></li> <li><a href="http://www.mozilla.org/projects/">Our Community</a></li> <li><a href="http://www.mozilla.org/projects/">Our Projects</a></li> <li><a href="http://www.mozilla.org/causes/">Our Causes</a></li> </ul> </div>
<div id="myDiv"></div> </body></html>
Access DOM Elements
• document
• .getElementById()
• .getElementsByName()
• .getElementsByTagName()
Traverse the DOM Tree
• HTML Element node
• childNodes()
• firstChild()
• lastChild()
• parentNode()
• ...
Change the Tree
• HTML Element node
• appendChild()
• removeChild()
• replaceChild()
• ...
• HTML Element node
• getAttribute()
• setAttribute()
• node.innerHTML =
• node.XYZ =
Change the Node
AJAXAsynchronous JavaScript and XML
Technical - Classic Request-Response
Request
Wait
Timeout
Fail
Response
SuccessRender Web
pageReport error
(i.e. 404)
Abstract Access Model
from: Jesse James Garrett / adaptivepath.com
One Request - one Page
from: Jesse James Garrett / adaptivepath.com
One Page - multiple Requests
from: Jesse James Garrett / adaptivepath.com
Ajax
• Asynchronous - The page requests data multiple times in an asynchronous fashion
• JavaScript - Used the trigger the requests and handle errors and results
• XML - Container for the returned data (there are more)
HttpRequest to the rescue
function fillText(URL){ // Create the XML request xmlReq = new XMLHttpRequest(); // Anonymous function to handle changed request states xmlReq.onreadystatechange = function() { switch(xmlReq.readyState) { case 0: // Uninitialized break; case 1: // Loading break; case 2: // Loaded break; case 3: // Interactive break; case 4: // Done! // Retrieve the data and put it in page
document.getElementById("myDiv").innerHTML = xmlReq.responseText; break; default: break; } } // Make the request xmlReq.open ('GET', URL, true); xmlReq.send (null); }
XMLHttpRequest object
• XMLHttpRequest does most of the work
• Beware of the Browser !
if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest();}else if (window.ActiveXObject){ // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}else{ alert("Your browser does not support XMLHTTP!");}
Request’s stat changesxmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4){ // Get data from the server's response }}
State Description
0 The request is not initialized1 The request has been set up2 The request has been sent3 The request is in process4 The request is complete
Trigger the Request
xmlhttp.open("GET","time.asp",true);xmlhttp.send(null);
Example
XML transfer
• Use XML instead
• to structure the data
• to get machine readable output (you can create a DOM for example)
JSON transfer
• JavaScript Objet Notation
• Use JSON instead
• to structure the data
• to access simple data structures
• lists, maps, ...
JSON Example{ "firstName": "John", "lastName": "Smith", "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": 10021 }, "phoneNumbers": [ { "type": "home", "number": "212 555-1234" }, { "type": "fax", "number": "646 555-4567" } ], "newSubscription": false, "companyName": null }