E4X Adds Direct XML Support to JavaScript

E4X Adds Direct XML Support to JavaScript

he Web has undergone some major changes during past few years. What started purely as static HTML pages now includes dynamic pages with personalization, improved performance, and new technologies such as AJAX, DHTML, XML, CSS, etc. Still, HTML and JavaScript remain the backbone of Web technology today; all this new Web technology and development revolve mainly around them.

JavaScript itself has evolved along with the Web. Its origins trace back to 1995 when Netscape introduced LiveScript?the first programming language to make Web pages interactive?in its Netscape Navigator version 2.0b1 release. Netscape integrated LiveScript into the browser, enabling it to interpret LiveScript commands directly without having to compile code or employ a plug-in to run the code. Later, Netscape renamed LiveScript to JavaScript and in 1996 handed it over to an international standards body called ECMA (European Computer Manufacturers Association). ECMA took responsibility for the subsequent development and standardizing of the language, which it officially renamed ECMAScript, although it remains popularly known as JavaScript (in browsers) and ActionScript (in Macromedia’s Flash player).

Meanwhile, XML has become an integral part of Web development. To best utilize its power, developers must effectively create, navigate, and manipulate XML data. While innovative new programming models are designed specifically for this (e.g., XSLT, XQuery, the DOM), they are unfamiliar to many software developers. At the same time, the learning curves for these technologies are very high, so XML-based projects can require high-priced specialists for both development and maintenance.

Web developers in particular need to do a lot of coding to parse and update XML, especially when they use it with JavaScript because providing cross-browser support requires even more coding. ECMAScript for XML (E4X), a new extension to ECMAScript, eases this process. E4X (ECMA-357 Standard) adds direct support for XML to JavaScript and simplifies XML scripting. Think of it as JavaScript for XML. It is designed to provide a simple, familiar, general-purpose XML programming model that shortens and flattens the XML learning curve by leveraging the existing skills and knowledge of the JavaScript developer.

This article explains E4X and its objective, lays out its usage with syntax and code snippets, and outlines its advantages and limitations.

The Objective of E4X
With E4X, you can define an XML document as a JavaScript object. To quote the E4X specification page:

“E4X adds native XML datatypes to the ECMAScript language, extends the semantics of familiar ECMAScript operators for manipulating XML objects, and adds a small set of new operators for common XML operations, such as searching and filtering. It also adds support for XML literals, namespaces, qualified names, and other mechanisms to facilitate XML processing.”

The following are some of the specific benefits of using E4X:

  1. Simplify the ability of Web developers to use the power of XML by using their existing skills and knowledge, and reusing familiar concepts, operators, and syntax (i.e., E4X makes XML very simple to use.)
  2. Standardize the syntax and semantics of a general-purpose, cross-platform, vendor-neutral set of programming language extensions by adding native XML support in ECMAScript
  3. Reduce code complexity, time to market, and revision cycles
  4. Improve performance and maintainability
  5. Decrease coupling between code and external data (in form of XML)
  6. Integrate well with other languages designed for manipulating XML, such as XPath, XSLT, and XQuery (For example, E4X should be able to invoke complementary languages when additional expressive power is needed without compromising the simplicity of the E4X language itself.)

Understanding the Usage of E4X
Before digging deeper into E4X, see how E4X can make a difference in your XML handling. Table 1 provides examples of two XML parsing approaches: one using DOM, the other E4X.

The format of the sample.xml in Table 1 is as follows:

     List of authors and Articles               Rahul Gupta                    Jon      

The output from both approaches is the same (see Figure 1).

Figure 1. The Output from XML Parsing Approaches (With and Without E4X) Is the Same

E4X offers a cleaner and easier way to retrieve values from XML within JavaScript, wouldn’t you say? All because E4X is meant specifically for providing XML support. Without E4X, you have to use an XML library/component, and those work differently in different browser.

E4X also provides all types of language constructs, such as statement loops, operators, namespaces, objects, keywords, etc. In order to use it in your pages, you just add the parameter e4x=1 in the script tag as follows: