好学IT学院:IT信息技术分享交流平台
来源:blueidea  作者:Sheneyan-译  发布时间:2006-12-25  ★★★加入收藏〗〖手机版
摘要:作者: Jonathan Fenocchi时间:2005.10.26译者:Sheneyan英文原文:http://www.webreference.com/programming/javascript/jf/column13/在上一篇文章中……

作者: 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"><!--

function ajaxRead(file){
    var xmlObj = null;
    if(window.XMLHttpRequest){
        xmlObj = new XMLHttpRequest();
    } else if(window.ActiveXObject){
        xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        return;
    }
    xmlObj.onreadystatechange = function(){
      if(xmlObj.readyState == 4){
        processXML(xmlObj.responseXML);
      }
    }
    xmlObj.open ('GET', file, true);
    xmlObj.send ('');

}

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].firstChild.data + '</td></tr>';
    }
    insertData += '</table>';
    document.getElementById ('dataArea').innerHTML = insertData;

}

//--></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>

你会注意到我们和上次一样以同样的方式(通过一个超链接)调用了这个函数,而且我们将数据放入一个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><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将添加一行包含三个宠物中之一名称的新数据。

WEB 2.0时代:论协同软件的核心价值
  2000年以前,信息化的整体应用框架大部分还是以ERP为主。2000以后,许多用户和厂商都意识到供应链和客户关系对于信息化管理的重…
  • 好学考试H5触屏版开放内测
  • 好学触屏公众号虎力全开、杨帆起航!