如何使用Ajax技术开发Web应用程序（２）

【 tulaoshi.com - Web开发 】

＜h1 使用Ajax开发web应用程序＜/h1
＜p 这个页面演示了AJAX技术如何通过动态读取一个远程文件来更新一个网页的内容－－不需要任何网页的重新加载。注意：这个例子对于禁止js的用户来说没有效果。＜/p
＜p 这个页面将演示如从取回并处理成组的XML数据。被取回的数据将会以表格形式输出到底下。
＜a href="#" onclick="ajaxRead('data_2.xml'); return false" 查看演示＜/a .＜/p
＜div id="dataArea" ＜/div
＜/body
＜/html

你会注意到我们和上次一样以同样的方式（通过一个超链接）调用了这个函数，而且我们将数据放入一个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;
}

这里所作的修改就是我们指向了＜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.htm ，XML文件见：附件： data_2_3.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;
}