XML

Let's start by looking at a quick example. This link will open up an XML file directly (ex1.xml).

The code for this XML file is:

<?xml version="1.0"?>
<COURSE>
<DEPT>CIS</DEPT>
<NUMBER>380</NUMBER>
<SECTION>01</SECTION>
<INSTRUCTOR>John Avitabile</INSTRUCTOR>
</COURSE>

Here's a slightly more complex example. The file is ex2.xml.

The code for this XML file is:

<?xml version="1.0"?>
<LOAD>
<COURSE>
<DEPT>CIS</DEPT>
<NUMBER>380</NUMBER>
<SECTION>01</SECTION>
<INSTRUCTOR>John Avitabile</INSTRUCTOR>
</COURSE>
<COURSE>
<DEPT>CIS</DEPT>
<NUMBER>380</NUMBER>
<SECTION>E2</SECTION>
<INSTRUCTOR>John Avitabile</INSTRUCTOR>
</COURSE>
<COURSE>
<DEPT>CIS</DEPT>
<NUMBER>413</NUMBER>
<SECTION>E1</SECTION>
<INSTRUCTOR>John Avitabile</INSTRUCTOR>
</COURSE>
</LOAD>

As you can see, Internet Explorer "understands" that how an XML file should be displayed.

Of course these first two examples just list the content of the XML document. The next example will have an HTML file "read" the contents of the first XML file, and display it in a variety of ways. The code for this example is:

<HTML>
<HEAD>
<TITLE>Example 2</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
      var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.3.0");
      xmlDoc.load("ex1.xml");

      function loadDoc()
        {
        if (xmlDoc.readyState == "4")
          start()
        else
          window.setTimeout("loadDoc()", 1000);
        }

      function start()
      {
        var rootElem = xmlDoc.documentElement;
        var classs = rootElem.childNodes.item(0).text;
        var section = rootElem.childNodes.item(1).text;
        var teacher = rootElem.childNodes.item(2).text;
        alert(classs + " section " + section + " taught by " + teacher);
        document.writeln("The data is: <P>");
        document.writeln(classs + " section " + section);
        document.writeln(" taught by " + teacher);
        document.writeln("<P> As a table:");
        document.writeln("<TABLE BORDER=2> <TR>");
        document.writeln("<TD>"+ classs + "</TD>");
        document.writeln("<TD>" + section + "</TD>");
        document.writeln("<TD>" + teacher + "</TD>");
        document.writeln("</TR> </TABLE>");
       }
    </SCRIPT>

    <SCRIPT>
    loadDoc();
    </SCRIPT>

</HEAD>
<BODY>
</BODY>
</HTML>

The next example will use the slightly more elaborate ex2.htm file.

<HTML>
<HEAD>
<TITLE>Example 3</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
      var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.3.0");
      xmlDoc.load("ex2.xml");

      function loadDoc()
      {
        if (xmlDoc.readyState == "4")
          start()
        else
          window.setTimeout("loadDoc()", 1000);
      }

      function start()
      {
        var rootElem = xmlDoc.documentElement;
        document.writeln("<TABLE BORDER=2>");
        document.writeln("<TR><TH>Class</TH><TH>Section</TH>");
        document.writeln("<TH>Instructor</TH></TR>");
        for (i = 0; i < rootElem.childNodes.length; i++)
        {
           var course = rootElem.childNodes.item(i);
           var classs = course.childNodes.item(0).text;
           var section = course.childNodes.item(1).text;
           var teacher = course.childNodes.item(2).text;
           document.writeln("<TR>");
           document.writeln("<TD>"+ classs + "</TD>");
           document.writeln("<TD>" + section + "</TD>");
           document.writeln("<TD>" + teacher + "</TD>");
           document.writeln("</TR>");
         }
         document.writeln("</TABLE>");
       }
    </SCRIPT>

    <SCRIPT>
    loadDoc();
    </SCRIPT>

</HEAD>
<BODY>
</BODY>
</HTML>

And this example does it in a more generic way...

