XHTML | DOM | JavaScript | AJAX
This page contains information on presenting XML through web browsers
|
Table of Contents
|
XHTML
W3C recommendation
XHTML: http://www.w3.org/TR/xhtml1
Resources
XHTML validation: http://validator.w3.org
Tidy: http://tidy.sourceforge.net/
<?xml version="1.0" encoding="ENCODING"?>
<?xml-stylesheet href='PATH.css' type='text/css'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Modularized XHTML -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
<-- Validation: http//validator.w3.org -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<script type="text/javascript" src="JAVASCRIPTPATH.js" />
<script type="text/javascript">
<![CDATA[
function FUNCTIONNAME {
}
]]>
</script>
<-- Semantic markup -->
<head>
<meta http-equiv="Content-Type" content="MIME TYPE"; charset="ENCODING" />
<-- text/html | application/xhtml+xml -->
<title>TITLE</title>
<-- Stylistic markup -->
<link rel="stylesheet" type="text/css" href="CASCADINGSTYLESHEETPATH.css" />
<style>
<-- universal selector -->
* {PROPERTY1:VALUE1; PROPERTY2:VALUE1;}
<-- type selector -->
ELEMENTNAME1, ELEMENTNAME2 {PROPERTY1:VALUE2; PROPERTY2:VALUE2;}
ELEMENTNAME2 {PROPERTY3:VALUE;}
<-- child selector -->
PARENTELEMENT > CHILDELEMENT {PROPERTY3:VALUE;}
<-- descendant selector -->
PARENTELEMENT CHILDELEMENT {PROPERTY3:VALUE;}
<-- adjacent selector -->
FIRSTELEMENT + SECONDELEMENT {PROPERTY3:VALUE;}
<-- attribute selectors -->
</style>
</head>
<-- structural markup -->
<body>
<h1><a id="Document">Document</a></h1>
<p>Introduction text</p>
<ul>
<li><a href="#Section1">Section 1</a></li>
<li><a href="#Section2">Section 2</a></li>
<li><a href="#Section3">Section 3</a></li>
</ul>
<h2><a id="Section1">Section 1</a></h2>
<p>Section 1 text</p>
<h2><a id="Section2">Section 2</a></h2>
<p>Section 2 text</p>
<h2><a id="Section3">Section 3</a></h2>
<p>Section 3 text</p>
<div<a href="#Document">Back to Introduction</a></div>
</body>
</html>
DOM
W3C Recommendation
DOM level 1: http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001
DOM level 2 - core: http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113
DOM level 2 - events: http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113
DOM level 2 - style: http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113
DOM level 2 - Traversal and Range: http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113
DOM level 2 - views: http://www.w3.org/TR/2000/REC-DOM-Level-2-Views-20001113
DOM level 2 - HTML: http://www.w3.org/TR/2000/REC-DOM-Level-2-HTML
Resources
http://www.w3.org/DOM/Activity.html
Document
Properties
Document Properties are all read only
| implementation | returns DOMImplementation |
| doctype | returns DocumentType |
| documentElement | returns Element |
Methods
| createDocumentFragment | returns DocumentFragment |
| createElement(tagname) | returns Element |
| createTextNode(data) | returns Text |
| createAttribute(name) | returns Attr |
| createCDATASection(data) | returns CDATASection |
| createComment(data) | returns Comment |
| createProcessingInstruction(target,data) | returnsProcessingInstruction Object |
| createEntityReference(name) | returns EntityReference |
| createElementNS(namespaceURI, qualifiedname) | returns Element |
| createAttributeNS(namespaceURI, qualifiedname) | returns Attr |
| getElementbyId(elementId) | returns Element |
| getElementsbyTagName(tagname) | returns NodeList |
| getElementsbyTagNameNS(namespaceURI, localName) | returns NodeList |
| importNode(importedNode, deep) | returns Element |
Node
Properties
Node Properties are all read only
| childnodes | returns NodeList |
| firstChild | returns Node |
| lastChild | returns Node |
| nextSibling | returns Node |
| previousSibling | returns Node |
| parentNode | returns Node |
| prefix | returns string |
| namespaceURI | returns string |
| localname | returns string |
| nodeName | returns string |
| nodeValue | returns string |
| nodeType | returns integer |
| attributes | returns NamedNodeMap |
| ownerDocument | returns Document |
Methods
| isSupported(feature,version) | returns Boolean |
| hasChildNodes | returns Boolean |
| hasAttributes | returns Boolean |
| appendChild(newChild) | returns Node |
| insertBefore(newChild, refChild) | returns Node |
| cloneNode(Boolean) | returns Node |
| removeChild(oldChild) | returns Node |
| replaceChild(newChild,oldChild) | returns Node |
| normalize |
NamedNodeMap
Property
| length | returns Number |
Methods
| item(index) | returns Node |
| getNamedItem | returns Node |
| setNamedItem(arg) | returns Node |
| removeNamedItem(name) | returns Node |
| getNamedItemNS(namespaceURI, localName) | returns Node |
| removeNamedItemNS(namespaceURI, localName) | returns Node |
| setNamedItemNS(arg) | returns Node |
NodeList
Property
| length | returns Number |
Methods
| item(index) | returns Node |
Code
<script type='text/javascript'>
if ((isMinMoz1)) {
Node.prototype.__defineGetter__("xml", function () {
var oSerializer = new XMLSerializer();
return oSerializer.serializeToString(this, "text/xml");
});
}
window.onload = function () {
if ((isMinMoz1)) {
var oXmlDom = document.implementation.createDocument("","",null);
} else if ((isMinIE5_5)) {
function createXMLDOM() {
var arrSignatures = ["MSXML2.DOMDocument.5.0", "MSXML2.DOMDocument.4.0",
"MSXML2.DOMDocument.3.0", "MSXML2.DOMDocument",
"Microsoft.XmlDom"];
for (var i=0; i < arrSignatures.length; i++) {
try {
var oXmlDom = new ActiveXObject(arrSignatures[i]);
return oXmlDom;
} catch (oError) {
//ignore
}
}
throw new Error("MSXML not installed on your system.");
}
var oXmlDom = createXMLDOM();
}
<!-- xml to string -->
var xmlContents = <'?xml version='1.0'?>';
xmlContents += '<ROOT>;
xmlContents += '<ELEMENT></ELEMENT>;
xmlContents += '</ROOT>;
<!-- load XMl into Document interface-->
<!-- validate with external XML Schema requires xsi:schemalocation in XML document -->
oXMDom.resolveExternals = true;
oXmlDom.validateOnParse = true;
oXmlDom.async = true|false;
oXmlDom.load("PATH.xml");
oXmlDom.loadXML(xmlContents|);
<!-- parse Error -->
if(oXmlDom.parseError.errorCode !=0)
{
alert("Error Code: " + oXmlDom.parseError.ErrorCode);
alert("Error Reason: " + oXmlDom.parseError.reason);
alert("Error Line: " + oXmlDom.parseError.line);
alert("Error Line: " + oXmlDom.parseError.linepos);
alert("Error Text: " + oXmlDom.parseError.srcText);
}
<!-- readystate 1=loading, 2=loaded, 3=interactive, 4=completed-->
if (oXmlDom.readyState==4)
{
<!-- read document -->
alert(oXmlDom.XML);
<!-- read document nodes -->
document.write(oXmlDom.getElementsByTagName("ELEMENTNAME").item(0).text);
var NODELIST = oXmlDom.getElementsByTagName("ELEMENTNAME");
for (var i=0; i< NODELIST.length; i++)
{
document.write(NODELIST.item(i).text + " ");
}
var NODES = oXMLDom.documentElement.childNodes.item(0).childNodes;
alert(NODES[0].text);
alert(NODES[0].xml);
alert(NODES[0].nodeName);
alert(NODES[0].nodeType);
alert(NODES[0].nodeTypeValue);
alert(NODES[0].nodeTypeString);
alert(NODES[0].nodeValue);
alert(NODES[0].prefix);
alert(NODES[0].namespaceURI);
<!-- read characterdata -->
var ELEMENT = oXmlDom.documentElement.lastChild;
var text = ELEMENT.firstChild.previousSibling;
document.write(text.data + " ");
var lasttwochars = text.substring(1,2);
document.write(lasttwochars);
<!-- modify characterdata -->
var data = text.appendData("TEXT")
var data = text.deleteData(1,2)
var data = text.insertData(1,"TEXT")
var data = text.replaceData(1,"TEXT")
<!-- select node -->
oXmlDom.documentElement.childNodes.item(0).selectNodes
oXmlDom.documentElement.childNodes.item(0).selectSingleNode
<!-- write to node -->
NODES[0].text = 'VALUE';
<!-- clone node -->
oXmlDom.documentElement.childNodes.item(0).cloneNode
<!-- create node -->
rootNode=oXmlDom.createNode(1,"NAME", " ");
oXmlDom.appendChild(rootNode);
oXmlDom.save("PATH.xml");
oXmlDom.cloneNode("NODENAME")
<!-- create textnode -->
var node =oXmlDom.createTextNode("string");
<!-- read element -->
var TagName=oXmlDom.documentElement.childNodes.item(0).tagName
<!-- append element -->
var rootElement = oXmlDom.documentElement;
var newElement = oXmlDom.createElement("NEWELEMENT");
rootElement.appendChild(newElement);
<!-- insert element -->
var newElement = oXmlDom.createElement("NEWELEMENT");
var oldElement = oXmlDom.documentElement.childNodes.item(0).childNodes.item(0);
oXmlDom.documentElement.childNodes.item(0).insertBefore(newElement, oldElement);
<!-- remove element -->
var oldElement = oXmlDom.documentElement.childNodes.item(0).parentNode;
oXmlDom.documentElement.childNodes.item(0).removeChild(oldElememnt);
}
<!-- replace element -->
var newElement = oXmlDom.createElement("NEWELEMENT");
var oldElement = oXmlDom.documentElement.childNodes.item(0).nextSibling.item(0);
oXmlDom.documentElement.childNodes.item(0).replaceChild(newElement, oldElement);
<!-- read attributes -->
var ELEMENT = oXmlDom.documentElement.lastChild;
var attributes = ELEMENT.attributes
for (i=0; i<attributes.length; i++)
document.write(attributes.item(i).name +
attributes.item(i).value + " ");
ELEMENT.getattributeNode("ATTRIBUTENAME");
ELEMENT.getAttribute("ATTRIBUTENAME");
<!-- write attributes -->
var ELEMENT = oXmlDom.documentElement;
ELEMENT.setAttribute('NAME', 'VALUE');
ELEMENT.setAttributeNode('NAME', 'VALUE');
oXmlDom.createAttribute ();
<!-- remove attribute -->
ELEMENT.removeAttribute("ATTRIBUTENAME");
ELEMENT.removeAttributeNode("ATTRIBUTENAME");
<!-- write comment -->
oXmlDom.createComment (string);
}
'Load XML Document
objXMLDOM = new activeAOblect ("Msxml2.DOMDocument.3.0")
objXMLDOM.loadXML(strXML)
alert(objXMLDOM.XML)
'Insert Element with text
objOriginalElement = objXMLDOM.documentElement.firstChild
strNewText = "Text"
objTextNode = objXMLDOM.createTextNode(strNewText)
objElement = objXMLDOM.createElement("ElementName")
objElement.appendChild(objTextNode)
objXMLDOM.documentElement.insertBefore(objElement, objOriginalElement)
'Replace attribute
objNewAttribute = objXMLDOM.createAttribute("NAME")
objNewAttribute.nodeValue = "VALUE"
objAttributes = objXMLDOM.documentElement.lastChild.attributes
objAttributes.removeNamedItem("NAME")
objAttributes.setNamedItem(objNewAttribute)
'Get Element
objXMLDOM.getElementsByTagName("NAME")
'Returns name of root node
objXMLDOM.DocumentElement.nodeName
'Returns text from first element after root
objXMLDOM.DocumentElement.firstChild.firstChild.nodeValue
'Remove Element
var objElement = objXMLDOM.documentElement.firstchild
objXMLDOM.documentElement.removeChild(objElement)
'Loops through childnodes
for (i=0; i<objXMLDOM.dcoumentElement.childnodes.length; i++)
{
objXMLDOC.documentElement.childnodes.item(i).nodeName;
}
Code Example
Transforming XML using Javascript, MSXML and DOM
This script transforms XML with XSLT stylesheet before displaying on either Firefox or Internet Explorer
<script type='text/javascript'>
if ((isMinMoz1)) {
Node.prototype.__defineGetter__("xml", function () {
var oSerializer = new XMLSerializer();
return oSerializer.serializeToString(this, "text/xml");
});
}
window.onload = function () {
if ((isMinMoz1)) {
var oXmlDom = document.implementation.createDocument("","",null);
var oXslDom = document.implementation.createDocument("","",null);
} else if ((isMinIE5_5)) {
function createXMLDOM() {
var arrSignatures = ["MSXML2.DOMDocument.5.0", "MSXML2.DOMDocument.4.0",
"MSXML2.DOMDocument.3.0", "MSXML2.DOMDocument",
"Microsoft.XmlDom"];
for (var i=0; i < arrSignatures.length; i++) {
try {
var oXmlDom = new ActiveXObject(arrSignatures[i]);
return oXmlDom;
} catch (oError) {
//ignore
}
}
throw new Error("MSXML not installed on your system.");
}
var oXmlDom = createXMLDOM();
var oXslDom = new ActiveXObject("MSXML2.FreeThreadedDOMDocument");
}
oXmlDom.async = false;
oXslDom.async = false;
oXmlDom.load("Plants/Native_Plants.xml");
oXslDom.load("Plants/Native_Plants_Families.xsl");
if ((isMinMoz1)) {
var oProcessor = new XSLTProcessor();
oProcessor.importStylesheet(oXslDom);
var oResultDom = oProcessor.transformToDocument(oXmlDom);
} else if ((isMinIE5_5)) {
var oTemplate = new ActiveXObject("Msxml2.XSLTemplate");
oTemplate.stylesheet = oXslDom;
var oProcessor = oTemplate.createProcessor();
oProcessor.input = oXmlDom;
oProcessor.transform();
var oResultDom = oProcessor.output;
}
var oDiv = document.getElementById("PlantList");
if ((isMinMoz1)) {
oDiv.innerHTML = oResultDom.xml;
} else if ((isMinIE5_5)) {
oDiv.innerHTML = oResultDom;
}
};
function addspecies (sDivId) {
if ((isMinMoz1)) {
var oXmlDom = document.implementation.createDocument("","",null);
var oXslDom = document.implementation.createDocument("","",null);
} else if ((isMinIE5_5)) {
function createXMLDOM() {
var arrSignatures = ["MSXML2.DOMDocument.5.0", "MSXML2.DOMDocument.4.0",
"MSXML2.DOMDocument.3.0", "MSXML2.DOMDocument",
"Microsoft.XmlDom"];
for (var i=0; i < arrSignatures.length; i++) {
try {
var oXmlDom = new ActiveXObject(arrSignatures[i]);
return oXmlDom;
} catch (oError) {
//ignore
}
}
throw new Error("MSXML not installed on your system.");
}
var oXmlDom = createXMLDOM();
var oXslDom = new ActiveXObject("MSXML2.FreeThreadedDOMDocument");
}
oXmlDom.async = false;
oXslDom.async = false;
oXmlDom.load("Plants/Native_Plants.xml");
oXslDom.load("Plants/Native_Plants.xsl");
if ((isMinMoz1)) {
var oProcessor = new XSLTProcessor();
oProcessor.importStylesheet(oXslDom);
oProcessor.setParameter(null, "familyname", sDivId);
var oResultDom = oProcessor.transformToDocument(oXmlDom);
} else if ((isMinIE5_5)) {
var oTemplate = new ActiveXObject("Msxml2.XSLTemplate");
oTemplate.stylesheet = oXslDom;
var oProcessor = oTemplate.createProcessor();
oProcessor.addParameter("familyname", sDivId);
oProcessor.input = oXmlDom;
oProcessor.transform();
var oResultDom = oProcessor.output;
}
var oDiv = document.getElementById(sDivId);
if ((isMinMoz1)) {
oDiv.innerHTML = oResultDom.xml;
} else if ((isMinIE5_5)) {
oDiv.innerHTML = oResultDom;
}
};
Transforming XML using Javascript, MSXML and DOM
<html>
<head>
<title></title>
<script>
function displayTransformedXML ()
{
// Craete Document Objects
var xmlDom = createDocumentObject();
var xslDom = createDocumentObject();
var resultDom = createDocumentObject();
//Load XML and stylesheet documents
xmlDom.load(PATH.xml);
xslDom.load(PATH.xml);
//Check for parsing errors
if (xmlDom.parseError.errorCode != 0){
alert('Error parsing ' + error.url +
' at ' + error.line +':' + error.linepos +
':\n' + error.reason);
}
if (xslDom.parseError.errorCode != 0){
alert('Error parsing ' + error.url +
' at ' + error.line +':' + error.linepos +
':\n' + error.reason);
}
try {
// Create Template Object
var xslTemplate = new ActiveXObject('MSXML2.Template');
// Compile stylesheet into Template Object
xslTemplate.stylesheet = xslDom;
} catch (exception) {
alert(exception.description);
}
try {
//Create Processor Object
xslProcessor = xslTemplate.createProcessor();
//Input XML Document
xslProcessor.input = xmlDom;
xslProcessor.addParameter('PARAMETERNAME','VALUE');
//Output for XML Pipeline
xslProcessor.output = resultDom;
//Run processor object
xslProcessor.transform();
//Output transformation
document.write(xslProcessor.output);
result.innerHTML = xslProcessor.output;
} catch (exception) {
alert(exception.description);
}
try {
//XML Pipeline
var secondXSLProcessor = secondXSLTemplate.createProcessor();
secondXSLProcessor.input = resultDom;
secondXSlProcessor.transform();
document.write(secondXSLProcessor.output);
} catch (exception) {
alert(exception.description);
}
}
function createDocumentObject ()
{
var Dom = new activeXObject('MSXML2.FreeThreadedDOMDocument');
Dom.async = false;
Dom.resolveExternals = true;
Dom.validateOnParse = false;
Dom.preserceWhiteSpace = true;
Return Dom;
}
</script>
</head>
<body>
</body id='result'onload='displayTransformedXML'>
</html>
AJAX
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<div id="contents">
<title>webservice using Ajax</title>
<h1>TITLE</h1>
<hr>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function createQueryString () {
var input = document.getElementById("INPUT").value;
var queryString = "send=" + input;
return queryString;
}
function startRequest() {
var input = document.getElementById("INPUT").value;
createXMLHttpRequest()
var URLString ="webserviceURL.php?";
URLString = URLString + createQueryString ();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open ("GET", URLString, true);
xmlHttp.send(null);
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
var output = document.getElementById("OUTPUT");
output.innerHTML = xmlHttp.responseText;;
}
}
}
</script>
</head>
<body>
<form action="#">
<select id="INPUT" class="list" onchange="startRequest();">
<option Value="EMPTY">Select Species</option>
<option value="VALUE">TEXT</option>
</select>
</form>
<div id="OUTPUT"></div>
</body>
</html>
page_revision: 25, last_edited: 1258228785|%e %b %Y, %H:%M %Z (%O ago)
