6.7. Using responseXML in your codeYou'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."
|