Ajax Bible

2017-07-07 02:10:07

As discussed in Chapter 8, a browser sees an XML document as a tree of nodes, and that’s important to understand if you want to work with XML in Javascript. For example, take a look at this simple XML document:

<?xml version="1.0" ?> <document> <greeting> Welcome to XML </greeting> <info> This is an XML document. </info> </document>

In this case, the <document> node has two child nodes, the <greeting> and <info> nodes. These nodes are child nodes of the <document> node, and sibling nodes of each other. Both the <greeting> and <info> elements themselves have one child node: a text node that holds character data. In terms of a tree of nodes, this is what this document looks like:

<document> | ---------------------------------- | | <greeting> <info> | | Welcome to XML This is an XML document.

JavaScript has built-in properties you can use to work with the nodes in XML documents like the one that’s returned in the XMLHTTPRequest object’s responseXML property. JavaScript’s built-in properties are listed in Chapter 8, but to refresh your memory, they are

attributes: Attributes by this node

childNodes: Array of child nodes

documentElement: The document element

firstChild: First child node

lastChild: Last child node

localName: Local name of the node (without namespaces)

name: Name of the node

nextSibling: Next sibling node

nodeName: Name of the node

nodeType: Node type

nodeValue: Value of the node

previousSibling: Previous sibling node

You’ll see how to use these properties in JavaScript later in this chapter. Note in particular that the nodeType property holds the type of a node, which can be any of the following:

1 Element

2 Attribute

3 Text node

4 CDATA (XML character data) section

5 XML entity reference

6 XML entity node

7 XML processing instruction

8 XML comment

9 XML document node

10 XML Document Type Definition (DTD)

11 XML document fragment

12 XML Notation

It’s time to start working with some code. Say, for example, that you wanted to start by loading an XML document into a JavaScript object, creating an object corresponding to the document element of the XML document. All the data in the XML document is accessible from the document element, because the document element contains all the data in the document (you can use the firstChild, childNodes, lastChild, and other properties on the document element to access the data in the document).

So how do you load an XML document into JavaScript and get an object for the document element? Take a look at documentElement.html, which appears in Figure 9.1.

Figure 9.1: The documentElement.html application

This application reads in event.xml and creates an object corresponding to event.xml’s document element when you click the button, as shown in Figure 9.2.

Figure 9.2: The documentElement.html application at work

This application gives you your formal start in handling XML with Ajax. Start by creating the button you see in Figure 9.1, and the <div> element in which to display the results:

<body> <h1>Getting the Document Element</h1> <form> <input type = "button" value = "Get the document element" onclick = "getDocumentElement()"> </form> <div width =100 height=100> The result will appear here. </div> </body>

The button is tied to a JavaScript function named getDocumentElement, which starts by creating an XMLHttpRequest object:

If the XMLHttpRequest object was created, you can download event.xml and get its XML from the XMLHttpRequest object’s responseXML property as an XML document object:

To get the document element object, use the document object’s documentElement property:

If the document element object was created, you can notify the user of that fact:

And that completes the example-you’ve grabbed the document element. Now how about actually doing something with that element?

Категории