</body>
</html>
（Sheneyan注：完整代码示例见 example_2.html ，XML文件见：data_2.xml）
你会注意到我们和上次一样以同样的方式（通过一个超链接）调用了这个函数，而且我们将数据放入一个DIV（这次这个东东叫做“dataArea”）。这个ajaxRead()函数和上次很接近，除了一点不同：onreadystatechange函数。让我们先看一下这个函数：
xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
processXML(xmlObj.responseXML);
}
}
我们取消了updateObj函数并用一个叫做processXML()的新函数来代替它。这个函数将得到XML文档本身（也就是被ajaxRead函数取回的）并处理它。（这“XML文档本身”我指的是参数“xmlObj.responseXML”）
现在让我们分析一下这个函数processXML。下面是它的代码：
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;
}
首先，我们定义了一些变量。“dataArray”作为所有<pet>节点的数组（不是节点数据，只是节点）。“dataArrayLen”是这个数组的长度，用于我们的循环。“insertData”则是一个表格的开头的HTML。
我们的第二步则是遍历所有的<pet>元素（通过变量“dataArray”）并将数据添加到变量insertData中。这里我们会创建一个表格行，插入一个表格数据节点(td)进去，再将每一个<pet>元素的文本包含进这个表格数据节点，并将这些都添加进变量“insertData”。因此，每循环一次，变量insertData将添加一行包含三个宠物中之一名称的新数据。
新数据行添加完后，我们插入一个“</table>”结束标签到变量“insertData”。这完成了这个表格，然后我只剩这最后一步来达成我们的目标：我们需要将这个表格放到页面上。幸运的是，我们得感谢innerHTML属性，这很简单。我们通过函数document.getElementById()取得DIV“dataArea”并将变量“insertData”中的HTML插进去。嗯，这个表格冒出来了！
我们继续之前……
我得指出两点：
首先，你会注意到我们并没有使用节点<pets>。这事因为我们只有一个数据组（<pets>）以及后来所有的元素（每一个<pet>元素）；这些子节点包含了不同的数据但它们有相同的名字。在这个例子中，这个节点能够被忽略。然而，将所有的元素<pet>放进<pets>元素还是比较好，而不是让这些<pet>元素自己散放（但仍然在data元素里面）。
另外一种方式是给每一个宠物放一个指定的标签，比如：
<?xml version="1.0" encoding="UTF-8"?>
<data>
<pets>
<猫 />
<狗 />
<鱼 />
</pets>
</data>
然后我们能够遍历元素<pets>里的节点。这个processXML函数看起来就像这样：
function processXML(obj){
var dataArray = obj.getElementsByTagName('pets')[0].childNodes;
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++){
if(dataArray[i].tagName){
insertData += '<tr><td>' + dataArray[i].tagName + '</td></tr>';
}
}
insertData += '</table>';
document.getElementById ('dataArea').innerHTML = insertData;
}
（Sheneyan注：修改后的示例见：example_2_1.html ，XML文件见：data_2_1.xml）
这里所作的修改就是我们指向了<pets>组元素（这个“[0]”意味这是第一个，即使它就是唯一的那一个）以及它的子节点（元素<猫 />，<狗 />，<鱼 />）。因为文本元素分割了这几个元素（空格被认为是一个节点），我们需要确定只有那些有标签名的节点（嗯，也就是只有标签）通过。然后我们输出每一个标签的名字。因为每一个标签名是一个宠物，我们不需要取得每一个节点的数据－节点名本身已经足够。去看一下它是怎么工作的吧。
还有另外一种方式来完成我们上面的工作，就是给每一个<pet>节点设置一个属性值。你的XML文档看起来就像这样：
<?xml version="1.0" encoding="UTF-8"?>
<data>
<pets>
<pet type="猫" />
<pet type="狗" />
<pet type="鱼" />
</pets>
</data>
你只需要稍微修改一下你的processXML函数，它变成这样子了：
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].getAttribute('type') + '</td></tr>';
}
insertData += '</table>';
document.getElementById ('dataArea').innerHTML = insertData;
}
（Sheneyan注：修改后的示例见：example_2_2.html ，XML文件见：data_2_2.xml）
关键的不同在于我们通过dataArray[i].getAttribute('type')取得值，它返回了当前<pet>节点的“type”属性的值。
继续...
现在我们已经知道了一些从一个单独的XML数据组中取回数据的有效方法，让我们看看如何从多个组中取回数据。和只是列出一个pets所拥有的内容不同，我们假设我们有一个针对我们宠物的日课表。因为它们都有不同的需要，每一只宠物都得仔细的照顾。面对这种情况，动物的看管员需要一个每日依据。现在来让我们将这些放入一个良好格式的XML：
<?xml version="1.0" encoding="UTF-8"?>
<data>
<pets>
<pet>Cat
<task>Feed</task>
<task>Water</task>
<task>Comb out fleas</task>
</pet>
<pet>Dog
<task>Feed</task>
<task>Water</task>
<task>Put outside</task>
</pet>
<pet>Fish
<task>Feed</task>
<task>Check oxygen, water purity, etc.</task>
</pet>
</pets>
</data>
也许这个看起来很奇怪，但这就是我们正在创建的子组(sub-group)。每一个<pet>元素都是一个组<pets>的子组，而每一个<task>则是每一个<pet>组的子元素。
在我继续之前，你也许希望将你的表格用一些css美化一下，比如：
<style type="text/css"><!--
table, tr, th, td {
border: solid 1px #000;
border-collapse: collapse;
padding: 5px;
}
--></style>
这让这个表格更容易读取。现在让我们去研究函数processXML：
function processXML(obj){
var dataArray = obj.getElementsByTagName('pet');
var dataArrayLen = dataArray.length;
var subAry, subAryLen;
var insertData = '<table><tr><th>'
+ 'Pets</th><th>Tasks</th></tr>';
for (var i=0; i<dataArrayLen; i++){
insertData += '<tr><td>' + dataArray[i].firstChild.data + '</td>';
subAry = dataArray[i].getElementsByTagName('task');
subAryLen = subAry.length;
insertData += '<td>';
for(var j=0; j<subAryLen; j++){
insertData += subAry[j].firstChild.data;
if( subAryLen != j+1 ) { insertData += ', '; }
}
insertData += '</td></tr>';
}
insertData += '</table>';
document.getElementById ('dataArea').innerHTML = insertData;
}
（Sheneyan注：修改后的示例见：example_2_3.html ，XML文件见：data_2_3.xml）
新增加的内容，首先是两个新变量的声明：“subAry”和“subAryLen”。它们和之前的变量“dataArray”和“dataArrayLen”类似，除了它们指向不同的数组（特别是它们将指向那些“task”元素－当“dataArray”和“dataArrayLen”指向“pet”元素的时候）。
我们也改变了变量“insertData”的初始值－我们增加了一个表格头（<th>）给我们的“tasks”字段。
下一步改变在于循环：我们把值赋给subAry和subAryLen变量。变量subAry成为当前<pet>的<task>元素的数组。变量subAryLen成为这个数组的长度，直到这个数组发生变化（当外部循环走到下一个<pet>时）。
我们创建了一个内嵌的循环来处理所有的<task>元素，一次一个。大概来说，我们创建一个新的数据格，放进一个用逗号分隔的任务列表，然后关闭数据表格以及当前行。尤其，这些<task>元素节点数据（任务本身，比如，“喂食”）放置入变量“insertData”里的数据格。
接下来，我们检验当前<pet>是否有其它更多的task。如果还有，我们增加一个逗号（，）到变量insertData来让每一个任务使用一个逗号分隔（“a, b, c”，而不是“a, b, c,”－注意，最后一个逗号在第二个任务那里，所以我们不需要）。这个工作在我们取得subAry数组长度的时候（给循环的“j”变量加1）就完成了。因为这个循环会在下一个循环的时候把变量“j”递增1,“j”会比它这次检验时还多1。因此，如果“j+1”（或者，“当循环再次开始的时候j的值”）等于subAryLen（当前<pet>节点的<task>节点数目），这个循环将停止。如果循环不再运行，我们就不再添加新的逗号来分隔任务。所以如果“j+1”不等于subAryLen，我们直到我们可以安全的加入逗号到“insertData”，为下一个<task>作准备。
一旦内循环结束，我们关闭task数据格以及pet行。外部循环会重新开始创建一个新行以及移动到下一个<pet>。这个处理一直进行到所有的<pet>元素（以及每一个pet的所有<task>元素）都被处理完。
有其他方法吗？
你也许会想：“那javascript变得相当复杂了，但它只会随着XML越来越复杂而跟着变复杂，也许我们能够简化XML，然后，简化javascript”。如果你这么想，很棒，因为你完全正确。我之前展示的不同方法之一，我详细说明的那个也许能够成为最合适的。我们怎么使用属性来对应每一只宠物以及相应任务？XML看起来会变成怎样？
<?xml version="1.0" encoding="UTF-8"?>
<data>
<pets>
<pet type="Cat" tasks="Feed, Water, Comb out fleas" />
<pet type="Dog" tasks="Feed, Water, Put outside" />
<pet type="Fish" tasks="Feed, Check oxygen, water 上一页 [1] [2] [3] [4] 下一页 | 
