开始～
让我们开始我们的第一步：构造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="#" >查看演示＜/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 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插进去。嗯，这个表格冒出来了！
我们继续之前……
打印文档
推荐好友 
返回顶部
增大字体 
减少字体