Homework: XML Exercise

1. Objectives
• Become familiar with the DOM paradigm;
• Use an existing XML parser;
• Transform the content of an XML document into an HTML page.
2. Description
You are required to write a HTML/JavaScript program, which takes the URL
of an XML document containing Cable Network company information,
parses the XML file, and extracts the list of cable networks, displaying them
in a table. The JavaScript program will be embedded in an HTML file so that
it can be executed within a browser.
• Your program should display a text box to enter the XML file name as
shown below on Figure 1. On clicking the “Submit Query” button,
your program should display the table as shown below, Figure 2. If the
text box is left empty and Submit Query is clicked, an appropriate
error message must be shown.
!
Figure 1: Initial Page
• Once the XML file downloads, a JavaScript function within the HTML
file parses the XML document that was passed as an input to the
popped up window.
• After parsing the XML document, a table should be displayed
!1
consisting of the data for all Cable Networks companies that are
contained in the XML file. For example, given the following XML
document:
http://cs-server.usc.edu:45678/hw/hw4/networklist.xml
the table below should be displayed:
!
Figure 2: Table containing stocks from networklist.xml
Here is a version of the networklist.xml file containing the data that is
displayed above:
<?xml version="1.0"?
<Workbook
<Table
<Header
<DataNetwork</Data
<DataOwner</Data
<DataFeeds</Data
<DataNotes</Data
<DataHomePage</Data
<DataLogo</Data
</Header
<Row
<NetworkAMC</Network
<OwnerAMC Networks</Owner
<Feeds
<FeedAMC East</Feed
<FeedAMC On Demand</Feed
</Feeds
<Notes formerly American Movie Classics (English) and (Spanish) audio feed </
Notes
<HomePagehttp://www.amctv.com/</HomePage
!2
<Logohttp://cs-server.usc.edu:45678/hw/hw4/AMC_logo_2013.png</Logo
</Row
<Row
<NetworkBravo</Network
<OwnerNBC Universal</Owner
<Feeds
<FeedBravo East</Feed
<FeedBravo West</Feed
<FeedBravo On Demand</Feed
</Feeds
<Notes (English) and (Spanish) audio feed </Notes
<HomePagehttp://www.bravotv.com/</HomePage
<Logohttp://cs-server.usc.edu:45678/hw/hw4/bravo.png</Logo
</Row
<Row
<NetworkComedy Central</Network
<OwnerViacom Media Networks</Owner
<Feeds
<FeedComedy Central East</Feed
<FeedComedy Central West</Feed
<FeedComedy Central On Demand</Feed
</Feeds
<Notes A product of the merger of Viacom's HA! TV Comedy Network and The
Comedy Channel, owned by Time Warner. (English) and (Spanish) audio feed</
Notes
<HomePagehttp://cc.com/</HomePage
<Logohttp://cs-server.usc.edu:45678/hw/hw4/ComedyCentral.png</Logo
</Row
<Row. . .</Row
<Row. . .</Row
<Row. . .</Row
<Row. . .</Row
</Table
</Workbook
3. Error Handling
In case of a parsing error, your program should show an alert box indicating
an error was detected. For example if you try to load the incorrectly
formatted XML file:
http://cs-server.usc.edu:45678/hw/hw4/invalid.xml
then you should show an alert box if the XML file is not valid, as in the
following figure:
!3
!
Figure 3: Error generated from invalid.xml in Firefox
Another error condition that should be checked for is an XML file
containing NO cable network companies. An example of an XML files
which does not contain company entries:
<?xml version="1.0"?
<Workbook
<Table
<Header
<DataNetwork</Data
<DataOwner</Data
<DataFeeds</Data
<DataNotes</Data
<DataHomePage</Data
<DataLogo</Data
</Header
</Table
</Workbook
In addition, you program should handle the case when the XML file does not
exist. A proper message should be displayed.
The schema of the input XML files won’t change. We won’t test the case
where the order of tags is changed or one of the tags is missed. In other
words, every Row always contains the sub-tags: Network, Owner, Feeds,
Notes, HomePage, and Logo in the “same” given order. Note that inside the
Feeds tag, there may be ZERO or more Feed tags.
If the value of a tag is empty, you should display a blank cell or N.A.
No other error conditions need be checked. In all cases if an error is found
your program should show an alert box indicating the error was detected.
4. Hints
• Step 1: Writing Your HTML/JavaScript program - Using the DOM
Parser
!4
Here's how you could use the Microsoft DOM API and the Mozilla
DOM API (used in Firefox) to load and parse an XML document into
a DOM tree, and then use the DOM API to extract information from
that document.
<script type="text/javascript"
var xmlDoc;
function loadXML(url) {
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",url,false); //open, send, responseXML are
xmlhttp.send(); //properties of XMLHTTPRequest
xmlDoc=xmlhttp.responseXML;
return xmlDoc;
}
// ....... processing the document goes here
</script
Now you can generate the HTML table from the DOM tree. You can
assume that every xml file will have identical tag names. However,
the company entries may occur in any order.
Your task is to write a program that transforms this type of XML file
into the table as shown above.
For example you can access the child nodes of the documents as
follows:
footb = xmlDoc.documentElement.childNodes;
Note that unlike the Java-based DOM, which provides methods such
as getChildNodes( ) and getNodeType( ) that return respectively a
!5
node list of children of a current node and the type of a node, with the
DOM you have to access the element properties directly, as in:
footbNodeList = footb.item(i).childNodes;
if (footbNodeList.item(j).nodeType == ELEMENT_NODE)
Below is the link to the web page that demonstrates how to handle
white spaces in Mozilla:
http://developer.mozilla.org/en/docs/Whitespace_in_the_DOM
• Step 2: Display the Resulting HTML Document
You should use the DOM document.write method to output the
required HTML.
• Step 3: Use JavaScript control syntax
The only program control statements that you will need to use for this
exercise are the “if” and the “for” statements. The syntax of both
statements is practically identical to the syntax of the corresponding
statement in the C, C++ and Java languages, as in:
if (footbNodeList.item(j).nodeName=="Logo") {
// do stuff
}
for (j=0;j<footbNodeList.length;j++) {
// do more stuff
}
Please make a note of the following issue:
Cross-Site Scripting (XSS):
JavaScript cannot call the resources from another domain. This is called
cross side scripting which is not allowed in browsers. Therefore, you must
!6
put your XML files and your script in the same domain. Please make sure,
when you are testing your implementation, to place both the HTML file and
the XML file on your local machine IN THE SAME FOLDER. The files can
be copied from here:
http://cs-server.usc.edu:45678/hw/hw4/invalid.xml
http://cs-server.usc.edu:45678/hw/hw4/networklist.xml
Window.open() method must be used to pop up a new window which would
display the final widget.
Image files can be either local or remote, as these files do not exhibit the
cross-site scripting issue.
USC Disclaimer:
You should avoid displaying the USC disclaimer in your pages. Otherwise,
this will result in a 0.5 point penalty.
Scrollable Window:
The popup window should be scrollable so the user can read all records
listed in the window.
6. Material You Need to Submit
On your course homework page, your link for this homework should go to a
page that looks like the one displayed in the Figure on page 1. This page
should include your entire JavaScript/HTML/CSS program in a single
file. Also you should submit your source code electronically to the csci571
account so that it can be graded and compared to all other students' code via
the MOSS code comparison tool. If your submission is composed of
multiple files, 3 points will be deducted.
!7