精彩专题推荐:建站之入门课 建站之必修课 建站之关键课 网站价值所在 流量提高专题 css+div 标准 个人网站打造全过程
返回建站学首页
导航:
建站首页 | 网站设计 | 网站开发 | 网站运营 | 网页软件 | 建站指南 | 搜索优化 | 图像处理 | 视频教程 | 书籍教程 | 建站专题
当前位置:首页>网站开发>ajax教程>正文

如何使用ajax开发web应用程序[2]


来源: 时间:06-12-24 点击: 点击这里收藏本文


  就像你猜的一样,函数简单多了。因为代码变得简单,它也会变得更有效率。和我们比较老的函数的唯一的不同在于这个变量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;
 
 

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

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

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

  把此文章收藏到:          
广而告之
文章搜索
  • Google JZxue.Com

关于我们 | 联系我们 | 友情链接 | 网站地图
Copyright © 2005 - 2006 建站学 All rights reserved.