正在阅读:如何使用Ajax技术开发Web应用程序(2)如何使用Ajax技术开发Web应用程序(2)

2006-02-09 11:06 出处: 作者:Sheneyan 译 责任编辑:xietaoming

  新增加的内容,首先是两个新变量的声明:“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 purity, etc." />
  </pets>
</data>
 

  哇哦!看起来简单多了。让我们看看我们的processXML函数如何修改:

  function processXML(obj){
    var dataArray = obj.getElementsByTagName('pet');
    var dataArrayLen = dataArray.length;
    var insertData = '<table><tr><th>'
     + 'Pets</th><th>Tasks</th></tr>';
    for (var i=0; i<dataArrayLen; i++){
        insertData += '<tr><td>' + dataArray[i].getAttribute('type')             + '</td>'
+ '<td>' + dataArray[i].getAttribute('tasks') + '</td></tr>';
    }
    insertData += '</table>';
    document.getElementById ('dataArea').innerHTML = insertData;
}

  (Sheneyan注:修改后的示例见:example_2_4.html,XML文件见:data_2_4.xml

  就像你猜的一样,函数简单多了。因为代码变得简单,它也会变得更有效率。和我们比较老的函数的唯一的不同在于这个变量insertData现在插入更多的HTML,尤其是两个新变量“type”和“tasks”。就如我们较早之前所学的,那些属性是我们从XML文档的<pet>元素中取得的,而且每个pet的属性都有不同的值。对于你自己修改这个XML文件以适应你的进度的变动来说也许是最简单的方法。例如,如果你最终把你的猫身上的跳蚤抓光了,你只要简单从你的猫的每日任务表中把“减少跳蚤数量”删除,然而在之前我们使用的XML中,实现起来也许会觉得糊里糊涂。

  最后的XML格式化的方法是将两部分混合。现在,我们将使用属性和不同的标签。让我们看一下示例XML:

<?xml version="1.0" encoding="UTF-8"?>
<data>
  <pets>
    <猫 tasks="喂食, 饮水, 减少跳蚤数量" />
    <狗 tasks="喂食, 饮水, 带出去遛遛" />
    <鱼 tasks="喂食, 检查氧气,水的纯度,其它" />
  </pets>
</data> 

  这也许是最便于理解的XML。让我们分析一下我们为了让processXML函数运作起来所作的变更:

function processXML(obj){
    var dataArray = obj.getElementsByTagName('pets')[0].childNodes;
    var dataArrayLen = dataArray.length;
    var insertData = '<table><tr><th>'
     + 'Pets</th><th>Tasks</th></tr>';
    for (var i=0; i<dataArrayLen; i++){
      if(dataArray[i].tagName){
        insertData += '<tr><td>' + dataArray[i].tagName + '</td>'
            + '<td>' + dataArray[i].getAttribute('tasks') + '</td></tr>';
      }
  }
  insertData += '</table>';
  document.getElementById ('dataArea').innerHTML = insertData;
}

  (Sheneyan注:修改后的示例见:example_2_5.html,XML文件见:data_2_5.xml

  “dataArray”现在指向了<pets>的子节点,将它们作为一个数组对待(换句话说,dataArray现在是在<pets>节点内所有节点的数组)。这事因为每一个标签都不同(<猫 />,<狗 />,<鱼 />),所以我们不能使用这些元素的名称来搜索它们(而之前我们可以使用<pet>,因为所有的元素都是<pet>)。

  还是一样,每个节点之间的有空格,所以在我们的处理过程中得排除掉文本节点。我们能够检验标签名是否存在-文本节点是节点但没有标签,而<猫 />,<狗 />,<鱼 />节点都是标签。所以如果一个标签有名字,那我们能够将数据插入变量insertData。我们插入的数据是一个表格并有两个表格数据格。这第一个单元格是标签名,也就是宠物的类型(猫,狗或鱼),而第二个单元格则是指定动物的“tasks”属性值(比如“喂食或饮水”)。

  结束语

  在这篇文章里,我演示了这个例子的很多变化,你可以随意试验它们来检验哪个更适合你。只要记住一点,XML是“可扩展的”,所以没有“错误的”方法来组合你的数据,虽然经常有一个“最好的”方法。而且,要注意让你的XML保持格式良好。记住很多问题来自于忘记结束一个标签(比如<狗 />而不是<狗>;除非这个节点中有数据,比如下面的<狗>这里有数据哦</狗>)。

  我意图使XML和javascript的应用不糊涂而变得明朗。一步步的学习处理更多的数据,你能够将ajax运用于更大的用途。我希望看到ajax更多的应用于企业网站,及其它。所以如果你将这些知识应用于实践,我很高兴了解到你学到了什么(mail:jona#slightlyremarkable.com #换成@)。


  关于作者

  Jonathan Fenocchi(mail:jona#slightlyremarkable.com #换成@)是一个网络开发者,主攻web设计,客户端脚本,php脚本。
  他的网站位于http://www.slightlyremarkable.com

  第一篇:如何使用Ajax技术开发Web应用程序(1)
  第三篇:如何使用Ajax技术开发Web应用程序(3)

键盘也能翻页,试试“← →”键

相关文章

关注我们

最新资讯离线随时看 聊天吐槽赢奖品