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>