|
作者：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 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;
??? }
??? //--></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）
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
