Handling XML Data for Ajax - Back on the Client: Mining the XML
(Page 2 of 5 )
Here's where the fun begins. The client code in Example 4-5 shows how to mine the data fields from the XML document that the server sends.
Example 4-5. The client code
<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <STYLE type="text/css"> .borderless { color:black; text-align:center; background:powderblue; border-width:0;border-color:green; } </STYLE>
<title>function</title> <SCRIPT language="JavaScript" type="text/javascript"> var req;
function convertToXML() { var key = document.getElementById("key"); var keypressed = document.getElementById("keypressed"); keypressed.value = key.value; var url = "/ajaxcodeconverter-lab2/response?key=" + escape(key.value); if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); } req.open("Get",url,true); req.onreadystatechange = callback; req.send(null); } function nonMSPopulate() { xmlDoc = document.implementation.createDocument("","", null); var resp = req.responseText; var parser = new DOMParser(); var dom = parser.parseFromString(resp,"text/xml");
decVal = dom.getElementsByTagName("decimal"); var decimal = document.getElementById('decimal'); decimal.value=decVal[0].childNodes[0].nodeValue;
hexVal = dom.getElementsByTagName("hexadecimal"); var hexadecimal = document.getElementById('hexadecimal'); hexadecimal.value=hexVal[0].childNodes[0].nodeValue;
octVal = dom.getElementsByTagName("octal"); var octal = document.getElementById('octal'); octal.value=octVal[0].childNodes[0].nodeValue;
hyperVal = dom.getElementsByTagName("hyper"); var hyper = document.getElementById('hyper'); hyper.value=hyperVal[0].childNodes[0].nodeValue;
binaryVal = dom.getElementsByTagName("binary"); var bin = document.getElementById('bin'); bin.value=binaryVal[0].childNodes[0].nodeValue; }
function msPopulate() { var resp = req.responseText;
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.loadXML(resp);
nodes=xmlDoc.documentElement.childNodes;
dec = xmlDoc.getElementsByTagName('decimal'); var decimal = document.getElementById('decimal'); decimal.value=dec[0].firstChild.data;
hexi = xmlDoc.getElementsByTagName('hexadecimal'); var hexadecimal = document.getElementById('hexadecimal'); hexadecimal.value=hexi[0].firstChild.data;
oct = xmlDoc.getElementsByTagName('octal'); var octal = document.getElementById('octal'); octal.value=oct[0].firstChild.data;
bin = xmlDoc.getElementsByTagName('binary'); var binary = document.getElementById('bin'); binary.value=bin[0].firstChild.data;
hypertextml = xmlDoc.getElementsByTagName('hyper'); var hyper = document.getElementById('hyper'); hyper.value=hypertextml[0].firstChild.data; }
function callback() { if (req.readyState==4) { if (req.status == 200) {
if (window.XMLHttpRequest) { nonMSPopulate(); } else if (window.ActiveXObject) { msPopulate(); } } } clear(); }
function clear() { var key = document.getElementById("key"); key.value=""; }
</SCRIPT> </head>
<body> <H1>
<CENTER>AJAX CHARACTER DECODER</CENTER> </H1> <H2> <CENTER>Press a key to find its value.</CENTER> </H2> <form name="form1" action="/ajaxcodeconverter-lab2" method="get">
