javascript

CHAPTER 10 ■ SCRIPTING BOM
434
var div = createElem("div", {className: "scroller", id: "s2"}, [
createElem("div", {className: "wrapper"}),
createElem("div", {className: "left arrow sprite"}),
createElem("div", {className: "right arrow sprite"})]);
div.firstChild.innerHTML = req.responseText;
document.body.appendChild(div);
}
getData("data/s3.xml", parseXML);
}
function parseXML(req) {
prep();
}
An XML response differs from an HTML one in that it is a Document node containing Element and
Text nodes rather than a string of plain text. So you query XML data the same way as a DOM tree. Yup,
with the methods we covered in Chapter 7.
So as you might guess, the DOM tree representing data/s3.xml isn’t in
XMLHttpRequest.responseText. That value is a string not an object. Rather, the DOM tree for our XML is
in XMLHttpRequest.responseXML. So after we make sure XMLHttpRequest.status is either 200 or 304, same
as we did for HTML, we’ll save the DOM tree for our XML to a local variable named domTree.
function parseXML(req) {
if (req.status === 200 || req.status === 304) {
var domTree = req.responseXML;
}
prep();
}
Note that if you are testing this script on your computer, which is to say loading URLs with the
file:// protocol, there obviously will not be an http:// status code. So XMLHttpRequest.status will
always be 0, no matter what. With this in mind, if you are testing the script on your computer, you must
replace 200 or 304 with 0. Otherwise, the if block will never run!
function parseXML(req) {
if (req.status === 0 || req.status === 304) {
var domTree = req.responseXML;
}
prep();
}
Now we want to save the nine Element nodes to a local variable named elements. Fetch
those as if they were or elements—with Document.getElementsByTagName(), which we covered
in Chapter 7:
function parseXML(req) {
if (req.status === 200 || req.status === 304) {
var domTree = req.responseXML;
var elements = domTree.getElementsByTagName("shoe");
}
prep();
}
Now for any of those elements, we can query the Text node in a child like so:
elements[i].getElementsByTagName("href")[0].firstChild.data