<HTML>
<HEAD>
<TITLE>Example 4</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
      var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.3.0");
      xmlDoc.load("ex2.xml");
      var fieldDoc = = new ActiveXObject("Msxml2.DOMDocument.3.0");
      fieldDoc.load("ex3.xml");

      function loadDoc()
      {
        if (xmlDoc.readyState == "4" && fieldDoc.readyState == "4")
          start()
        else
          window.setTimeout("loadDoc()", 1000);
      }

      function start()
      {
        var rootElem = xmlDoc.documentElement;
        var rootField = fieldDoc.documentElement;
        document.writeln("<TABLE BORDER=2>");
        document.writeln("<TR>");
        for (i = 0; i < rootField.childNodes.length; i++)
        {
          var f1 = rootField.childNodes.item(i).text;
          document.writeln("<TH>" + f1 + "</TH>");
        }
        document.writeln("</TR>");
        for (i = 0; i < rootElem.childNodes.length; i++)
        {
           var course = rootElem.childNodes.item(i);
           document.writeln("<TR>");
           for (j = 0; j < course.childNodes.length; j++)
           {
              var x = course.childNodes.item(j).text;
              document.writeln("<TD>"+ x + "</TD>");
           }
           document.writeln("</TR>");
         }
         document.writeln("</TABLE>");
       }
    </SCRIPT>

    <SCRIPT>
    loadDoc();
    </SCRIPT>

</HEAD>
<BODY>
</BODY>
</HTML>

This is what the file ex3.xml looks like:

<?xml version="1.0"?>
<FIELDS>
<FIELD1>Class</FIELD1>
<FIELD2>Section</FIELD2>
<FIELD3>Instructor</FIELD3>
</FIELDS>

And this example does it with just one XML file..

<HTML>
<HEAD>
<TITLE>Example 5</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
      var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.3.0");
      xmlDoc.load("ex2.xml");

      function loadDoc()
        {
        if (xmlDoc.readyState == "4")
          start()
        else
          window.setTimeout("loadDoc()", 1000);
        }

      function start()
      {
        var rootElem = xmlDoc.documentElement;
        document.writeln("<TABLE BORDER=2>");
        document.writeln("<TR>");
        var heading = rootElem.childNodes.item(0);
        for (j = 0; j < heading.childNodes.length; j++)
        {
          var x = heading.childNodes.item(j).nodeName;
          document.writeln("<TH>"+ x + "</TH>");
        }
        document.writeln("</TR>");
        for (i = 0; i < rootElem.childNodes.length; i++)
        {
           var course = rootElem.childNodes.item(i);
           document.writeln("<TR>");
           for (j = 0; j < course.childNodes.length; j++)
           {
             var x = course.childNodes.item(j).text;
             document.writeln("<TD>"+ x + "</TD>");
           }
           document.writeln("</TR>");
         }
         document.writeln("</TABLE>");
       }
    </SCRIPT>

    <SCRIPT>
    loadDoc();
    </SCRIPT>

</HEAD>
<BODY>
</BODY>
</HTML>

Here's another example. This example uses the XML Data Source Object. This time data is loaded one record at a time...

Notice the use of the DIV and SPAN containers.

The SPAN tag has attributes STYLE (sets the look), ID (names the object), DATASRC (the XML DSO object), and DATAFLD (the field).

The STYLE attribute lets you set how text looks. You use key:value pairs. Possible values for key are:

Key Possible value

color blue

font-weight bold

font-style italic

font-size 24

background-color yellow

margin-left 1in

margin-right 1in

border-color red

border-width 8

border-style solid

text-align center

position absolute

left 200

top 100

visibility (hidden or visible)

Useful links about style are http://www.w3.org/TR/WD-css1.html and http://www.w3.org/TR/WD-CSS2/

