Web Programming Step by Step

Lecture 19
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!

The bad way to store Aja data

My note:
BEGIN
	TO: Tove
	FROM: Jani
	SUBJECT: Reminder
	MESSAGE (english):
		Hey there,
		Don't forget to call me this weekend!
END

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