Ajax and E4X: Using XML in Javascript

Web pages become dynamic with the addition of JavaScript code. More dynamic even when one adopts Ajax, the fast technology of communication with the server, which is currently the center of principal interest of Webmasters. Ajax allows to read XML documents on the server to complete the pages. Classically, JavaScript reaches tags and data of the document with methods of DOM (model of the document object), but new standard E4X facilitates largely the access to contents XML.

E4X is a standard extension to ECMAScript (ECMA-357) but its implementation in browsers has been dismissed.

E4X has been implemented in Firefox and then removed since the version 17. The reason is probably that it is easier to use JSON as data format. It should not be implemented in other browsers, but other software using JS as scripting language make use of this standard (as an extension).

1) Javascript

To create dynamic Web pages or light Web applications, one uses JavaScript.
It is a scripting language interpreted by Web navigators who adds interaction to the pages. The variables are dynamic and the language is rather complete, with the disadvantage for the programmer whom the errors are simply ignored, no message to prevent him.
A small example of code:

<script language = "Javascript" > 
  var demonstration = "demonstration"; 
  function disphello(str)
  {
    document.write ("hello" + str);
  } 
  dispstring("me"); 
</script> 

One associates to HTML elements attributes as "onclick" (when one clicks on HTML element with the mouse), to assigns the name of a JavaScript function.
This page enables you to consult a more detailed description of Javascript.

2) DOM

That means for "Document Object Model", and it is a set of methods which give access to the contents of an XML document. The interface of DOM makes it possible to process HTML documents too.
Example:

var linkTag = document.getElementsByTagName("a"); 
for (var I = 0; I <> linkTag.length; i++) 
{
   var element = linkTag.item (I); 
   alert ("Href of this element is: " + element.getAttribute (href)); 
}  

The bold code above relates to DOM, its methods and attributes, the remainder being Javascript. Thus, the variable linkTag object of type DOMNodeList with an attribute length and a single method item () which returns a DOMNode object.
One assigns to a variable an element taken in a document HTML and one uses the attributes of this element.
As one can see, one reaches the contents by the name of tag (getElementByTagName), or by his identifier (getElementByTagId), which supposes a preliminary knowledge of the structure of the document.

The interface of the document object model is subdivided in a quantity of classes: DOMDocument, DOMElement, DOMNodeList, DOMNode etc. Even if these classes are not used explicitly in Javascript which does not have types, the methods are associated to the types of the classes, you thus should know how to use DOM, one can only dream of a simpler model with only one class XML to represent any element of structure of the document.

More especially as the generalization of Ajax to communicate with the server, thanks to the XMLHttpRequest object, largely facilitates the use of XML like data exchange format on the Web.

3) XMLHttpRequest

Ajax is the combination of Javascript and a class, XMLHttpRequest, recognized by all the navigators, who communicates asynchronously with the server. It can collect data and update the Web page without needing to reload it. It is thus modified in an instantaneous way.
The class support also the palin-text format, but it offers all its power with the loading of document XML, from which the contents will be then accessible by the DOM.
To replace the methods of DOM, for the treatment of loaded XML document, a new standard was created: E4X.

4) E4X

The name E4X is a pun, it is the acronym of ECMAScript For XML, and for is written 4.
ECMA which standardized JavaScript under the name of ECMAScript, defined an extension for the use of XML documents. Its goal is to replace traditional DOM interface, by something of simpler.
There are resemblances between E4X and the SimpleXML class of PHP 5. The latter was also implemented to replace the classes of traditional, rather heavy DOM interface.

This definition is far from being perfect, in particular because it takes as a starting point PHP and it is known that PHP trails since the origin a defect, in that tables confuse number of index and search key. Precisely, the standard uses an enough complicated format to differentiate the keys (names of attributes) from the numbers of position of the elements on an XML level, which is not useful apart from language PHP.

However, the declaration of an XML object becomes simple with E4X, it is declared like a Date object:

var D = new Date ()
var X = new XML;

E4X also makes it possible to integrate easily an XML document in a script (that would be connected rather with the Scriptol language):

var monxml = <car> 
 <passenger age= " 25 " > 
    Alice 
 </passenger> 
 <passenger age= " 28 " > 
    Kevin 
 </passenger> 
</car>

A DOM object can be assigned with an E4X object according to the following syntax:

var X = document.getElementById ("demonstration"); 
var demonstration = new XML (X);    

Reaching the contents of the document becomes very simple:

myxml.passenger [0]

return Alice.

myxml.passenger [1]. @age

return 28, it is an attribute of the second element. The tag container is implicit.

Appendix: Testing E4X

Testing E4X with your navigator: the message "Gotcha" must appear. Only Firefox recognizes E4X until version 20. It is dropped then. But JavaScript is also used by XUL and other languages based on XML.

Test E4X

The script is in the section head of the page:

function testE4X () 
{
  var X = new XML ("<doc><car message=' Gotcha'>Aston-Martin</car></doc>"); 
  alert (x.car [0]. @message); 
}

Appendix: Resources and tutorials

Some sites of information and resources on the languages and technologies previously evoked.