Web Programming Step by Step

Lecture 18
XML

Reading: 10.3 - 10.4

Except where otherwise noted, the contents of this presentation are Copyright 2010 Marty Stepp and Jessica Miller.

Valid XHTML 1.1 Valid CSS!

What is XML?

Anatomy of an XML file

<?xml version="1.0" encoding="UTF-8"?>  <!-- XML prolog -->
<note>                                  <!-- root element -->
	<to>Tove</to>
	<from>Jani</from>                     <!-- element ("tag") -->
	<subject>Reminder</subject>           <!-- content of element -->
	<message language="english">          <!-- attribute and its value -->
		Don't forget me this weekend!
	</message>
</note>

Uses of XML

Pros and cons of XML

What tags are legal in XML?

Doctypes and Schemas

XML and Ajax

Ajax bleach

XML DOM tree structure

node tree 
<?xml version="1.0" encoding="UTF-8"?>
<categories> 
  <category>children</category> 
  <category>computers</category> 
  ... 
</categories>

Recall: Javascript XML (XHTML) DOM

The DOM properties and methods* we already know can be used on XML nodes:

* (though not Prototype's, such as up, down, ancestors, childElements, or siblings)

Navigating the node tree

Using XML data in a web page

  1. use Ajax to fetch data
  2. use DOM methods to examine XML:
    • XMLnode.getElementsByTagName("tag")
  3. extract the data we need from the XML:
    • XMLelement.getAttribute("name"), XMLelement.firstChild.nodeValue, etc.
  4. create new HTML nodes and populate with extracted data:
    • document.createElement("tag"), HTMLelement.innerHTML
  5. inject newly-created HTML nodes into page
    • HTMLelement.appendChild(element)

Fetching XML using AJAX (template)

	new Ajax.Request("url",
		{
			method: "get",
			onSuccess: functionName
		}
	);
	...

function functionName(ajax) {
	do something with ajax.responseXML;
}

Analyzing a fetched XML file using DOM

<?xml version="1.0" encoding="UTF-8"?>
<employees>
	<lawyer money="5"/>
	<janitor name="Sue"><vacuumcleaner/></janitor>
	<janitor name="Bill">too poor</janitor>
</employees>

We can use DOM properties and methods on ajax.responseXML:

// zeroth element of array of length 1
var employeesTag = ajax.responseXML.getElementsByTagName("employees")[0];

// how much money does the lawyer make?
var lawyerTag = employeesTag.getElementsByTagName("lawyer")[0];
var salary = lawyerTag.getAttribute("money");   // "5"

// array of 2 janitors
var janitorTags = employeesTag.getElementsByTagName("janitor");
var excuse = janitorTags[1].firstChild.nodeValue;  // " too poor "

Analyzing a fetched XML file using DOM (2)

<?xml version="1.0" encoding="UTF-8"?>
<employees>
	<lawyer money="5"/>
	<janitor name="Bill"><vacuumcleaner/></janitor>
	<janitor name="Sue">too poor</janitor>
</employees>

What are the results of the following expressions? 

// zeroth element of array of length 1
var employeesTag = ajax.responseXML.getElementsByTagName("employees")[0];

Larger XML file example

<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
	<book category="cooking">
		<title lang="en">Everyday Italian</title>
		<author>Giada De Laurentiis</author>
		<year>2005</year><price>30.00</price>
	</book>
	<book category="computers">
		<title lang="en">XQuery Kick Start</title>
		<author>James McGovern</author>
		<year>2003</year><price>49.99</price>
	</book>
	<book category="children">
		<title lang="en">Harry Potter</title>
		<author>J K. Rowling</author>
		<year>2005</year><price>29.99</price>
	</book>
	<book category="computers">
		<title lang="en">Learning XML</title>
		<author>Erik T. Ray</author>
		<year>2003</year><price>39.95</price>
	</book>
</bookstore>

Navigating node tree example

// make a paragraph for each book about computers
var books = ajax.responseXML.getElementsByTagName("book");
for (var i = 0; i < books.length; i++) {
	var category = books[i].getAttribute("category");
	if (category == "computers") {
		// extract data from XML
		var title = books[i].getElementsByTagName("title")[0].firstChild.nodeValue;
		var author = books[i].getElementsByTagName("author")[0].firstChild.nodeValue;
		
		// make an XHTML <p> tag containing data from XML
		var p = document.createElement("p");
		p.innerHTML = title + ", by " + author;
		document.body.appendChild(p);
	}
}

Exercise: Late day distribution

A historical interlude: why XHTML?

Exercise: Animal game

The Animal Game

Practice problem: Animal game (cont'd)

Attacking the problem

Questions we should ask ourselves:

Debugging responseXML in Firebug

Firebug Debug Ajax