These are examples from www.w3schools.com

Viewing XML Files
 

  • View a simple XML file (note.xml)

    <?xml version="1.0" encoding="ISO-8859-1" ?> 

  • - <!--  Edited with XML Spy v4.2   --> 
    - <note>
      <to>Tove</to> 
      <from>Jani</from> 
      <heading>Reminder</heading> 
      <body>Don't forget me this weekend!</body> 
      </note>
  • View an XML CD catalog

      <?xml version="1.0" encoding="ISO-8859-1" ?> 

  • - <!--  Edited with XML Spy v4.2   --> 
    - <CATALOG>
    - <CD>
      <TITLE>Empire Burlesque</TITLE> 
      <ARTIST>Bob Dylan</ARTIST> 
      <COUNTRY>USA</COUNTRY> 
      <COMPANY>Columbia</COMPANY> 
      <PRICE>10.90</PRICE> 
      <YEAR>1985</YEAR> 
      </CD>
    - <CD>
      <TITLE>Hide your heart</TITLE> 
      <ARTIST>Bonnie Tyler</ARTIST> 
      <COUNTRY>UK</COUNTRY> 
      <COMPANY>CBS Records</COMPANY> 
      <PRICE>9.90</PRICE> 
      <YEAR>1988</YEAR> 
      </CD>
      </CATALOG>

  • View an XML food menu 

      <?xml version="1.0" encoding="ISO-8859-1" ?> 

  • - <!--  Edited with XML Spy v4.2   --> 
    - <breakfast_menu>
    - <food>
      <name>Belgian Waffles</name> 
      <price>$5.95</price> 
      <description>two of our famous Belgian Waffles with plenty of real maple syrup</description> 
      <calories>650</calories> 
      </food>
    - <food>
      <name>Strawberry Belgian Waffles</name> 
      <price>$7.95</price> 
      <description>light Belgian waffles covered with strawberries and whipped cream</description> 
      <calories>900</calories> 
      </food>
    - <food>
      <name>Berry-Berry Belgian Waffles</name> 
      <price>$8.95</price> 
      <description>light Belgian waffles covered with an assortment of fresh berries and whipped cream</description> 
      <calories>900</calories> 
      </food>
    - <food>
      <name>French Toast</name> 
      <price>$4.50</price> 
      <description>thick slices made from our homemade sourdough bread</description> 
      <calories>600</calories> 
      </food>
    - <food>
      <name>Homestyle Breakfast</name> 
      <price>$6.95</price> 
      <description>two eggs, bacon or sausage, toast, and our ever-popular hash browns</description> 
      <calories>950</calories> 
      </food>
      </breakfast_menu>


Viewing XML files with a dtd
 

  • View note.xml with an internal dtd

      <?xml version="1.0" encoding="ISO-8859-1" ?> 

  • - <!--  Edited with XML Spy v4.2   --> 
      <!DOCTYPE note (View Source for full doctype...)> 
    - <note>
      <to>Tove</to> 
      <from>Jani</from> 
      <heading>Reminder</heading> 
      <body>Don't forget me this weekend!</body> 
      </note>

  • View note.xml with an external dtd 

      <?xml version="1.0" encoding="ISO-8859-1" ?> 

  • - <!--  Edited with XML Spy v4.2   --> 
      <!DOCTYPE note (View Source for full doctype...)> 
    - <note>
      <to>Tove</to> 
      <from>Jani</from> 
      <heading>Reminder</heading> 
      <body>Don't forget me this weekend!</body> 
      </note>


Displaying using JavaScript
 

  • Format the note.xml file with JavaScript 

    <html>

  • <head>

    <script type="text/javascript"
    for="window" event="onload">

    var xmlDoc=new ActiveXObject("Microsoft.XMLDOM")
    xmlDoc.async="false"
    xmlDoc.load("xml_note.xml")

    nodes=xmlDoc.documentElement.childNodes
    to.innerText=    nodes.item(0).text
    from.innerText=  nodes.item(1).text
    header.innerText=nodes.item(2).text
    body.innerText=  nodes.item(3).text
    </script>

    <title>HTML using XML data</title>
    </head>
    <body bgcolor="yellow">

    <h1>W3Schools.com Internal Note</h1>

    <b>To: </b>
    <span id="to"> </span>
    <br />
    <b>From: </b>
    <span id="from"></span>
    <hr>
    <b><span id="header"></span></b>
    <hr>
    <span id="body"></span>

    </body>
    </html>
     
     


