Except where otherwise noted, the contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller.
<element attribute="value">content</element>
h1
, div
, img
, etc.id
/class
, src
, href
, etc.<?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>
<?xml ... ?>
header tag ("prolog")note
)pro:
con:
to
, from
, subject
book
, title
, author
<?xml version="1.0" encoding="UTF-8"?> <categories> <category>children</category> <category>computers</category> ... </categories>
The DOM properties and methods* we already know can be used on XML nodes:
firstChild
, lastChild
, childNodes
, nextSibling
, previousSibling
, parentNode
nodeName
, nodeType
, nodeValue
, attributes
appendChild
, insertBefore
, removeChild
, replaceChild
getElementsByTagName
, getAttribute
, hasAttributes
, hasChildNodes
innerHTML
in the XML DOM!
* (though not Prototype's, such as up
, down
, ancestors
, childElements
, descendants
, or siblings
)
id
s or class
es to use to get specific nodes
id
and class
are not necessarily defined as attributes in the flavor of XML being readfirstChild
/nextSibling
properties are unreliable
var elms = node.getElementsByTagName("tagName")
node.getAttribute("attributeName")
Procedure:
XMLnode.getElementsByTagName()
XMLelement.getAttribute()
, XMLelement.firstChild.nodeValue
, etc.document.createElement()
, HTMLelement.innerHTML
HTMLelement.appendChild()
new Ajax.Request( "url", { method: "get", onSuccess: functionName } ); ... function functionName(ajax) { do something with ajax.responseXML; }
ajax.responseText
contains the XML data in plain textajax.responseXML
is a pre-parsed XML DOM object<?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]; // ditto var bar = foo.getElementsByTagName("bar")[0]; // array of length 2 var all_bazzes = foo.getElementsByTagName("baz"); // string "bleep" var bloop = foo.getAttribute("bloop");
assignment=hwn
<?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;
<?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>
// 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); } }
animalgame.php
.<node nodeid="id"> <question>question</question> <yes nodeid="id" /> <no nodeid="id" /> </node>
<node nodeid="id"> <answer>answer</answer> </node>
animalgame.php?nodeid=id
nodeid
of 1
to get the first questionQuestions we should ask ourselves:
responseXML
in Firebug