Scribd
Upload
333 views

E4X Tutorial

E4X is an extension to JavaScript that adds direct support for XML. It allows XML documents to be treated as JavaScript objects, making it easy to parse, query, and manipulate XML. E4X was standardized in 2004 as part of ECMA-357 and provides a simpler way to work with XML compared to existing XML libraries. However, browser support for E4X is limited, with only Firefox currently supporting it relatively well. The tutorial provides examples of how to load an XML document, query elements, add new elements, and perform calculations using E4X.

Uploaded by

api-19921804
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
333 views

E4X Tutorial

E4X is an extension to JavaScript that adds direct support for XML. It allows XML documents to be treated as JavaScript objects, making it easy to parse, query, and manipulate XML. E4X was standardized in 2004 as part of ECMA-357 and provides a simpler way to work with XML compared to existing XML libraries. However, browser support for E4X is limited, with only Firefox currently supporting it relatively well. The tutorial provides examples of how to load an XML document, query elements, add new elements, and perform calculations using E4X.

Uploaded by

api-19921804
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 4

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.load("note.xml");
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();
xmlDoc.load("note.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>
<price>155.00</price>
</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>
<price>128.00</price>
</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

You might also like