JavaScript and XML | JavaScript: The Definitive Guide, Fifth Edition | WebReference

JavaScript and XML | JavaScript: The Definitive Guide, Fifth Edition


JavaScript and XML

By  David Flanagan

The most important feature of the Ajax web application architecture is its ability to script HTTP with the XMLHttpRequest object, which was covered in Chapter 20. The X in "Ajax" stands for XML, however, and for many web applications, Ajax's use of XML-formatted data is its second most important feature.

This chapter explains how to use JavaScript to work with XML data. It starts by demonstrating techniques for obtaining XML data: loading it from the network, parsing it from a string, and obtaining it from XML data islands within an HTML document. After this discussion of obtaining XML data, the chapter explains basic techniques for working with this data. It covers use of the W3C DOM API, transforming XML data with XSL stylesheets, querying XML data with XPath expressions, and serializing XML data back to string form.

This coverage of basic XML techniques is followed by two sections that demonstrate applications of those techniques. First, you'll see how it is possible to define HTML templates and automatically expand them, using the DOM and XPath, with data from an XML document. Second, you'll see how to write a web services client in JavaScript using the XML techniques from this chapter.

Finally, the chapter concludes with a brief introduction to E4X, which is a powerful extension to the core JavaScript language for working with XML.

21.1 Obtaining XML Documents

Chapter 20 showed how to use the XMLHttpRequest object to obtain an XML document from a web server. When the request is complete, the responseXML property of the XMLHttpRequest object refers to a Document object that is the parsed representation of the XML document. This is not the only way to obtain an XML Document object, however. The subsections that follow show how you can create an empty XML document, load an XML document from a URL without using XMLHttpRequest, parse an XML document from a string, and obtain an XML document from an XML data island.

As with many advanced client-side JavaScript features, the techniques for obtaining XML data are usually browser-specific. The following subsections define utility functions that work in both Internet Explorer (IE) and Firefox.

21.1.1 Creating a New Document

You can create an empty (except for an optional root element) XML Document in Firefox and related browsers with the DOM Level 2 methoddocument.implementation.createDocument(). You can accomplish a similar thing in IE with the ActiveX object named MSXML2.DOMDocument. Example 21-1 defines anXML.newDocument() utility function that hides the differences between these two approaches. An empty XML document isn't useful by itself, but creating one is the first step of the document loading and parsing techniques that are shown in the examples that follow this one.

Example 21-1. Creating an empty XML document