<HTML>
<HEAD>
<SCRIPT>
function loadDSO()
{
     var xmlDso = xmldso.XMLDocument;
     xmlDso.load("ex2a.xml");
}
</SCRIPT>
</HEAD>
<BODY onLoad="loadDSO();">
    <OBJECT WIDTH="0" HEIGHT="0"
      CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39"
      ID="xmldso">
    </OBJECT>

    <DIV ID="catalog">
      <SPAN STYLE="font-weight:bold">Class: </SPAN>
      <SPAN ID="class" DATASRC=#xmldso DATAFLD="CLASS" STYLE="color:blue">
      </SPAN>
      <BR>

      <SPAN STYLE="font-weight:bold">Section: </SPAN>
      <SPAN ID="section" DATASRC=#xmldso DATAFLD="SECTION" STYLE="color:blue">
      </SPAN>
      <BR>

      <SPAN STYLE="font-weight:bold">Instructor: </SPAN>
      <SPAN ID="instructor" DATASRC=#xmldso DATAFLD="INSTRUCTOR" STYLE="color:blue">
      </SPAN>
      <BR>

</DIV>

    <P>
      <INPUT TYPE=button VALUE="Previous Class"
        ONCLICK="xmldso.recordset.moveprevious()">
      <INPUT TYPE=button VALUE="Next Class"
        ONCLICK="xmldso.recordset.movenext()">

</BODY>
</HTML>

Here's another example. Again, data is loaded into a table...

The THEAD container ensures that there will be only one heading per table. Using the <TR> container would have given you one heading row per record.

Notice that a TABLE can have a DATASRC attribute.

And the DIV container can have a DATAFLD attribute.

<HTML>

<HEAD>
<SCRIPT>
function loadDSO()
{
     var xmlDso = xmldso.XMLDocument;
     xmlDso.load("ex2a.xml");
}
</SCRIPT>
</HEAD>
<BODY onLoad="loadDSO();">
    <OBJECT WIDTH="0" HEIGHT="0"
      CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39"
      ID="xmldso">
    </OBJECT>

<TABLE DATASRC=#xmldso BORDER="1" CELLSPACING="5" CELLPADDING="2">

      <THEAD>
        <TH>Class</TH>
        <TH>Section</TH>
        <TH>Instructor</TH>
      </THEAD>

      <TR ALIGN="center">
        <TD><DIV DATAFLD="CLASS"></TD>
        <TD><DIV DATAFLD="SECTION"></TD>
        <TD><DIV DATAFLD="INSTRUCTOR"></TD>
      </TR>

</TABLE>
</BODY>

</HTML>

Another example (ex8.htm) that uses ex8.xml

<HTML>
<HEAD>
<SCRIPT>
var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.3.0");
xmlDoc.load("ex8.xml");

function getObj(elementID)
{
return document.getElementById(elementID);
}
function showForm()
{
f = getObj("form1");
f.style.visibility = "visible";
}

function showData()
{
d = getObj("data");
f = getObj("form1");
var rootElem = xmlDoc.documentElement;
var match = linearSearch(f, rootElem);
if (match == -1)
{
alert("Sorry, no match");
showForm();
return;
}
var myCourse = rootElem.childNodes.item(match);
makeNodes(myCourse, d);
f.style.visibility = "hidden";
d.style.visibility = "visible";
}

function linearSearch(f, rootElem)
{
var searchSection = f.section.value;
var searchClass = f.course.value;
for (i = 0; i < rootElem.childNodes.length; i++)
{
var course = rootElem.childNodes.item(i);
var thisClass = "";
var thisSection = "";
for (j = 0; j < course.childNodes.length; j++)
{
var nodeText = course.childNodes.item(j).text;
var nodeName = course.childNodes.item(j).nodeName;
if (nodeName == "CLASS") thisClass = nodeText;
if (nodeName == "SECTION") thisSection = nodeText;
}
if (thisSection == searchSection && thisClass == searchClass)
return i;
}
return -1;
}

