Tutorials E4X

1 E4X Tutorial
2 See Also

E4X Tutorial

What is E4X?

E4X is an extension of JavaScript that adds direct support for XML. It is also considered an official JavaScript standard.

[edit]

Why E4X?

It comes from the term ECMAScript and XML. ECMAScript for many has become synonymous with JavaScript and therefore E4X becomes clear that it's essentially JavaScript for XML. E4X makes scripting for XML with JavaScript very simple.

[edit]

How E4X?

var x = new XML()

[edit]

Example

<note>
<date>2002-08-01</date>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

If we had this XML document stored in a string called note, we could load it into an XML object variable called x, by writing the following JavaScript statement: var x = new XML(note) or by assigning XML by string:

var x = new XML()
x= <date>2002-08-01</date>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

And now we can quite simple grab some output from this object; document.write(x.from) will produce Jani.

[edit]

Benefits of E4X

There are some clear benefits of using E4X as opposed to the traditional approach. In a nutshell, E4X makes XML very simple to use.

[edit]

Without E4X

var xmlDoc
//code for Internet Explorer
if (window.ActiveXObject) {
  xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
  xmlDoc.async=false;
  xmlDoc.load("note.xml")
  displaymessage()
}
// code for Mozilla, Firefox, etc.
else (document.implementation && document.implementation.createDocument) {
   xmlDoc= document.implementation.createDocument("","",null)
   xmlDoc.load("note.xml");
   xmlDoc.onload=displaymessage
}
function displaymessage() {
   document.write(xmlDoc.getElementsByTagName("body")[0].firstChild.nodeValue)
}

[edit]

With E4X

var xmlDoc=new XML()
xmlDoc.load("note.xml")
document.write(xmlDoc.body)

[edit]

Browser Support

You guessed it, browser support is thin. The first browsers expected to be supporting it are:

A beta version of the Mozilla engine (1.8) - limited support
Firefox 1.1 - the first browser to support E4X
Safari support to come _{[#See_Also 7]}
Later versions of IE expected to support E4X. But so far there is no indication for E4X support in IE7. It seems MS is going to support it's own alternative to AJAX.

[edit]

More Examples

As an example, we will work with an XML document that represents an order.

The XML document looks like this:

<order>
<date>2005-08-01</date>
<customer>
  <firstname>John</firstname>
  <lastname>Johnson</lastname>
</customer>
<item>
  <name>Maxilaku</name>
  <qty>5</qty>
  <price>155.00</price>
</item>
</order>

If we had this XML document stored in a string called txt, we could load it into an XML object variable called order, by writing the following JavaScript statement:

var order = new XML(txt)

Or we could assign the XML text directly to the XML object variable:

var order = new XML()
order=<order id="555">
<date>2005-08-01</date>
<customer>
  <firstname>John</firstname> 
  <lastname>Johnson</lastname>
</customer>
<item>
  <name>Maxilaku</name>
  <qty>5</qty>
  <price>155.00</price>
</item>
</order>

[edit]

Working with the Data

Calculate the price: var total=order.item.qty * order.item.price

Display the customers full name:

document.write(order.customer.lastname)
document.write(",")
document.write(order.customer.firstname)

Add a new item:

order.item+=
<item>
  <name>Pavlova</name>
  <qty>10</qty>
  <price>128.00</price>
 </item>

Display the order id: document.write(order.@id)

var price=0
for each (i in order.item){
  price+= i.qty*i.price
}

[edit]

Conclusion

As we've seen, E4X should make it much easier for developers to use JavaScript and XML together - far from what the current environment has given you. Does this mean we need to wait for the new browser versions to support this? Yes and No. Yes if you want to use the built-in default functionality from the browser. However, there is an alternative and that is to include your own version of the extension. The catch with that alternative is I currently do not know of any source for it. I'm looking and when I find it I will surely share.

[edit]

wiki.chadlindstrom.ca

Web Development Best Practices and Design Patterns

Tutorials E4X

Contents

E4X Tutorial

What is E4X?

Why E4X?

How E4X?

Example

Benefits of E4X

Without E4X

With E4X

Browser Support

More Examples

Working with the Data

Conclusion

See Also

Page Nav