Extensible Markup Language (XML)

CSE 190 M (Web Programming), Spring 2008

University of Washington

Except where otherwise noted, the contents of this presentation are © Copyright 2008 Marty Stepp and Jessica Miller and are licensed under the Creative Commons Attribution 2.5 License.

Valid XHTML 1.0 Strict Valid CSS!

What is XML?

An example XML file

<?xml version="1.0" encoding="UTF-8"?>
<note>
	<to>Tove</to>
	<from>Jani</from>
	<subject>Reminder</subject>
	<message language="english">
		Don't forget me this weekend!
	</message>
</note>

XML syntax:

What tags are legal in XML?

Schemas

Uses of XML

Pros and cons of XML

Fetching XML using AJAX (template)

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

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

Using XML data in a web page

Recall: Javascript XML (XHTML) DOM

All of the DOM properties and methods we already know can be used on XML nodes:

XML DOM tree structure

node tree

Analyzing a fetched XML file using DOM

Assume the following XML file is returned via an Ajax request:

<?xml version="1.0" encoding="UTF-8"?>
<foo bloop="bleep">
	<bar/>
	<baz><quux/></baz>
	<baz><xyzzy/></baz>
</foo>

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

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

// same
var bar = foo.getElementsByTagName("bar")[0];

// array of length 2
var all_bazzes = foo.getElementsByTagName("baz");

// string "bleep"
var bloop = foo.getAttribute("bloop");

Recall: Pitfalls of the DOM

Using the same file:

<?xml version="1.0" encoding="UTF-8"?>
<foo bloop="bleep">
	<bar/>
	<baz><quux/></baz>
	<baz><xyzzy/></baz>
</foo>

We are reminded of some pitfalls of the DOM:

// works - XML prolog is removed from document tree
var foo = ajax.responseXML.firstChild;

// WRONG - just a text node with whitespace!
var bar = foo.firstChild;

// works
var first_baz = foo.getElementsByTagName("baz")[0];

// WRONG - just a text node with whitespace!
var second_baz = first_baz.nextSibling;

// works - why?
var xyzzy = second_baz.firstChild;

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 the node tree

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") {
		var title = books[i].getElementsByTagName("title")[0].textContent;
		var author = books[i].getElementsByTagName("author")[0].textContent;
		
		// make an XHTML <p> tag based on the book's XML data
		var p = document.createElement("p");
		p.textContent = title + ", by " + author;
		document.body.appendChild(p);
	}
}

A historical interlude: why XHTML?

Why XML in AJAX?

Practice problem: 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