DOM - Lehrstuhl Bioinformatik JenaDocument Object Model • Represents Objects in • HTML • XHTML...

DOMPhylobase - Thasso Griebel

Model vs. Interface

Model vs. Web Interface

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 ...

Mozilla Page

http://www.mozilla.org/

http://www.mozilla.org/

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>

http://www.mozilla.org/projects/






http://www.mozilla.org/causes/


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


• appendChild()

• removeChild()

• replaceChild()

• ...


• 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


One Page - multiple Requests


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 }

DOM - Lehrstuhl Bioinformatik JenaDocument Object Model • Represents Objects in • HTML • XHTML...

Documents

Transcript of DOM - Lehrstuhl Bioinformatik JenaDocument Object Model • Represents Objects in • HTML • XHTML...