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">
<table border="2" bordercolor="black" bgcolor="lightblue" valign="center"
align="center">
<tr>
<td align="center">
Enter Key Here ->
<input type="text" id="key" name="key" maxlength="1" size="1"
onkeyup="convertToXML();">
</td>
</tr>
</table>
<br>
<table class="borderless" border="1" valign="center" align="center">
<tr>
<td align="center" colspan="5">
Key Pressed:
<input class="borderless" type="text" readonly id="keypressed"
maxlength="1" size="1">
</td>
</tr>
<tr>
<td align="center"> Decimal
</td>
<td align="center">Hexadecimal</td>
<td align="center"> Octal </td>
<td align="center">
Binary
</td>
<td align="center">
HTML
</td>
</tr>
<tr>
<td align="center"><input class="borderless" type="text" readonly
id="decimal" maxlength="6" size="6"></td>
<td align="center"><input class="borderless" type="text" readonly
id="hexadecimal" maxlength="6" size="6"></td>
<td align="center"><input class="borderless" type="text" readonly
id="octal" maxlength="6" size="6"></td>
<td align="center"><input class="borderless" type="text" readonly
id="bin" maxlength="8" size="8"></td>
<td align="center"><input class="borderless" type="text" readonly
id="hyper" maxlength="6" size="6"></td>
</tr>
</table>
</form>
</body>
</html>
Wow, thats a chunk of code. Let's break it up into two parts: first we'll look at the XML parsing, then at writing the data to the fields.
Next: XML Parsing with JavaScript >>
More XML Tutorials Articles
More By O'Reilly Media
|
 This article is excerpted from chapter four of the book Ajax on Java, written by Steven Douglas Olson (O'Reilly, 2007; ISBN: 0596101872). Check it out today at your favorite bookstore. Buy this book now.
|
|