XML and CSS
 

  • View the CSS file for the catalogue.xml
    CATALOG

  • {
    background-color: #ffffff;
    width: 100%;
    }
    CD
    {
    display: block;
    margin-bottom: 30pt;
    margin-left: 0;
    }
    TITLE
    {
    color: #FF0000;
    font-size: 20pt;
    }
    ARTIST
    {
    color: #0000FF;
    font-size: 20pt;
    }
    COUNTRY,PRICE,YEAR,COMPANY
    {
    Display: block;
    color: #000000;
    margin-left: 20pt;
    }

XML and XSL
 

  • View the  XSL stylesheet for the food menu.xml

     
    <?xml version="1.0" encoding="ISO-8859-1" ?> 

  • - <!--  Edited with XML Spy v4.2   --> 
    - <HTML xmlns:xsl="http://www.w3.org/TR/WD-xsl">
    - <BODY STYLE="font-family:Arial, helvetica, sans-serif; font-size:12pt; background-color:#EEEEEE">
    - <xsl:for-each select="breakfast_menu/food">
    - <DIV STYLE="background-color:teal; color:white; padding:4px">
    - <SPAN STYLE="font-weight:bold; color:white">
      <xsl:value-of select="name" /> 
      </SPAN>
      - 
      <xsl:value-of select="price" /> 
      </DIV>
    - <DIV STYLE="margin-left:20px; margin-bottom:1em; font-size:10pt">
      <xsl:value-of select="description" /> 
    - <SPAN STYLE="font-style:italic">
      ( 
      <xsl:value-of select="calories" /> 
      calories per serving) 
      </SPAN>
      </DIV>
      </xsl:for-each>
      </BODY>
      </HTML>

Data Binding
 

  • Bind the cd_catalog.xml  to an HTML table
    <html>

  • <body>

    <xml id="cdcat" src="cd_catalog.xml"></xml>

    <table border="1" datasrc="#cdcat">

    <tr>
    <td><span datafld="ARTIST"></span></td>
    <td><span datafld="TITLE"></span></td>
    </tr>

    </table>

    </body>
    </html>
     

  • Add <thead>, <tfoot>, <tbody> elements 

    <html>

  • <body>

    <xml id="cdcat" src="cd_catalog.xml"></xml>

    <table border="1" datasrc="#cdcat">

    <thead>
    <tr><th>Artist</th><th>Title</th></tr>
    </thead>

    <tfoot>
    <tr><th colspan="2">This is my CD collection</th></tr>
    </tfoot>

    <tbody>
    <tr>
    <td><span datafld="artist"></span></td>
    <td><span datafld="title"></span></td>
    </tr>
    </tbody>

    </table>

    </body>
    </html>
     
     


Database Output

View XML output from a database 

Displayed as HTML
 

  • See how the CD catalog can be displayed inside HTML elements

    <html>

  • <body>

    <xml src="cd_catalog.xml" id="xmldso" async="false"></xml>

    <br />Title:
    <span datasrc="#xmldso" datafld="TITLE"></span>
    <br />Artist:
    <span datasrc="#xmldso" datafld="ARTIST"></span>
    <br />Year:
    <span datasrc="#xmldso" datafld="YEAR"></span>

    </body>
    </html>
     
     

  • See how the CD catalog can be displayed inside an HTML table

    <html>

  • <body>
    <xml
    src="cd_catalog.xml"
    id="xmldso"
    async="false">
    </xml>

    <table
    datasrc="#xmldso"
    width="100%"
    border="1">

    <thead>
    <th>Title</th>
    <th>Artist</th>
    <th>Year</th>
    </thead>

    <tr align="left">
    <td><span datafld="TITLE"></span></td>
    <td><span datafld="ARTIST"></span></td>
    <td><span datafld="YEAR"></span></td>
    </tr>
    </table>

    </body>
    </html>
     
     

  • See how to navigate the CD catalog

    <html>

  • <head>
    <script type="text/javascript">
    function movenext()
    {
    x=xmldso.recordset
    if (x.absoluteposition < x.recordcount)
     {
     x.movenext()
     }
    }
    function moveprevious()
    {
    x=xmldso.recordset
    if (x.absoluteposition > 1)
     {
     x.moveprevious()
     }
    }
    </script>
    </head>

    <body>
    <xml src="cd_catalog.xml" id="xmldso" async="false"></xml>

    <p>
    Title:
    <span datasrc="#xmldso" datafld="TITLE"></span>
    <br />Artist:
    <span datasrc="#xmldso" datafld="ARTIST"></span>
    <br />Year:
    <span datasrc="#xmldso" datafld="YEAR"></span>
    </p>
    <p>
    <input type="button" value="Previous CD"
    onclick="moveprevious()" />
    <input type="button" value="Next CD"
    onclick="movenext()" />
    </p>
    </body>
    </html>
     