function makeNodes(myCourse, d)
{
emptyNode(d);
for (i = 0; i < myCourse.childNodes.length; i++)
{
var nodeText = myCourse.childNodes.item(i).text;
var nodeName = myCourse.childNodes.item(i).nodeName;
d.appendChild(document.createTextNode(nodeName + ": " + nodeText));
d.appendChild(document.createElement("p"));
}
d.appendChild(document.createElement("<input type='button' " +
"value='Do Another Search' " +
"onClick='hideData();" +
"showForm()'>"));

}
function hideData()
{
d = getObj("data");
d.style.visibility = "hidden";
}
function getObj(elementID)
{
return document.getElementById(elementID);
}
function emptyNode(theNode)
{
for (i= theNode.childNodes.length - 1; i >=0; i--)
{
theNode.removeChild(theNode.childNodes[i]);
}
}
</SCRIPT>
<style type="text/css">
#form1 { position:absolute; x:0; y:0}
#data { position:absolute; x:0; y:0}
</style>
</HEAD>
<BODY onLoad="showForm();hideData()">
<OBJECT WIDTH="0" HEIGHT="0"
CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39"
ID="xmldso">
</OBJECT>
<FORM id="form1">
Enter course: <INPUT TYPE="text" name="course">
<BR>Enter section:<INPUT TYPE="text" name="section">
<BR><INPUT TYPE="button" VALUE="Find Information"
onClick='showData();'>
</FORM>
<DIV id="data">
<INPUT TYPE="button" VALUE="Do another search"
onClick='hideData();showForm();'>
</DIV>

</BODY>
</HTML>

And a variant on this: ex8a.htm

<HTML>
<HEAD>
<SCRIPT>
var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.3.0");
xmlDoc.load("ex8.xml");

function getObj(elementID)
{
return document.getElementById(elementID);
}
function showForm()
{
f = getObj("form1");
f.style.visibility = "visible";
}

function showData()
{
d = getObj("data");
f = getObj("form1");
var rootElem = xmlDoc.documentElement;
var match = linearSearch(f, rootElem);
makeNodes(match, rootElem, d);
f.style.visibility = "hidden";
d.style.visibility = "visible";
}

function linearSearch(f, rootElem)
{
var searchSection = f.section.value;
var searchClass = f.course.value;
var A = new Array();
var count = 0;
for (i = 0; i < rootElem.childNodes.length; i++)
{
var course = rootElem.childNodes.item(i);
var thisClass = "";
for (j = 0; j < course.childNodes.length; j++)
{
var nodeText = course.childNodes.item(j).text;
var nodeName = course.childNodes.item(j).nodeName;
if (nodeName == "CLASS") thisClass = nodeText;
}
if (thisClass == searchClass)
{
A[count] = i;
count++;
}
}
return A;
}

function makeNodes(match, rootElem, d)
{
emptyNode(d);
for (j = 0; j < match.length; j++)
{
var myCourse = rootElem.childNodes.item(match[j]);
for (i = 0; i < myCourse.childNodes.length; i++)
{
var nodeText = myCourse.childNodes.item(i).text;
var nodeName = myCourse.childNodes.item(i).nodeName;
d.appendChild(document.createTextNode(nodeName + ": " + nodeText));
d.appendChild(document.createElement("p"));
}
}
d.appendChild(document.createElement("<input type='button' " +
"value='Do Another Search' " +
"onClick='hideData();" +
"showForm()'>"));

}
function hideData()
{
d = getObj("data");
d.style.visibility = "hidden";
}
function getObj(elementID)
{
return document.getElementById(elementID);
}
function emptyNode(theNode)
{
for (i= theNode.childNodes.length - 1; i >=0; i--)
{
theNode.removeChild(theNode.childNodes[i]);
}
}
</SCRIPT>
<style type="text/css">
#form1 { position:absolute; x:0; y:0}
#data { position:absolute; x:0; y:0}
</style>
</HEAD>
<BODY onLoad="showForm();hideData()">

<FORM id="form1">
Enter course: <INPUT TYPE="text" name="course">
<BR>Enter section:<INPUT TYPE="text" name="section">
<BR><INPUT TYPE="button" VALUE="Find Information"
onClick='showData();'>
</FORM>
<DIV id="data">
<INPUT TYPE="button" VALUE="Do another search"
onClick='hideData();showForm();'>
</DIV>

</BODY>
</HTML>

Key	Possible value
color	blue
font-weight	bold
font-style	italic
font-size	24
background-color	yellow
margin-left	1in
margin-right	1in
border-color	red
border-width	8
border-style	solid
text-align	center
position	absolute
left	200
top	100
visibility	(hidden or visible)