AJax技术

如何使用Ajax技术开发Web应用程序(2)(2)

字号+ 作者:H5之家 来源:H5之家 2017-01-30 12:02 我要评论( )

这里所作的修改就是我们指向了pets组元素(这个“[0]”意味这是第一个,即使它就是唯一的那一个)以及它的子节点(元素猫 /,狗 /,鱼 /)。因为文本元素分割了这几个元素(空格被认为是一个节点),我们需要确定只

  这里所作的修改就是我们指向了<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><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注:修改后的示例见: ,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注:修改后的示例见: ,XML文件见:)

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Ajax 完整教程-(三)

    Ajax 完整教程-(三)

    2017-01-30 13:04

  • 基于Struts+ Spring+ Hibernate+ Ajax 技术的科研管理系统设计[J

    基于Struts+ Spring+ Hibernate+ Ajax 技术的科研管理系统设计[J

    2017-01-29 17:00

  • 小博老师解析JavaWeb核心技术

    小博老师解析JavaWeb核心技术

    2017-01-29 16:18

  • Ajax 技术一

    Ajax 技术一

    2017-01-29 16:06

网友点评