Requesting XML data from a server
 
  • Request XML from a server using JavaScript

    <html>

  • <head>
    <script type="text/javascript">
    function getPage()
    {
    var objHTTP = new ActiveXObject("Microsoft.XMLHTTP")
    objHTTP.Open('GET','note.xml',false)
    objHTTP.Send()
    document.all['A1'].innerText= objHTTP.status
    document.all['A2'].innerText= objHTTP.statusText
    document.all['A3'].innerText= objHTTP.responseText
    }
    </script>
    </head>

    <body onload="getPage()">
    <h2>Using the HttpRequest Object</h2>

    <p>
    <b>status:</b>
    <span ID="A1"></span>
    </p>

    <p>
    <b>status text:</b>
    <span ID="A2"></span>
    </p>

    <p>
    <b>response:</b>
    <br><span ID="A3"></span>
    </p>

    </body>
    </html>
     
     

  • Request XML from a server using VBScript

    <html>

  • <head>
    <script type="text/vbscript">
    function getPage()
    set http_obj=createObject("Microsoft.XMLHTTP")
    call http_obj.Open("GET","note.xml",false)
    call http_obj.Send()
    a1.innerText = http_obj.status
    a2.innerText = http_obj.statusText
    a3.innerText = http_obj.responseText
    end function
    </script>
    </head>

    <body onload="getPage()">
    <h2>Using the HttpRequest Object</h2>
    <p>
    <b>status:</b>
    <span ID="a1"></span>
    </p>

    <p>
    <b>status text:</b>
    <span ID="a2"></span>
    </p>

    <p>
    <b>response:</b>
    <br /><span ID="a3"></span>
    </p>

    </body>
    </html>
     
     

  • Send a request to the server

    <html>

  • <head>
    <script type="text/javascript">
    function search()
    {
    var parser=new ActiveXObject("microsoft.xmldom")
    parser.async="false"
    parser.load("xml_send.asp?query=" + query.value)
    nodes = parser.documentElement.childNodes
    answer_text.innerHTML=nodes.item(0).text
    answer_xml.value=parser.xml
    }
    </script>
    </head>

    <body>

    <h2>
    Sending a query to the server
    and receiving the answer as XML:
    </h2>

    <p>
    <b>Query: </b>
    <input type="text"
    name="query" value="W3Schools">
    <input type="button"
    value="Send to Server" onClick="search()">
    </p>

    <p>
    <b>Answer from server is:</b><br>
    <span id="answer_text"></span>
    </p>

    <p>
    <b>XML from server is:</b><br>
    <textarea id="answer_xml"
    cols="75" lines="10" rows="1">
     

  • Communicating with a server using XML 

    <html>

  • <head>
    <script type="text/javascript">
    function search()
    {
    var parser=new ActiveXObject("microsoft.xmldom")
    parser.async="false"
    parser.load("tryxml_send.asp?query=" + query.value)
    nodes = parser.documentElement.childNodes
    answer_text.innerHTML=nodes.item(0).text
    answer_xml.value=parser.xml
    }
    </script>
    </head>

    <body>

    <h2>
    Sending a query to the server
    and receiving the answer as XML:
    </h2>

    <p>
    <b>Query: </b>
    <input type="text"
    name="query" value="How Old">
    <input type="button"
    value="Send to Server" onClick="search()">
    </p>

    <p>
    <b>Answer from server is:</b>
    <span id="answer_text"></span>
    </p>

    <p>
    <b>XML from server is:</b><br>
    <textarea id="answer_xml"
    cols="80" lines="10" rows="1">