DOM

The DOM is a W3C (World Wide Web Consortium) standard. The DOM defines a standard for accessing documents like XML and HTML: "The W3C Document Object Model (DOM) is a platform and languageneutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document. The DOM is separated into 3 different parts / levels: Core DOM - standard model for any structured document XML DOM - standard model for XML documents HTML DOM - standard model for HTML documents The DOM defines the objects and properties of all document elements, and the methods (interface) to access them.

The XML DOM defines a standard way for accessing and manipulating XML documents. The DOM presents an XML document as a tree-structure. everything in an XML document is a node.

The DOM says: The entire document is a document node Every XML element is an element node The text in the XML elements are text nodes Every attribute is an attribute node Comments are comment nodes

<bookstore> <book category="cooking"> <title lang="en">Everyday Italian</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30.00</price> </book> </bookstore>

Node Properties In the XML DOM, each node is an object. Objects have methods and properties, that can be accessed and manipulated by JavaScript. Three important node properties are: nodeName nodeValue nodeType X=Doc.getElementsByTagName("title"); txt=x.nodeValue; Node type: Node type NodeType Element 1 Attribute 2 Text 3 Comment 8 Document 9

Node Types The following table lists the different W3C node types, and which node types they may have as children: Node type Description Document :9 represent entire document DocumentFragment :11 Represents a "lightweight" Document object, which can hold a portion of a document DocumentType :10 Provides an interface to the entities defined for the document ProcessingInstruction :7 Represents a processing instruction EntityReference :5 Represents an entity reference Element :1 Represents an element Attr :2 Represents an attribute Text :3 Represents textual content CDATASection :4 Represents a CDATA section in a document Comment :8 Represents a comment Entity :6 Represents an entity Notation :12 Represents a notation declared in the DTD None

childNodes firstChild lastChild nextSibling nodeName nodeType nodeValue parentNode Prefix previousSibling textContent Text appendChild() cloneNode() hasAttributes() hasChildNodes()

insertBefore() isEqualNode() removeChild() replaceChild() length item() getNamedItem() removeNamedItem() createElement() createTextNode() getElementsByTagName() renameNode() appendData() deleteData() insertData() replaceData()

 Xml dom exchanges data with the server. Inorder to load and get the data from the server we use Ajax.

Rich Internet Application (RIA) Technologies

Applet Macromedia Flash/Air Java WebStart DHTML Ajax Sliverlight (Windows only) JavaFX (Java Platform)

Applet
Pros:
Can use full Java APIs Custom data streaming, graphic manipulation, threading, and advanced GUIs Well-established scheme

Cons:
Code downloading time could be significant Reliability concern - a mal-functioning applet can crash a browser

There is renewed interest in applet, however, as a RIA technology with Java SE 10 Update 10
Solves old applet problems

Macromedia Flash
Designed for playing interactive movies originally Programmed with ActionScript Implementation examples
Macromedia Flex Laszlo suite (open source)

Pros:
Good for displaying vector graphics

Cons:
Browser needs a Flash plug-in ActionScript is proprietary

Java WebStart
Desktop application delivered over the net
Leverages the strengths of desktop apps and applet

Pros
Desktop experience once loaded Leverages Java technology to its fullest extent Disconnected operation is possible Application can be digitally signed Incremental redeployment

Cons
Old JRE-based system do not work First-time download time could be still significant

DHTML (Dynamic HTML)

DHTML = JavaScript + DOM + CSS Used for creating interactive applications No asynchronous communication, however
Full page refresh still required Reason why it has only a limited success

AJAX
AJAX = Asynchronous JavaScript and XML. AJAX is a technique for creating fast and dynamic web pages. AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. Classic web pages, (which do not use AJAX) must reload the entire page if the content should change. Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook AJAX is based on internet standards, and uses a combination of: XMLHttpRequest object (to exchange data asynchronously with a server) JavaScript/DOM (to display/interact with the information) CSS (to style the data) XML (often used as the format for transferring data)

How AJAXworks

The XMLHttpRequest Object

