Manipulating XML using JavaScript

No PHP, ASP or JSP codes, just JavaScript.

Manipulating XML files or data using JavaScript to create lists, tables, menus, manipulate feeds (rss or atom), etc.

Important: Browser just allow access to files in your own domain (security reasons). Dont try to load XML files of another domains, this is not possible.

1. Make a XML test file

<?xml version="1.0" ?>
<person>
   <ident id="1">
    <name>John</name>
    <email>John@mail.com</email>
   </ident>
   <ident id="2">
    <name family="ze" data="2">Maria</name>
    <email>maria@mail.com</email>
   </ident>
</person>

Save as names.xml

2. Loading XML

The browsers load XML files using diferent ways (like in Ajax). Internet Explorer (IE) use ActiveX. Firefox and Opera use XMLHttpRequest (and another ways).

The code to return a XML object to these browsers is:

function xmlMicoxLoader(url){
  //by Micox: micoxjcg@yahoo.com.br.
  //http://elmicoxcodes.blogspot.com
    if(window.XMLHttpRequest){
        var Loader = new XMLHttpRequest();
        //assyncronous mode to load before the 'return' line
        Loader.open("GET", url ,false); 
        Loader.send(null);
        return Loader.responseXML;
    }else if(window.ActiveXObject){
        var Loader = new ActiveXObject("Msxml2.DOMDocument.3.0");
        //assyncronous mode to load before the 'return' line
        Loader.async = false;
        Loader.load(url);
        return Loader;
    }
}

Using assyncronous mode to load before the 'return' line.

More informations about responseXML (in portuguese): a propriedade responseXML.

3. Manipulating XML - Example

XML can be manipulated like a tree using DOM functions and properties: childNodes, nodeType, nodeValue, firstChild, etc. To see more functions read MDC DOM docs.

In example code bellow, i read all childs of XML returned by xmlMicoxLoader. Get values using "nodeValue", names using "nodeName" and attributes using array "attributes[]".

Very important: IE ignores white spaces in XML file, but to Opera and Firefox, these white spaces are valid childNodes (#text nodes). To filter these elements we using a nodetype test (real XML elements have nodeType=1, #texts have nodeType=3).

This example code print a XML tree. Read and understends:

function xmlMicoxTree(xmlNode,ident){
  //by Micox: micoxjcg@yahoo.com.br
    var treeTxt=""; //var to content temp
    for(var i=0;i<xmlNode.childNodes.length;i++){//each child node
  if(xmlNode.childNodes[i].nodeType == 1){//no white spaces
   //node name
   treeTxt = treeTxt + ident + xmlNode.childNodes[i].nodeName + ": "
   if(xmlNode.childNodes[i].childNodes.length==0){
    //no children. Get nodeValue
    treeTxt = treeTxt + xmlNode.childNodes[i].nodeValue 
    for(var z=0;z<xmlNode.childNodes[i].attributes.length;z++){
     var atrib = xmlNode.childNodes[i].attributes[z];
     treeTxt = treeTxt + " (" + atrib.nodeName + " = " + atrib.nodeValue + ")";
    }
    treeTxt = treeTxt + "<br />\n";
   }else if(xmlNode.childNodes[i].childNodes.length>0){
    //children. get first child
    treeTxt = treeTxt + xmlNode.childNodes[i].firstChild.nodeValue;
    for(var z=0;z<xmlNode.childNodes[i].attributes.length;z++){
     var atrib = xmlNode.childNodes[i].attributes[z];
     treeTxt = treeTxt + " (" + atrib.nodeName + " = " + atrib.nodeValue + ")";
    }
    //recursive to child of children
    treeTxt = treeTxt + "<br />\n" + xmlMicoxTree(xmlNode.childNodes[i],ident + "> > ");
   }
      }
    }
    return treeTxt;
}

Call the functions:

xml = xmlMicoxLoader("names.xml"); //load xml
document.write(xmlMicoxTree(xml,"")); //print the tree 

4) Loading RSS

In the next post, a real example: loading a RSS XML feed just using JavaSript

---
Another way to load XML using JavaScript in IBM website.

Portuguese original version.