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

《如何使用ajax开发web应用程序(二)35682》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、如何使用ajax开发web应用程序(二)35682本文由avenir2008贡献如何使用ajax开发web应用程序(二)选择自anlydo的Blog关键字如何使用ajax开发web应用程序(二)出处作者：JonathanFenocchi时间：2005.10.26译者：Sheneyan英文原文：http://www.webreference.com/programming/javascript/jf/column13/在上一篇文章中，我们讨论了如何通过javascript从一个远程XML文件中取得数据。在这篇文章中，我们将学会怎样对数据作更复杂的

2、处理。作为一个示例，我们会准备一组XML数据，将数据分割成独立的片断并以不同的方式展示这些片断（取决于它们是如何被标识的）。这篇文章是建立在上一篇文章中构造的示例代码的基础之上，所以如果你不能理解我们现在的代码，你可以回过头去读第一篇文章（sheneyan注：就在上面）。开始～让我们开始我们的第一步：构造XML。我们准备写一个XML文档，它组织了一系列准备让javascript处理的数据，所以我们将一起组织一些节点和子节点（或者，元素和子元素）。在这个例子里，我们将使用一些家庭宠物的名字：

3、UTF-8"?>猫狗鱼在上面，我们有这个XML声明（标明这个文档是一个XML1.0文档，使用UTF-8编码），一个根元素（）将下面所有的元素组合在一起，一个元素组织了所有的宠物，然后一个节点对应一只宠物。为了指定每一只宠物是什么类型的动物，我们在元素中设置了文本节点：猫，狗，鱼。使用Ajax开发web应用程序这个页面演示了AJAX技术如何通过

4、动态读取一个远程文件来更新一个网页的内容－－不需要任何网页的重新加载。注意：这个例子对于禁止js的用户来说没有效果。这个页面将演示如从取回并处理成组的XML数据。被取回的数据将会以表格形式输出到底下。查看演示.（Sheneyan注：完整代码示例见example_2.html，XML文件见：data_2.xml）你会注意到我们和上次一样以同样的方式（通过一个超链接）调用了这个函数，而且我们将数据放入一个DIV（这次这个东东叫做“dataArea”）。这个ajaxRead()函数和上次很接近，除了一点不同：onreadystatechange函数。

5、让我们先看一下这个函数：xmlObj.onreadystatechange=function(){if(xmlObj.readyState==4){processXML(xmlObj.responseXML);}}我们取消了updateObj函数并用一个叫做processXML()的新函数来代替它。这个函数将得到XML文档本身（也就是被ajaxRead函数取回的）并处理它。（这“XML文档本身”我指的是参数“xmlObj.responseXML”）现在让我们分析一下这个函数processXML。下面是它的代码：functionprocessXM

6、L(obj){vardataArray=obj.getElementsByTagName('pet');vardataArrayLen=dataArray.length;varinsertData=''+'Pets';for(vari=0;i

7、dataArray”作为所有节点的数组（不是节点数据，只是节点）。“dataArrayLen”是这个数组的长度，用于我们的循环。“insertData”则是一个表格的开头的HTML。我们的第二步则是遍历所有的元素（通过变量“dataArray”）并将数据添加到变量insertData中。这里我们会创建一个表格行，插入一个表格数据节点(td)进去，再将每一个元素的文本包含进这个表格数据节点，并将这些都添加进变量“insertData”。因此，每循环一次，变量insertData将添加一行包含三个宠物中之一名称的新数据。新数据行添加完后，我们插入一

8、个“”结束标签到变量“insertData”。这完成了这个表格，然后我只剩这最后一步来达成我们的目标：我们需要将这个表格放到页面上。幸运的是，我们得感