All modern browsers support the XMLHttpRequest object (IE5 and IE6 use an ActiveXObject). The XMLHttpRequest object is used to exchange data with a server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. All modern browsers (IE7+, Firefox, Chrome, Safari, and Opera) have a built-in XMLHttpRequest object. Syntax for creating an XMLHttpRequest object: variable=new XMLHttpRequest(); Old versions of Internet Explorer (IE5 and IE6) uses an ActiveX Object: variable=new ActiveXObject("Microsoft.XMLHTTP");

Send a Request To a Server

To send a request to a server, we use the open() and send() methods of the XMLHttpRequest object: xmlhttp.open("GET",url",true); xmlhttp.send();

Server Response To get the response from a server, use the responseText or responseXML property of the XMLHttpRequest object. Property Description responseText get the response data as a string responseXML get the response data as XML data xmlhttp.responseText; The onreadystatechange event When a request to a server is sent, we want to perform some actions based on the response. The onreadystatechange event is triggered every time the readyState changes. The readyState property holds the status of the XMLHttpRequest. Property Description onreadystatechange Stores a function (or the name of a function) to be called automatically each time the readyState property changes readyState Holds the status of the XMLHttpRequest. 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready status 200: "OK" 404: Page not found

List.xml <list> <faculty> <firstname>Anupama</firstname> <secondname>Namburu</secondname> <designation>Asst professor</designation> <message>Don't forget the class this friday!</message> </faculty> <faculty> <firstname>chaitanya</firstname> <secondname>konda</secondname> <designation>Asst professor</designation> <message>Don't forget the class this monday!</message> </faculty> </list>

<html> <head><title>Parsing xml using DOM</title> <script type="text/javascript" > function loadxml(url) {

if (window.XMLHttpRequest) { xhttp=new XMLHttpRequest(); } else { xhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xhttp.open("GET",url,false); xhttp.send(); return xhttp.responseXML;
} xmlDoc=loadxml("list.xml");

function processlist() { x=xmlDoc.documentElement.childNodes; for(i=0;i<x.length;i++) { document.write(xmlDoc.getElementsByTagName("firstname")[i].childNodes[0].no deValue + "<br />"); document.write(xmlDoc.getElementsByTagName("secondname")[i].childNodes[0] .nodeValue + "<br />"); document.write(xmlDoc.getElementsByTagName("designation")[i].childNodes[0]. nodeValue+ "<br />"); document.write(xmlDoc.getElementsByTagName("message")[i].childNodes[0].no deValue+ "<br />"); } } function counttags() { x=xmlDoc.documentElement.childNodes; document.write("Number of child nodes: " + x.length); }

function changenode() { x=xmlDoc.getElementsByTagName("secondname")[0].childNodes[0]; x.nodeValue="priya"; }

function removenode() { y=xmlDoc.getElementsByTagName("faculty")[0]; xmlDoc.documentElement.removeChild(y); }

function firstchild() { x=xmlDoc.documentElement.firstChild; while (x.nodeType!=1) { x=x.nextSibling; } document.writeln(x.nodeName); }

</script> </head> <body > <input type="button" value="firstchild" onclick="firstchild()" /> <input type="button" value="listbytagname" onclick="processlist()" /> <input type="button" value="Nooftags" onclick="counttags()" /> <input type="button" value="changenodevalue" onclick= "changenode()" /> <input type="button" value="removenode"onclick="removenode()" /> <input type="button" value="addnode" onclick="addnode()" /> </body> </html>

output
Listbytag button Anupama Namburu Asst professor Don't forget the class this weekend! chaitanya konda Asst professor Don't forget the class this weekend! Changenodevalue Anupama priya Asst professor Don't forget the class this weekend! chaitanya konda Asst professor Don't forget the class this weekend! Removenode chaitanya konda Asst professor Don't forget the class this weekend!

Ajax Notation
JSON:Javascript Object Notation.
A simple way to represent javascript Objects as strings.Is an alternative way to pass data between the client and server. Each object is represented as {properttName1:val1,propertyName2:value2} Arrays [val1,val2,val3..]
<script type=text\javascript src=json.js>