Sunday, March 25, 2012

Javascript XML processing

XML (extensible markup language) is a widely used data format for storing and transferring information, which is both computer processable and human readable. Javascript provides a powerful tool to manipulate xml documents in its DOM processing library. In this tutorial we'll build  basic javascript xml parser.

Lets begin by using a basic XML example. Our sample XML document will be a table of customers with two entries

<customerlist>
     <customer>
         <name>John Doe</name>
         <address>1 Main Street</address>
         <tel>123-456-7890</tel>
     </customer>
     <customer>
         <name>Jane Doe</name>
         <address>3 Main Street</address>
         <tel>987-654-3210</tel>
     </customer>
</customerlist>

We load the document into an XML DOM object with the following javascript code:

// put the document into a javascript string variable

var xmltxt = "<customerlist>";

xmltxt +=    "<customer>";
xmltxt +=    "<name>John Doe</name>";
xmltxt +=    "<address>1 Main Street</address>";
xmltxt +=    "<tel>123-456-7890</tel>";
xmltxt +=    "</customer>";
xmltxt +=    "<customer>";
xmltxt +=    "<name>Jane Doe</name>";
xmltxt +=    "<address>3 Main Street</address>";
xmltxt +=    "<tel>987-654-3210</tel>";
xmltxt +=    "</customer>";
xmltxt +=    "</customerlist>";


// load the xml string variable into a DOM object. The code syntax for firefox & 
// other browsers differ from i.e. so you have to code for the users browser

if(window.DOMParser){
    // non i.e. browser
    xmlparser = new DOMParser();
    xmlDoc = xmlparser.parseFromString(xmltxt, "text/xml");
}else{
    // i.e. browser
    xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.async = false;
    xmlDoc.loadXML(xmltxt);
}

Now the DOM object is loaded with the xml document containing the table of customers, you can use the DOM object to do intersting things as will be seen in the next section.

Javascript XML processing
Navigating XML DOM with Javascript
Navigating XML DOM with javascript Contd.
Navigating XML DOM with javascript Code



Related Link
Extensible Markup Language - Wikipedia 

No comments:

Post a Comment