如何使用ajax开发web应用程序(二)_Web开发_学习笔记★闵涛★计算机学习电脑编程软硬件技巧


	转至繁体中文版	\| 网站首页 \| 图文教程 \| 资源下载 \| 站长博客 \| 图片素材 \| 武汉seo \| 武汉网站优化 \|

如何使用ajax开发web应用程序(二)

作者：闵涛文章来源：闵涛的学习笔记点击数：1502 更新时间：2009/4/23 11:30:55

作者： Jonathan Fenocchi
时间：2005.10.26
译者：Sheneyan
英文原文：
http://www.webreference.com/programming/javascript/jf/column13/

在上一篇文章中，我们讨论了如何通过javascript从一个远程XML文件中取得数据。在这篇文章中，我们将学会怎样对数据作更复杂的处理。作为一个示例，我们会准备一组XML数据，将数据分割成独立的片断并以不同的方式展示这些片断（取决于它们是如何被标识的）。

这篇文章是建立在上一篇文章中构造的示例代码的基础之上，所以如果你不能理解我们现在的代码，你可以回过头去读第一篇文章（sheneyan注：就在上面）。

开始～

让我们开始我们的第一步：构造XML。我们准备写一个XML文档，它组织了一系列准备让javascript处理的数据，所以我们将一起组织一些节点和子节点（或者，元素和子元素）。在这个例子里，我们将使用一些家庭宠物的名字：

<?xml version="1.0" encoding="UTF-8"?>
<data>
<pets>
   <pet>猫</pet>
   <pet>狗</pet>
   <pet>鱼</pet>
</pets>
</data>

在上面，我们有这个XML声明（标明这个文档是一个XML 1.0 文档，使用UTF-8编码），一个根元素（<data>）将下面所有的元素组合在一起，一个<pets>元素组织了所有的宠物，然后一个<pet>节点对应一只宠物。为了指定每一只宠物是什么类型的动物，我们在<pet>元素中设置了文本节点：猫，狗，鱼。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh" dir="ltr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>使用Ajax开发Web应用程序 - 示例</title>
    <script type="text/javascript"></script>
</head>
<body>
    <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>

（Sheneyan注：完整代码示例见 example_2.html ，XML文件见：data_2.xml）

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

（Sheneyan注：修改后的示例见：example_2_1.html ，XML文件见：data_2_1.xml）

这里所作的修改就是我们指向了<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.html ，XML文件见：data_2_2.xml）

关键的不同在于我们通过dataArray[i].getAttribute(''''type'''')取得值，它返回了当前<pet>节点的“type”属性的值。

继续...

现在我们已经知道了一些从一个单独的XML数据组中取回数据的有效方法，让我们看看如何从多个组中取回数据。和只是列出一个pets所拥有的内容不同，我们

[1] [2] 下一页