Section 6.7. Using responseXML in your code

6.7. Using responseXML in your code

You've already seen that the responseText property of your request object lets you read the XML that the server responds with. But we don't want a bunch of text that looks like XML; we're DOM experts now, right? Using the responseXML property, you can get the DOM tree for the server's response, and then work with that XML using the DOM.

Even if you don't feel like an expert, you're kicking butt! And by the time you finish this chapter, you'll be even better at the DOM than you are now.

And since the HTML for Katie's Boards report is another DOM tree, we just want to grab values from the XML DOM and stick them in the HTML DOM. Let's see exactly what we need to do:

 The browser puts this DOM tree in the responseXML property of the request object.             totals boards-sold          boots-sold          bindings-sold "1710"            "315" We need to take the values from the XML DOM tree and use them to update the values in the  HTML DOM tree.                       "85" Here's the XML DOM from the Boards server. Here's Katie's web report, with a few of the <span> elements in the DOM tree called out. 

I'm with you so far, but how can we get to those three "sold" elements in the XML? They don't have id attributes like the <span> elements in Katie's HTML.

You can find them with their "tag name"

So far, you've been using getElementById() to find a specific element in an HTML DOM tree. But there's another useful method called getElementsByTagName(). You can use this to find all the elements in a DOM tree with a certain name, like this:

 Get the DOM tree representing the server's XML request. var xmlDoc = request.responseXML; var boardsSoldElements =   xmlDoc.getElementsByTagName("boards-sold"); Now we're working with the DOM! 

This will return an array of all the elements named "boards-sold" in the xmlDoc DOM tree. Then, you can get elements from the list using an index, like this:

 You could also loop through this list using a "for" loop, if you wanted to.    var firstBoardsSoldElement = boardsSoldElements[0]; Remember, JavaScript arrays start at 0, not 1. 

6.7.1. Time to take a shortcut:

 var firstBoardsSoldElement = xmlDoc.getElementsByTagName("boards-sold")[0]; This gets all the elements named "boards-sold"... ...and this returns just the first element from the list. 

If you use asynchronous requests in your JavaScript code, but only send and receive plain text responses, would that be Aja? Or is that the tiger from Aladdin? What if you used the request object synchronously? That would just be Jax, right? But then, that sounds an awful lot like a kid's game, so that doesn't really work. And synchronous requests without using XML leaves you with "Ja", although that sounds more like the first name of that rapper... hmm. Yes, clearly, Ajax is the only name that makes sense, even though it has only a passing connection to what this book is about. Don't tell marketing, though... they say that throwing "Ajax" on the cover means a lot more sales. Oh, and be sure to keep an eye out for next month's featured titles: "Ajax and Ajill: A Nursery Rhyme Love Story," "Ajax Me No Questions, I'll D-H-T-M-L You No Lies," and " How to Have a Great Ajax Life: 20 New Positions for the Adventurous Client/Server Couple."

Frequently asked questions?

Q:	I still don't see what responseXML has to do with any of this.
A:	The browser puts the plain text version of a server's response in the request object 's responseText propertywhether that's a single value, name/value pairs, or the text version of an XML document. But if the server returns XML, and sets a Content-Type response header of "text/xml", the browser creates a DOM tree to represent that XML, and puts a reference to that DOM tree in the request object's responseXML property.
Q:	So if I want to use the DOM to work on the XML, I should use responseXML instead of responseText?
A:	Exactly. There's nothing wrong with getting the XML through responseText, but then you have to deal with parsing the XML yourself... and who wants to do that?
Q:	In the HTML DOM on page 351, you showed id attributes as part of those <span> elements. I thought that the DOM represented attributes separately from elements.
A:	Wow, you're really paying attention to those DOM trees, aren't you? Nice job... you're exactly right. The id attributes on those <span> elements are actually represented in the HTML DOM tree as separate nodes. We broke the rules a bit, though, and showed the id attribute as part of the element name, just to make things a little easier to understand. It's not quite how the DOM does it, but we thought it made our point a lot clearer.
Q:	And there's no difference between an HTML DOM tree and an XML one?
A:	The DOM for the web page represents HTML, and the DOM for the XML represents the server's response. But you work with both DOM trees in the same way, they have the same methods, and you can change both trees easily. Pretty cool, huh?