How to Develop Web Applications with Ajax: Pt. 2 - page 1
|
|
|
| 2.6/5.0 (5 votes total) |
|
|
|
|
Jonathan Fenocchi
February 17, 2006
|
| Jonathan Fenocchi |
Jonathan Fenocchi is a talented young developer coming at you from southern TX, USA. Accessibility advocate, proficient programmer, and determined designer, Jonathan spends his free time researching new technologies, developing new ideas, playing video games and listening to rock music. Jonathan runs a Slightly Remarkable blog where he focuses on web-related content, and continues to pursue his goals as an aspiring web developer."
|
| Jonathan Fenocchi
has written 20 tutorials for JavaScriptSearch. |
| View all tutorials by Jonathan Fenocchi... |
In part one of this series, we discussed how to retrieve remote data from an XML file via JavaScript. In this article, we'll learn how to process that data in a more complex manner. As an example, we'll take groups of XML data, separate individual segments of that data and display those segments in different ways, depending on how they're identified. This article builds on the example code used in the previous article, so if you don't understand the code we start with here, you may want to go back and read it. Let's BeginLet's begin with our first step: forming the XML. We want to write an XML document that groups sets of data to be processed by JavaScript, so we'll group some nodes and sub-nodes (or, elements and sub-elements) together. In the example, we'll use the names of some household pets: <?xml version="1.0" encoding="UTF-8"?>
<data>
<pets>
<pet>Cat</pet>
<pet>Dog</pet>
<pet>Fish</pet>
</pets>
</data>
|
Above, we have the XML declaration (states that the document is an XML 1.0 document, encoded with the UTF-8 character set standard), a root element (<data>) that groups all underlying elements together, a <pets> element that groups all pets together, and then a <pet> node for each pet. To specify what type of animal each pet is, we put a text node within the <pet> elements: Cat, Dog, and Fish. We’re going to build upon the HTML document I built in the last lesson and expand it to make it more flexible with the new XML file here:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Developing Web Applications with Ajax - Example</title>
<script type="text/javascript"><!--
function ajaxRead(file){
var xmlObj = null;
if(window.XMLHttpRequest){
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}
xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
processXML(xmlObj.responseXML);
}
}
xmlObj.open ('GET', file, true);
xmlObj.send ('');
}
function processXML(obj){
var dataArray = obj.getElementsByTagName('pet');
var dataArrayLen = dataArray.length;
var insertData = '<table style="width:150px; border: solid 1px #000"><tr><th>'
+ 'Pets</th></tr>';
for (var i=0; i<dataArrayLen; i++){
insertData += '<tr><td>' + dataArray[i].firstChild.data + '</td></tr>';
}
insertData += '</table>';
document.getElementById ('dataArea').innerHTML = insertData;
}
//--></script>
</head>
<body>
<h1>Developing Web Applications with Ajax</h1>
<p>This page demonstrates the use of Asynchronous Javascript and XML (Ajax) technology to
update a web page's content by reading from a remote file dynamically
-- no page reloading
is required. Note that this operation does not work for users without JavaScript enabled.</p>
<p>This page particularly demonstrates the retrieval and processing of grouped sets of XML data.
The data retrieved will be output into a tabular format below.
<a href="#" onclick="ajaxRead('data.xml'); return false">See the demonstration</a>.</p>
<div id="dataArea"></div>
</body>
</html>
|
You’ll notice we’re calling the function in the same way as last time, via a link, and we’re putting data into a DIV (this time named “dataArea”). The ajaxRead() function is similar, except for one difference: the onreadystatechange function. Let’s have a look at that first: xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
processXML(xmlObj.responseXML);
}
}
|
We no longer have the updateObj function. Instead, we invoke a new function called processXML(). This function will take the XML document itself (which the ajaxRead function retrieved) and process it. (The “XML document itself” to which I refer is the parameter “xmlObj.responseXML.”) Let’s analyze that processXML function now. Here it is again:
function processXML(obj){
var dataArray = obj.getElementsByTagName('pet');
var dataArrayLen = dataArray.length;
var insertData = '<table style="width:150px; border: solid 1px #000"><tr><th>'
+ 'Pets</th></tr>';
for (var i=0; i<dataArrayLen; i++){
insertData += '<tr><td>' + dataArray[i].firstChild.data + '</td></tr>';
}
insertData += '</table>';
document.getElementById ('dataArea').innerHTML = insertData;
} |
First, a few variables are defined. “dataArray” becomes an array of all the <pet> nodes (not the node data, just the nodes). “dataArrayLen” is just the length of that array, used for our for loop. “insertData” is the beginning HTML for a table. Our next step is to loop through all of the <pet> elements (by using the “dataArray” variable) and add that data to the insertData variable. Here we create a table row, insert a table data node inside it, insert the text each <pet> element contains into the table data node, and append all that into the “insertData” variable. Thus, each time the loop continues, the insertData variable has a new row of data containing the name of one of the three pets. Following the appendage of new data rows, we insert a closing “</table>” tag into the “insertData” variable. This completes the table, and we’ve got one task left before closing this operation: we need to put this table on the page. Fortunately, thanks to the innerHTML property, this is easy. We fetch the ‘dataArea’ DIV via document.getElementById() and insert the “insertData” variable’s HTML into it. This makes the table appear!
--Next page-- |
FEEDBACK
COMMENTS
PRINT
SUBMIT TUTORIAL
RSS
Add comment
(Comments: 0)
