XML Application

|  | Search W3Schools : |

HOME | HTML | CSS | XML | JAVASCRIPT | ASP | PHP | SQL | MORE... |  | References | Examples | Forum | About

ADVERTISEMENTS XML Certification Download XML editor Custom Programming |  |

Table of contents

XML Basic
XML HOME
XML Introduction
XML How to use
XML Tree
XML Syntax
XML Elements
XML Attributes
XML Validation
XML Validator
XML Viewing
XML CSS
XML XSLT
XML JavaScript
XML Parser
XML DOM
XML to HTML
XML HTTP Request
XML Application
XML Advanced
XML Namespaces
XML CDATA
XML Encoding
XML Server
XML DOM Advanced
XML Don't
XML Technologies
XML in Real Life
XML Editors
XML Summary
Examples/Quiz
XML Examples
XML Quiz
XML Exam

Selected Reading

Web Statistics
Web Glossary
Web Hosting
Web Quality
W3Schools Tutorials
W3Schools Forum
Helping W3Schools

# XML Application

This chapter demonstrates a small XML application built with HTML and JavaScript

## The XML Example Document

Look at the following XML document ("cd_catalog.xml"), that represents a CD catalog:

    <?xml version="1.0" encoding="ISO-8859-1"?>
    <CATALOG>
      <CD>
        <TITLE>Empire Burlesque</TITLE>
        <ARTIST>Bob Dylan</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Columbia</COMPANY>
        <PRICE>10.90</PRICE>
        <YEAR>1985</YEAR>
      </CD>
    .
    .
    ... more ...
    .

View the full "cd_catalog.xml" file in your browser.

## Load the XML Document

To load the XML document (cd_catalog.xml), we use the same code as we used in the XML Parser chapter:

    var xmlDoc;
    if (window.ActiveXObject)
      {// code for IE
      xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
      }
    else if (document.implementation.createDocument)
      {// code for Firefox, Mozilla, Opera, etc.
      xmlDoc=document.implementation.createDocument("","",null);
      }
    else
      {
      alert('Your browser cannot handle this script');
      }
    xmlDoc.async=false;
    xmlDoc.load("cd_catalog.xml");

After the execution of this code, xmlDoc is an XML DOM object, accessible by JavaScript.

## Display XML Data as an HTML Table

The following code displays an HTML table filled with data from the XML DOM object:

    document.write("<table border='1'>");

    var x=xmlDoc.getElementsByTagName("CD");
    for (var i=0;i<x.length;i++)
    {
    document.write("<tr>");
    document.write("<td>");
    document.write(
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
    document.write("</td>");

    document.write("<td>");
    document.write(
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
    document.write("</td>");
    document.write("</tr>");
    }
    document.write("</table>");

For each CD element in the XML document, a table row is created. Each table row contains two table data cells with ARTIST and TITLE data from the current CD element.

Try it yourself: See how the XML data is displayed inside an HTML table.

## Display XML Data in any HTML Element

XML data can be copied into any HTML element that can display text.

The code below is part of the <head> section of the HTML file. It gets the XML data from the first <CD> element and displays it in the HTML element with the id="show":

    var x=xmlDoc.getElementsByTagName("CD");
    i=0;

    function display()
    {
    artist=
    (x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
    title=
    (x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
    year=
    (x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);

    txt="Artist: "+artist+"<br />Title: "+title+"<br />Year: "+year;

    document.getElementById("show").innerHTML=txt;
    }

The body of the HTML document contains an onload eventattribute that will call the display() function when the page has loaded. It also contains a <div id='show'> element to receive the XML data.

    <body onload="display()">

    <div id='show'></div>

    </body>

Try it yourself: See how the XML data is displayed inside the <div> element.

With the example above, you will only see data from the first CD element in the XML document. To navigate to the next line of data, you have to add some more code.

## Add a Navigation Script

To add navigation to the example above, create two functions called next() and previous():

    function next()
    {
    if (i<x.length-1)
      {
      i++;
      display();
      }
    }

    function previous()
    {
    if (i>0)
      {
      i--;
      display();
      }
    }

The next() function makes sure that nothing is displayed if you already are at the last CD element, and the previous () function makes sure that nothing is displayed if you already are at the first CD element.

The next() and previous() functions are called by clicking next/previous buttons:

    <input type="button" onclick="previous()" value="previous" />
    <input type="button" onclick="next()" value="next" />

Try it yourself: See how you can navigate through the XML records.

## All Together Now

With a little creativity you can create a full application.

If you use what you have learned on this page, and a little imagination, you can easily develop this into a full application.

Try it yourself: See how you can add a little fancy to this application.

For more information about using JavaScript and the XML DOM, visit our XML DOM tutorial.

## Get Your Diploma!

W3Schools' Online Certification Program is the perfect solution for busy professionals who need to balance work, family, and career building.

The HTML Certificate is for developers who want to document their knowledge of HTML, XHTML, and CSS.

The JavaScript Certificate is for developers who want to document their knowledge of JavaScript and the HTML DOM.

The XML Certificate is for developers who want to document their knowledge of XML, XML DOM and XSLT.

The ASP Certificate is for developers who want to document their knowledge of ASP, SQL, and ADO.

The PHP Certificate is for developers who want to document their knowledge of PHP and SQL (MySQL).

WEB HOSTING
Web based charting for ASP.NET
$15 Domain Name Registration Save $20 / year!
Buy UK Domain Names Register Domain Names
Cheap Domain Names Cheap Web Hosting
Best Web Hosting
PHP MySQL Hosting
Top 10 Web Hosting
UK Reseller Hosting
Web Hosting
FREE Web Hosting

WEB BUILDING
Website Templates Flash Templates Website Builder Internet Business Opportunity
Custom Programming
FREE Trial or Demo Web Content Manager Forms,Web Alerts,RSS
Download XML editor
FREE Flash Website
FREE Web Templates

EDUCATION
US Web Design Schools
HTML Certification
JavaScript Certification
XML Certification
PHP Certification
ASP Certification

HOME or Top of Page |  | Printer Friendly
W3Schools is for training only. We do not warrant the correctness of its content. The risk from using it lies entirely with the user. While using this site, you agree to have read and accepted our terms of use and privacy policy. Copyright 1999-2009 by Refsnes Data. All Rights Reserved.