E4X Tutorial

E4X Tutorial
• E4X is a new extension to JavaScript.

• E4X adds direct support for XML to JavaScript.
• E4X is official in the JavaScript 1.6 standard.
E4X Examplevar employees=

<employees>
<person>
<name>Tove</name>
<age>32</age>
</person>
<person>
<name>Jani</name>
<age>26</age>
</person>
</employees>;
document.write(employees.person.(name == "Tove").age);
This example works in Firefox only!
What You Should Already Know

Before you continue you should have a basic understanding of the following:
• HTML
• JavaScript
• XML
To study these subjects first, find all the tutorials you need on our Home Page.
JavaScript = ECMAScript
• ECMAScript is the official name for JavaScript.

• ECMAScript is the same as JavaScript.
• ECMA (The European Computer Manufacturers Association) is the organization standardizing
JavaScript.
• E4X = JavaScript for XML
• E4X means "ECMAScript For XML". It is a standard extension to ECMAScript.
So in real life E4X means "JavaScript for XML".

XML As a JavaScript Object
E4X is an official JavaScript standard that adds direct support for XML.
With E4X, you can declare an XML object variable the same way as you declare a Date or an Array object
variable: var x = new XML()
var y = new Date()

var z = new Array()
• E4X makes scripting for XML with JavaScript very simple.

• Examples are provided in the next chapter.
• E4X is a Web Standard
• ECMA-262 (JavaScript 1.3) was standardized in December 1999.
• E4X is an extension of JavaScript that adds direct support for XML.
• ECMA-357 (E4X) was standardized in June 2004.
ECMA International was founded in 1961.

The ECMA organization is dedicated to the standardization of Information and Communication Technology
(ICT) and Consumer Electronics (CE).
ECMA has developed standards for
• JavaScript
1
• C# Language
• International Character Sets
• Optical Disks
• Magnetic Tapes
• Data Compression
• Data Communication
• and much more
E4X How To
• With E4X, you can define an XML document as a JavaScript object.
• XML As a JavaScript Object
With E4X, you can declare an XML object the same way as you declare Date or Math objects: var x = new
XML();
var y = new Date();
var z = new Array();
Since you can declare an XML document as an XML object, it is also very easy to parse and manipulate the
XML document.
E4X Example
As an example, we can parse and edit an XML document that represents a note.
The XML document looks like this:

<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 we could assign the XML text directly to the XML object variable:
var x = new XML();
x=
<note>
<date>2002-08-01</date>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>;
For the XML example above, the JavaScript statement:

document.write(x.from)
will produce the output:
Jani
Quite simple. Don't you think?
Why E4X?
• E4X makes XML very simple to use.
• E4X is Much Simpler
If you have ever tried to use JavaScript to parse and manipulate XML, you will find that E4X is much simpler
to use.
Without E4X you have to use an XML library (or an XML component) to work with XML.
2
These libraries or components have different syntax and work differently in different browsers.
Without E4X
The following example is a cross browser example that loads an existing XML document ("note.xml") into
the XML parser and displays the message from the note:Examplevar 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.onload=displaymessage;
}
function displaymessage()
{
document.write(xmlDoc.getElementsByTagName("body")[0].firstChild.nodeValue);
}
With E4X
The following example is the same as above but using E4X:var xmlDoc=new XML();
var xmlDoc=new XML();
document.write(xmlDoc.body);
E4X Browsers
The browser support for E4X is limited.
Firefox
Firefox is currently the only browser with relatively good support for E4X.
In the next chapter there is a list of examples, describing some of the things you can do with E4x in Firefox.
Opera, Chrome, and Safari

There are currently no support for E4X in Opera, Chrome, or Safari.
Internet Explorer
So far there is no indication for of E4X support in Internet Explorer.
It looks like Microsoft is going to support its own alternative to AJAX.
AJAX is a new web development technique for creating interactive web applications using JavaScript, XML,
and CSS.
E4X Example
E4X makes scripting for XML very simple.
E4X Example
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>
3
<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>
</item>
</order>;
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>
</item>;
Display the order id: document.write(order.@id);

Calculate the total price, when the order has many items: var price=0;
for each (i in order.item)
{
price+= i.qty*i.price;
}
Source: http://w3schools.com/e4x/default.asp
By: DataIntegratedEntity

E4X Tutorial

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

E4X Tutorial

Uploaded by

Copyright:

Available Formats

E4X Tutorial

• E4X is a new extension to JavaScript.

E4X Examplevar employees=

What You Should Already Know

• ECMAScript is the official name for JavaScript.

So in real life E4X means "JavaScript for XML".

var y = new Date()

• E4X makes scripting for XML with JavaScript very simple.

ECMA International was founded in 1961.

The XML document looks like this:

For the XML example above, the JavaScript statement:

Opera, Chrome, and Safari

The XML document looks like this:

Working With the Data

Add a new item: order.item+=

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

You might also like