Querying XML Data Using XPATH Expression and the XML DOM

Sometimes we need to query XML data based on a particular condition simialr to how we do in SQL Server. For e.g. let's suppose we want to display the data of the employee which matches the criteria specified in the where clause.

The same thing can be implemented in XML by using XPath. XPath is a special language which is used to query and traverse an XML document. It can also be used to do calculations by using certain operators such as arithmetic, comparison etc.

The following is an example of data in an XML file being queried using XPath with HTML as a front end.

The source code of the XML file is:

<? xml version = "1.0" encoding="UTF-8" ?>
< EmpData >
  < Emp Eid = "1" >
    < Name > Rahul</Name >
    < Add > Andheri</Add >
    < Salary > 15000</Salary >
  </ Emp >
  < Emp Eid = "2" >
    < Name > Shailesh</Name >
    < Add > Worli</Add >
    < Salary > 12500</Salary >
  </ Emp >
  < Emp Eid = "3" >
    < Name > John</Name >
    < Add > Jogeshwari</Add >
    < Salary > 7000</Salary >
  </ Emp >
  < Emp Eid = "4" >
    < Name > Suchi</Name >
    < Add > Virar</Add >
    < Salary > 5000</Salary >
  </ Emp >
  < Emp Eid = "5" >
    < Name > Lincy</Name >
    < Add > Andheri</Add >
    < Salary > 22000</Salary >
  </ Emp >
</ EmpData >

In order to display the output in the browser formatted we can also use XSLT which is a special language for formatting the XML data. The following is the source code for that.

< xsl:stylesheet xmlns:xsl = "http://www.w3.org/1999/XSL/Transform" version="1.0" >
< xsl:template match = "Emp" >
          < table border = "2" cellspacing="2" cellpadding="2" >
                   < thead >
                             < td > Employee ID</td >
                             < td > Employee Name</td >
                             < td > Employee Add</td >
                             < td > Employee Salary</td >
                   </ thead >
                   < tr >
                             < td >
                                      < xsl:value-of select = "@Eid" />
                             </ td >
                             < td >
                                      < xsl:value-of select = "Name" />
                             </ td >
                             < td >
                                      < xsl:value-of select = "Add" />
                             </ td >
                             < td >
                                      < xsl:value-of select = "Salary" />
                             </ td >
                   </ tr >
          </ table >
</ xsl:template >
</ xsl:stylesheet >

Now we just need to create a front end whereby the user will enter the employee id to be searched and based on the id specified the respective details of the employee should be displayed in the browser in tabular format.


Here we have a button control on click of which it should display the details of the respective employee in the div for doing this activity we need to create XML DOM object and we need to load the XML and xsl file which we created earlier in this session. The following is the source code for that.

< html >
< head >
< title > Search Data</title >
< script type="text/javascript">
          try
         {
            var xmldoc=new ActiveXObject("Msxml2.DOMDocument.6.0");
            xmldoc.async=false;
            xmldoc.load("EmpSearch.xml");

            var xsldoc=new ActiveXObject("Msxml2.DOMDocument.6.0");
            xsldoc.async=false;
            xsldoc.load("EmpSearch.xslt")
        }
        catch(ex)
        {
            alert(ex.Message);
        }
        function RunQuery()
        {
//retrieve the employee id and store it in query.
          var query=document.f1.txtSearch.value;
           var output=xmldoc.selectNodes('//Emp[@Eid='+query +']');
          var s="";
                   var i;
          for (i=0;i<output.length;i++)
                {
//To Transform the output apply xslt file to it
                     s+=output[i].transformNode(xsldoc);
                }
                document.getElementById("disp").innerHTML=s;
       }
</script>
</head>
<body>
<form name="f1">
          Enter Employee Id to be Searched :
          <input name="txtSearch" type="text"/>
          <input type="button" name="b1" value="Search" onClick="RunQuery()"/>
          <div style="width: 100%; border-left-color: red; border-bottom-color: red; border-top-color: red; position: static; border-right-color: red;" id="disp">
          </div>
</form>
</body>
</html>