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.
<... ...="..."></...>
h1
, img
) and attributes (id
/class
on all elements, src
/alt
on img
tag)<?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:
note
)to
, from
, subject
book
, title
, author
<bloop bleep="flibbetygibbet">quirkleblat</bloop>
new Ajax.Request( "url", { method: "get", onSuccess: functionName } ); ... function functionName(ajax) { do something with ajax.responseXML; }
ajax.responseText
still contains XML code, but in plain textajax.responseXML
is a pre-parsed DOM object representing the XML file (more useful)responseXML
object, using DOM methods and propertiesAll of 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
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");
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;
<?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>
id
s or class
es to use to get specific nodesfirstChild
/nextSibling
properties are unreliablegetElementsByTagName
:
node.getElementsByTagName("tagName")
"book"
, "subject"
, etc.)node.getAttribute("attributeName")
category
, lang
)childElements
, siblings
, next
/previous
, etc.
// 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); } }
ajax.responseText
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: