Friday, September 09, 2005

My 1st webpages using E4X (ECMAScript for XML)

I'm very excited about this (sad really!). The new versions of Mozilla 1.8 Beta1and Firefox 1.5 Beta 1 (Deer Park) support the ECMAScript for XML (E4X) Specification. For further information about E4X see Jon Udell's Introduction to E4X, Objectifying XML - E4X for Firefox 1.1, Wikipedia's E4X page, Brendan Eich's (Mozilla Chief Architect) E4X presentation and this W3Schools E4X tutorial.

I've yet to really dig into the specification in any depth but even this very simple example looks like it has the potential to change the nature of future AJAX applications.

This version works (but lacks proper web standards compliance):


<html>
<head>
<script type="text/javascript;e4x=1">
//<![CDATA[

var x = <people>
<person gender="male">
<name>Ant</name>
<hair>Shaggy</hair>
<eyes>Blue</eyes>
<height measure="metric">176</height>
</person>
<person gender="male">
<name>Paul</name>
<hair>Spiky</hair>
<eyes>Grey</eyes>
<height measure="metric">178</height>
</person>
</people>;

document.write(x.person[0].@gender+"<br />");
document.write(x.person[0].name+"<br />");
document.write(x.person[0].hair+"<br />");
document.write(x.person[0].eyes+"<br />");
document.write(x.person[0].height+" ");
document.write(x.person[0].height.@measure+"<br />");

//]]>
</script>
<title></title>
</head>
<body>
<h1>My First ECMAScript for XML (E4X) Page</h1>
</body>
</html>

and this version works AND is more standards compliant:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript;e4x=1">
//<![CDATA[

var xmlString = "<people>" +
"<person gender=\"male\">" +
"<name>Ant<\/name>" +
"<hair>Shaggy<\/hair>" +
"<eyes>Blue<\/eyes>" +
"<height measure=\"metric\">176<\/height>" +
"<\/person>" +
"<person gender=\"male\">" +
"<name>Paul<\/name>" +
"<hair>Spiky<\/hair>" +
"<eyes>Grey<\/eyes>" +
"<height measure=\"metric\">178<\/height>" +
"<\/person>" +
"<\/people>";

var x = new XML(xmlString);

document.write(x.person[0].@gender+"<br />");
document.write(x.person[0].name+"<br />");
document.write(x.person[0].hair+"<br />");
document.write(x.person[0].eyes+"<br />");
document.write(x.person[0].height+" ");
document.write(x.person[0].height.@measure+"<br />");


//]]>
</script>
<title></title>
</head>
<body>
<h1>My First Standards Compliant ECMAScript for XML (E4X) Page</h1>
</body>
</html>

Both versions result in a screen containing something like this:

male
Ant
Shaggy
Blue
176 metric

My First ECMAScript for XML (E4X) Page

I advise you to try it yourself! Cool eh?

Tags :,

3 comments:

Mark McLaren said...

I'm only a little bit late, but yeah, that is very cool...
Note: Comment imported. Original by Brett at 2007-03-12 01:20

Mark McLaren said...

Any possibility of getting this to work in Internet Explorer 6 or 7? If so, a cross-browser example of this pretty exciting thing would be nice.
Note: Comment imported. Original by Abel Braaksma website: http://abelleba.metacarpus.com at 2007-08-09 14:40

Mark McLaren said...

AFAIK, E4X is not natively supported in IE6 or IE7. However, apparently you can use E4X with ActionScript 3.0 now. Unfortunately, I have no idea how to use ActionScript!
Note: Comment imported. Original by markmc website: http://content.mark-mclaren.info/ at 2007-08-09 19:50