|
在这篇文章中，我们将学会怎样对数据作更复杂的处理。作为一个示例，我们会准备一组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 -W3CDTD HTML 4.01EN
httpwww.w3.orgTRhtml4strict.dtd
html lang=zh dir=ltr
head
meta http-equiv=Content-Type content=texthtml; charset=gb2312
title使用Ajax开发Web应用程序 - 示例title
script type=textjavascript!--
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=width150px; border solid 1px #000trth'
+ 'Petsthtr';
for (var i=0; idataArrayLen; i++){
insertData += 'trtd' + dataArray[i].firstChild.data + 'tdtr';
}
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=dataAreadiv
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 style=width150px; border solid 1px #000trth'
+ 'Petsthtr';
for (var i=0; idataArrayLen; i++){
insertData += 'trtd' + dataArray[i].firstChild.data + 'tdtr';
}
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函数看起来就像这样：
function processXML(obj){
var dataArray = obj.getElementsByTagName('pets')[0].childNodes;
var dataArrayLen = dataArray.length;
var insertData = 'table style=width150px; border solid 1px #000trth'
+ 'Petsthtr';
for (var i=0; idataArrayLen; i++){
if(dataArray[i].tagName){
insertData += 'trtd' + dataArray[i].tagName + 'tdtr';
}
}
insertData += 'table';
document.getElementById ('dataArea').innerHTML = insertData;
}
作者：Sheneyan
没有相关教程
| 
注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！ 本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网] 
