How To Read XML Using Javascript

In this article, I will show you how to read/parse XML using javascript. Let's suppose you are invoking a web service and you want to parse the XML and then want to sow to UI.

  
<%@ Page Language="C#" %>  
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
<script runat="server">  
  void Page_Load()  
  {  
      if (Request.QueryString["sendData"] != null &&  
      Request.QueryString["sendData"] == "ok")  
      {  
          string xml = "<book title=\"ASP.NET Code Book\" author=\"Blog\">" +  
       "<chapters><chapter number=\"1\" title=\"Introduction\" />" +  
        "<chapter number=\"2\" title=\"JavaScript\" /><chapter number=\"3\" title=\"Ajax\" />" +  
         "<chapter number=\"4\" title=\"WPF\" /></chapters></book>";  
          Response.ContentType = "text/xml";  
          Response.Write(xml);  
          Response.End();  
      }  
  }  
</script>  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head id="Head1" runat="server">  
  <title>Ajax with ASP.NET</title>  
  
  <script language="Javascript" type="text/javascript">  
  function getXMLHTTP( )  
  {  
      var XMLHTTP = null;  
      if (window.ActiveXObject)  
      {  
       try {  
           XMLHTTP = new ActiveXObject("Msxml2.XMLHTTP");  
           }  
      catch (e)  
          {  
          try {  
              XMLHTTP = new ActiveXObject("Microsoft.XMLHTTP");  
              }  
              catch (e)  
              {  
              }  
          }  
     }  
     else if (window.XMLHttpRequest)  
      {  
       try {  
           XMLHTTP = new XMLHttpRequest( );  
           }  
      catch (e)  
      {  
        }  
      }  
  return XMLHTTP;  
  }  
  var XMLHTTP;  
  window.onload = function( )  
  {  
      XMLHTTP = getXMLHTTP( );  
      if (XMLHTTP != null)  
     {  
      XMLHTTP.open("GET", "xmldocument.aspx?sendData=ok");  
      XMLHTTP.onreadystatechange = stateChanged;  
      XMLHTTP.send(null);  
     }  
  }  
function stateChanged( ) {  
if (XMLHTTP.readyState == 4 && XMLHTTP.status == 200)  
  {  
      var xml = XMLHTTP.responseXML;  
      var root = xml.documentElement;  
      document.getElementById("output").innerHTML =  
      root.getAttribute("title") +" by " + root.getAttribute("author");  
      var list = document.getElementById("list");  
      var chapters = xml.getElementsByTagName("chapter");  
      for (var i=0; i<chapters.length; i++)  
          {  
              var listItem = document.createElement("li");  
              var listItemText = document.createTextNode(  
              chapters[i].getAttribute("number") +  
              ": " +  
              chapters[i].getAttribute("title"));  
              listItem.appendChild(listItemText);  
              list.appendChild(listItem);  
          }  
  }  
}  
  </script>  
  
</head>  
<body>  
  <p id="output">  
      Wait and see ...</p>  
  <ul id="list">  
  </ul>  
</body>  
</html>

Post a Comment

Please do not post any spam link in the comment box😊

Previous Post Next Post

Blog ads

CodeGuru