Asynchronous JavaScript and XML (Ajax) takes Dynamic HTML (DHTML) to the next level by allowing server access from within scripting code. This is accomplished by using a standardized API for client/server communications, the XMLHttpRequest object. This objects allows using HTTP connections from within scripting code, and thereby allows scripting code to dynamically reload data from a server in response to user interactions.
versionsof DOM/JavaScript
missing functionality
<b><i>no tree<b><i>The term Mixed content in XML refers to elements which have text content mixed with elements. What these elements do depends on the elements 
, but the important point is that they are on the same level as the text nodes of the mixed content.
<p>The term <em>Mixed content</em> in XML refers to elements <a href="http://www.w3.org/TR/xml/#sec-mixed-content">which have text content mixed with elements</a>. What these elements do depends on the elements <img style="height : 1em" src="smiley.gif"/>, but the important point is that they are on the same level as the text nodes of the mixed content.</p>
<html>
<head>
<title>CSS and DOM for Text Animation</title>
<script>
cc = 25 ; // Number of frames in the animation
aa = 255 ; // Initial value used for RGB color
tt = 0 ; // Aux counter - the left position of the element
el = 0 ; // Index of the element
function colorfade() {
if ( cc > 0 ) {
tt += cc ;
document.getElementById("t"+el).style.left = tt+"px" ;
aa -= 10 ;
document.getElementById("t"+el).style.color = "rgb("+aa+","+aa+","+aa+")" ;
cc-- ;
setTimeout("colorfade()", 40) ;
} else {
cc = 25 ; aa = 255 ; tt = 0 ;
if ( el < 5 ) {
el++ ;
setTimeout("colorfade()", 20); } } }
</script>
</head>
<body onload="colorfade()" style="color:white;background:white;left:0px;">
<div id="t0" style="position:absolute;top:10%;font-size:48pt;">CSS</div>
<div id="t1" style="position:absolute;top:20%;font-size:32pt;">and</div>
<div id="t2" style="position:absolute;top:30%;font-size:48pt;">DOM</div>
<div id="t3" style="position:absolute;top:40%;font-size:32pt;">for</div>
<div id="t4" style="position:absolute;top:50%;font-size:48pt;">Text</div>
<div id="t5" style="position:absolute;top:60%;font-size:96pt;">Animation</div>
</body>
</html>
colorfades.html
<html>
<head>
<title>DOM Event Flow</title>
<script type="text/javascript">
function init() {
// using old syntax to assign bubble-type event handlers
window.onclick = winEvent ;
document.onclick = docEvent ;
document.body.onclick = docBodEvent ;
// turn on click event capture for two objects
document.addEventListener("click", docEvent, true) ;
document.forms[0].addEventListener("click", formCaptureEvent, true) ;
// set event listener for bubble
document.forms[0].addEventListener("click", formBubbleEvent, false) ; }
function winEvent(evt) { alert("window and (" + phase(evt) + ").") } ;
function docEvent(evt) { alert("document and (" + phase(evt) + ").") } ;
function docBodEvent(evt) { alert("body and (" + phase(evt) + ").") } ;
function formCaptureEvent(evt) { alert("form and (" + phase(evt) + ").") } ;
function formBubbleEvent(evt) { alert("form and (" + phase(evt) + ").") } ;
function phase(evt) {
switch (evt.eventPhase) {
case 1: return "CAPTURING" ; break ;
case 2: return "AT TARGET" ; break ;
case 3: return "BUBBLING" ; break ;
default: return "" } }
</script>
</head>
<body onLoad="init()">
<form>
<input type="button" value="Click!" onClick="alert('button and (' + phase(event) + ').')" />
</form>
</body>
</html>
dom-event-flow.htmllocally
XMLHttpRequest API has been built for requesting XML via HTTPXMLHttpRequest has to be parsed into a DOM tree<?xml version="1.0"?> <menu id="file" value="File"> <popup> <menuitem value="New" onclick="CreateNewDoc()"/> <menuitem value="Open" onclick="OpenDoc()"/> <menuitem value="Close" onclick="CloseDoc()"/> </popup> </menu>menu.xml
{ "menu" : {
"id" : "file",
"value" : "File",
"popup" : {
"menuitem" : [
{ "value" : "New", "onclick" : "CreateNewDoc()" },
{ "value" : "Open", "onclick" : "OpenDoc()" },
{ "value" : "Close", "onclick" : "CloseDoc()" }
]
}
}}menu.json