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"?>
	<message language="english">
		Don't forget me this weekend!

XML syntax:

What tags are legal in XML?


Uses of XML

Pros and cons of XML

Fetching XML using AJAX (template)

	new Ajax.Request(
			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">

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">

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"?>
	<book category="cooking">
		<title lang="en">Everyday Italian</title>
		<author>Giada De Laurentiis</author>
	<book category="computers">
		<title lang="en">XQuery Kick Start</title>
		<author>James McGovern</author>
	<book category="children">
		<title lang="en">Harry Potter</title>
		<author>J K. Rowling</author>
	<book category="computers">
		<title lang="en">Learning XML</title>
		<author>Erik T. Ray</author>

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;

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