如何使用Ajax技术开发Web应用程序(2)
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;
}
新增加的内容，首先是两个新变量的声明：“subAry”和“subAryLen”。它们和之前的变量“dataArray”和“dataArrayLen”类似，除了它们指向不同的数组（非凡是它们将指向那些“task”元素－当“dataArray”和“dataArrayLen”指向“pet”元素的时候）。
copyright dedecms
我们也改变了变量“insertData”的初始值－我们增加了一个表格头（<th>）给我们的“tasks”字段。
copyright dedecms
下一步改变在于循环：我们把值赋给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>作预备。 copyright dedecms
一旦内循环结束，我们关闭task数据格以及pet行。外部循环会重新开始创建一个新行以及移动到下一个<pet>。这个处理一直进行到所有的<pet>元素（以及每一个pet的所有<task>元素）都被处理完。 copyright dedecms
有其他方法吗？ 本文来自织梦
你也许会想：“那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 purity, etc." />
</pets>
</data>
copyright dedecms
哇哦！看起来简单多了。让我们看看我们的processXML函数如何修改：
文章评论
共有位Admini5网友发表了评论 查看完整内容