如何使用ajax开发web应用程序（2）

作者： Jonathan Fenocchi

译者：Sheneyan(子乌)

时间：2005.10.26

英文原文：http://www.webreference.com/programming/javascript/jf/column13/

　　在上一篇文章中，我们讨论了如何通过javascript从一个远程XML文件中取得数据。在这篇文章中，我们将学会怎样对数据作更复杂的处理。作为一个示例，我们会准备一组XML数据，将数据分割成独立的片断并以不同的方式展示这些片断（取决于它们是如何被标识的）。

　　这篇文章是建立在上一篇文章中构造的示例代码的基础之上，所以如果你不能理解我们现在的代码，你可以回过头去读第一篇文章。

开始～

　　让我们开始我们的第一步：构造XML。我们准备写一个XML文档，它组织了一系列准备让javascript处理的数据，所以我们将一起组织一些节点和子节点（或者，元素和子元素）。在这个例子里，我们将使用一些家庭宠物的名字：


1	<? xml version = "1.0" encoding = "UTF-8" ?>
2	< data >
3	<pets>
4	<pet>猫</pet>
5	<pet>狗</pet>
6	<pet>鱼</pet>
7	</pets>
8	</ data >
	view plain \| print \| copy to clipboard \| ?

　　在上面，我们有这个XML声明（标明这个文档是一个XML 1.0 文档，使用UTF-8编码），一个根元素（<data>）将下面所有的元素组合在一起，一个<pets>元素组织了所有的宠物，然后一个<pet>节点对应一只宠物。为了指定每一只宠物是什么类型的动物，我们在<pet>元素中设置了文本节点：猫，狗，鱼。


1	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2	"http://www.w3.org/TR/html4/strict.dtd">
3	< html lang = "zh" dir = "ltr" >
4	<head>
5	<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
6	<title>使用Ajax开发Web应用程序 - 示例</title>
7	<script type="text/javascript"><!--
8	function ajaxRead(file){
9	var xmlObj = null;
10	if(window.XMLHttpRequest){
11	xmlObj = new XMLHttpRequest();
12	} else if(window.ActiveXObject){
13	xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
14	} else {
15	return;
16	}
17	xmlObj.onreadystatechange = function(){
18	if(xmlObj.readyState == 4){
19	processXML(xmlObj.responseXML);
20	}
21	}
22	xmlObj.open ('GET', file, true);
23	xmlObj.send ('');
24	}
25	function processXML(obj){
26	var dataArray = obj.getElementsByTagName('pet');
27	var dataArraydataArrayLen = dataArray.length;
28	var insertData = '<table style="width:150px; border: solid 1px #000"><tr><th>'
29	+ 'Pets</th></tr>';
30	for (var i=0; i<dataArrayLen; i++){
31	insertData += '<tr><td>' + dataArray[i].firstChild.data + '</td></tr>';
32	}
33	insertData += '</table>';
34	document.getElementById ('dataArea').innerHTML = insertData;
35	}
36	//--></script>
37	</head>
38	<body>
39	<h1>使用Ajax开发web应用程序</h1>
40	<p>这个页面演示了AJAX技术如何通过动态读取一个远程文件来更新一个网页的内容－－不需要任何网页的重新加载。注意：这个例子对于禁止js的用户来说没有效果。</p>
41	<p>这个页面将演示如从取回并处理成组的XML数据。被取回的数据将会以表格形式输出到底下。
42	< a href = "#" onclick = "ajaxRead('data_2.xml'); return false" >查看演示 </ a > . </ p >
43	<div id="dataArea"></div>
44	</body>
45	</ html >
	view plain \| print \| copy to clipboard \| ?

<!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"></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）

　　你会注意到我们和上次一样以同样的方式（通过一个超链接）调用了这个函数，而且我们将数据放入一个DIV（这次这个东东叫做dataArea）。这个ajaxRead()函数和上次很接近，除了一点不同：onreadystatechange函数。让我们先看一下这个函数：


1	xmlObj.onreadystatechange = function (){
2	if(xmlObj.readyState == 4){
3	processXML(xmlObj.responseXML);
4	}
5	}
	view plain \| print \| copy to clipboard \| ?

　　我们取消了updateObj函数并用一个叫做processXML()的新函数来代替它。这个函数将得到XML文档本身（也就是被ajaxRead函数取回的）并处理它。（这XML文档本身我指的是参数xmlObj.responseXML）

　　现在让我们分析一下这个函数processXML。下面是它的代码：


1	function processXML(obj){
2	var dataArray = obj.getElementsByTagName('pet');
3	var dataArrayLen = dataArray.length;
4	var insertData = '<table style="width:150px; border: solid 1px #000"><tr><th>'
5	+ 'Pets</th></tr>';
6	for (var i=0; i<dataArrayLen; i++){
7	insertData += '<tr><td>' + dataArray[i].firstChild.data + '</td></tr>';
8	}
9	insertData += '</table>';
10	document.getElementById ('dataArea').innerHTML = insertData;
11	}
	view plain \| print \| copy to clipboard \| ?

　　首先，我们定义了一些变量。dataArray作为所有<pet>节点的数组（不是节点数据，只是节点）。dataArrayLen是这个数组的长度，用于我们的循环。insertData则是一个表格的开头的HTML。

　　我们的第二步则是遍历所有的<pet>元素（通过变量dataArray）并将数据添加到变量insertData中。这里我们会创建一个表格行，插入一个表格数据节点(td)进去，再将每一个<pet>元素的文本包含进这个表格数据节点，并将这些都添加进变量insertData。因此，每循环一次，变量insertData将添加一行包含三个宠物中之一名称的新数据。

　　新数据行添加完后，我们插入一个</table>结束标签到变量insertData。这完成了这个表格，然后我只剩这最后一步来达成我们的目标：我们需要将这个表格放到页面上。幸运的是，我们得感谢innerHTML属性，这很简单。我们通过函数document.getElementById()取得DIVdataArea并将变量insertData中的HTML插进去。嗯，这个表格冒出来了！

我们继续之前……

　　我得指出两点：

　　首先，你会注意到我们并没有使用节点<pets>。这事因为我们只有一个数据组（<pets>）以及后来所有的元素（每一个<pet>元素）；这些子节点包含了不同的数据但它们有相同的名字。在这个例子中，这个节点能够被忽略。然而，将所有的元素<pet>放进<pets>元素还是比较好，而不是让这些<pet>元素自己散放（但仍然在data元素里面）。

　　另外一种方式是给每一个宠物放一个指定的标签，比如：


1	<? xml version = "1.0" encoding = "UTF-8" ?>
2	< data >
3	<pets>
4	<猫 />
5	<狗 />
6	<鱼 />
7	</pets>
8	</ data >
	view plain \| print \| copy to clipboard \| ?

　　然后我们能够遍历元素<pets>里的节点。这个processXML函数看起来就像这样：


1	function processXML(obj){
2	var dataArray = obj.getElementsByTagName('pets')[0].childNodes;
3	var dataArrayLen = dataArray.length;
4	var insertData = '<table style="width:150px; border: solid 1px #000"><tr><th>'
5	+ 'Pets</th></tr>';
6	for (var i=0; i<dataArrayLen; i++){
7	if(dataArray[i].tagName){
8	insertData += '<tr><td>' + dataArray[i].tagName + '</td></tr>';
9	}
10	}
11	insertData += '</table>';
12	document.getElementById ('dataArea').innerHTML = insertData;
13	}
	view plain \| print \| copy to clipboard \| ?

（Sheneyan注：修改后的示例见：example_2_1.html，XML文件见：data_2_1.xml）

　　这里所作的修改就是我们指向了<pets>组元素（这个[0]意味这是第一个，即使它就是唯一的那一个）以及它的子节点（元素<猫 />，<狗 />，<鱼 />）。因为文本元素分割了这几个元素（空格被认为是一个节点），我们需要确定只有那些有标签名的节点（嗯，也就是只有标签）通过。然后我们输出每一个标签的名字。因为每一个标签名是一个宠物，我们不需要取得每一个节点的数据－节点名本身已经足够。去看一下它是怎么工作的吧。

　　还有另外一种方式来完成我们上面的工作，就是给每一个<pet>节点设置一个属性值。你的XML文档看起来就像这样：


1	<? xml version = "1.0" encoding = "UTF-8" ?>
2	< data >
3	<pets>
4	<pet type="猫" />
5	<pet type="狗" />
6	<pet type="鱼" />
7	</pets>
8	</ data >
	view plain \| print \| copy to clipboard \| ?

　　你只需要稍微修改一下你的processXML函数，它变成这样子了：


1	function processXML(obj){
2	var dataArray = obj.getElementsByTagName('pet');
3	var dataArrayLen = dataArray.length;
4	var insertData = '<table style="width:150px; border: solid 1px #000"><tr><th>'
5	+ 'Pets</th></tr>';
6	for (var i=0; i<dataArrayLen; i++){
7	insertData += '<tr><td>' + dataArray[i].getAttribute('type') + '</td></tr>';
8	}
9	insertData += '</table>';
10	document.getElementById ('dataArea').innerHTML = insertData;
11	}
	view plain \| print \| copy to clipboard \| ?

（Sheneyan注：修改后的示例见：example_2_2.html，XML文件见：data_2_2.xml）

　　关键的不同在于我们通过dataArray[i].getAttribute('type')取得值，它返回了当前<pet>节点的type属性的值。

继续...

　　现在我们已经知道了一些从一个单独的XML数据组中取回数据的有效方法，让我们看看如何从多个组中取回数据。和只是列出一个pets所拥有的内容不同，我们假设我们有一个针对我们宠物的日课表。因为它们都有不同的需要，每一只宠物都得仔细的照顾。面对这种情况，动物的看管员需要一个每日依据。现在来让我们将这些放入一个良好格式的XML：


1	<? xml version = "1.0" encoding = "UTF-8" ?>
2	< data >
3	<pets>
4	<pet>猫
5	<task>喂食</task>
6	<task>饮水</task>
7	<task>抓跳蚤</task>
8	</pet>
9	<pet>狗
10	<task>喂食</task>
11	<task>饮水</task>
12	<task>带出去遛遛</task>
13	</pet>
14	<pet>鱼
15	<task>喂食</task>
16	<task>检查氧气，水的纯度，其它</task>
17	</pet>
18	</pets>
19	</ data >
	view plain \| print \| copy to clipboard \| ?

　　也许这个看起来很奇怪，但这就是我们正在创建的子组(sub-group)。每一个<pet>元素都是一个组<pets>的子组，而每一个<task>则是每一个<pet>组的子元素。

　　在我继续之前，你也许希望将你的表格用一些css美化一下，比如：


1	< style type= "text/css" ><!--
2	table, tr, th, td {
3	border: solid 1px #000;
4	border-collapse: collapse;
5	padding: 5px;
6	}
7	--></style>
	view plain \| print \| copy to clipboard \| ?

　　这让这个表格更容易读取。现在让我们去研究函数processXML：


1	function processXML(obj){
2	var dataArray = obj.getElementsByTagName('pet');
3	var dataArrayLen = dataArray.length;
4	var subAry, subAryLen;
5	var insertData = '<table><tr><th>'
6	+ 'Pets</th><th>Tasks</th></tr>';
7	for (var i=0; i<dataArrayLen; i++){
8	insertData += '<tr><td>' + dataArray[i].firstChild.data + '</td>';
9	subAry = dataArray[i].getElementsByTagName('task');
10	subAryLen = subAry.length;
11	insertData += '<td>';
12	for(var j=0; j<subAryLen; j++){
13	insertData += subAry[j].firstChild.data;
14	if( subAryLen != j+1 ) { insertData += ', '; }
15	}
16	insertData += '</td></tr>';
17	}
18	insertData += '</table>';
19	document.getElementById ('dataArea').innerHTML = insertData;
20
	view plain \| print \| copy to clipboard \| ?

（Sheneyan注：修改后的示例见：example_2_3.html，XML文件见：data_2_3.xml）

　　新增加的内容，首先是两个新变量的声明：subAry和subAryLen。它们和之前的变量dataArray和dataArrayLen类似，除了它们指向不同的数组（特别是它们将指向那些task元素－当dataArray和dataArrayLen指向pet元素的时候）。

　　我们也改变了变量insertData的初始值－我们增加了一个表格头（<th>）给我们的tasks字段。

　　下一步改变在于循环：我们把值赋给subAry和subAryLen变量。变量subAry成为当前<pet>的<task>元素的数组。变量subAryLen成为这个数组的长度，直到这个数组发生变化（当外部循环走到下一个<pet>时）。

　　我们创建了一个内嵌的循环来处理所有的<task>元素，一次一个。大概来说，我们创建一个新的数据格，放进一个用逗号分隔的任务列表，然后关闭数据表格以及当前行。尤其，这些<task>元素节点数据（任务本身，比如，喂食）放置入变量insertData里的数据格。

　　接下来，我们检验当前<pet>是否有其它更多的task。如果还有，我们增加一个逗号（，）到变量insertData来让每一个任务使用一个逗号分隔（a, b, c，而不是a, b, c,－注意，最后一个逗号在第二个任务那里，所以我们不需要）。这个工作在我们取得subAry数组长度的时候（给循环的“j”变量加1）就完成了。因为这个循环会在下一个循环的时候把变量j递增1,j会比它这次检验时还多1。因此，如果j+1（或者，当循环再次开始的时候j的值）等于subAryLen（当前<pet>节点的<task>节点数目），这个循环将停止。如果循环不再运行，我们就不再添加新的逗号来分隔任务。所以如果j+1不等于subAryLen，我们直到我们可以安全的加入逗号到insertData，为下一个<task>作准备。

　　一旦内循环结束，我们关闭task数据格以及pet行。外部循环会重新开始创建一个新行以及移动到下一个<pet>。这个处理一直进行到所有的<pet>元素（以及每一个pet的所有<task>元素）都被处理完。

有其他方法吗？

　　你也许会想：“那javascript变得相当复杂了，但它只会随着XML越来越复杂而跟着变复杂，也许我们能够简化XML，然后，简化javascript”。如果你这么想，很棒，因为你完全正确。我之前展示的不同方法之一，我详细说明的那个也许能够成为最合适的。我们怎么使用属性来对应每一只宠物以及相应任务？XML看起来会变成怎样？


1	<? xml version = "1.0" encoding = "UTF-8" ?>
2	< data >
3	<pets>
4	<pet type="猫" tasks="喂食, 饮水, 抓跳蚤" />
5	<pet type="狗" tasks="喂食, 饮水, 带出去遛遛" />
6	<pet type="鱼" tasks="喂食, 检查氧气，水的纯度，其它" />
7	</pets>
8	</ data >
	view plain \| print \| copy to clipboard \| ?

　　哇哦！看起来简单多了。让我们看看我们的processXML函数如何修改：


1	function processXML(obj){
2	var dataArray = obj.getElementsByTagName('pet');
3	var dataArrayLen = dataArray.length;
4	var insertData = '<table><tr><th>'
5	+ 'Pets</th><th>Tasks</th></tr>';
6	for (var i=0; i<dataArrayLen; i++){
7	insertData += '<tr><td>' + dataArray[i].getAttribute('type') + '</td>'
8	'<td>' + dataArray[i].getAttribute( 'tasks' ) + '</td></tr>' ;
9	}
10	insertData += '</table>';
11	document.getElementById ('dataArea').innerHTML = insertData;
	view plain \| print \| copy to clipboard \| ?

（Sheneyan注：修改后的示例见：example_2_4.html，XML文件见：data_2_4.xml）

　　就像你猜的一样，函数简单多了。因为代码变得简单，它也会变得更有效率。和我们比较老的函数的唯一的不同在于这个变量insertData现在插入更多的HTML，尤其是两个新变量“type”和“tasks”。就如我们较早之前所学的，那些属性是我们从XML文档的<pet>元素中取得的，而且每个pet的属性都有不同的值。对于你自己修改这个XML文件以适应你的进度的变动来说也许是最简单的方法。例如，如果你最终把你的猫身上的跳蚤抓光了，你只要简单从你的猫的每日任务表中把“抓跳蚤”删除，然而在之前我们使用的XML中，实现起来也许会觉得糊里糊涂。

　　最后的XML格式化的方法是将两部分混合。现在，我们将使用属性和不同的标签。让我们看一下示例XML：


1	<? xml version = "1.0" encoding = "UTF-8" ?>
2	< data >
3	<pets>
4	<猫 tasks="喂食, 饮水, 抓跳蚤" />
5	<狗 tasks="喂食, 饮水, 带出去遛遛" />
6	<鱼 tasks="喂食, 检查氧气，水的纯度，其它" />
7	</pets>
8	</ data >
	view plain \| print \| copy to clipboard \| ?

　　这也许是最便于理解的XML。让我们分析一下我们为了让processXML函数运作起来所作的变更：


1	function processXML(obj){
2	var dataArray = obj.getElementsByTagName('pets')[0].childNodes;
3	var dataArrayLen = dataArray.length;
4	var insertData = '<table><tr><th>'
5	+ 'Pets</th><th>Tasks</th></tr>';
6	for (var i=0; i<dataArrayLen; i++){
7	if(dataArray[i].tagName){
8	insertData += '<tr><td>' + dataArray[i].tagName + '</td>'
9	+ '<td>' + dataArray[i].getAttribute('tasks') + '</td></tr>';
10	}
11	}
12	insertData += '</table>';
13	document.getElementById ('dataArea').innerHTML = insertData;
14	}
	view plain \| print \| copy to clipboard \| ?

（Sheneyan注：修改后的示例见：example_2_5.html，XML文件见：data_2_5.xml）

　　dataArray现在指向了<pets>的子节点，将它们作为一个数组对待（换句话说，dataArray现在是在<pets>节点内所有节点的数组）。这事因为每一个标签都不同（<猫 />，<狗 />，<鱼 />），所以我们不能使用这些元素的名称来搜索它们（而之前我们可以使用<pet>，因为所有的元素都是<pet>）。

　　还是一样，每个节点之间的有空格，所以在我们的处理过程中得排除掉文本节点。我们能够检验标签名是否存在－文本节点是节点但没有标签，而<猫 />，<狗 />，<鱼 />节点都是标签。所以如果一个标签有名字，那我们能够将数据插入变量insertData。我们插入的数据是一个表格并有两个表格数据格。这第一个单元格是标签名，也就是宠物的类型（猫，狗或鱼），而第二个单元格则是指定动物的“tasks”属性值（比如“喂食或饮水”）。

结束语

　　在这篇文章里，我演示了这个例子的很多变化，你可以随意试验它们来检验哪个更适合你。只要记住一点，XML是可扩展的，所以没有错误的方法来组合你的数据，虽然经常有一个最好的方法。而且，要注意让你的XML保持格式良好。记住很多问题来自于忘记结束一个标签（比如<狗 />而不是<狗>;除非这个节点中有数据，比如下面的<狗>这里有数据哦</狗>）。

　　我意图使XML和javascript的应用不糊涂而变得明朗。一步步的学习处理更多的数据，你能够将ajax运用于更大的用途。我希望看到ajax更多的应用于企业网站，及其它。所以如果你将这些知识应用于实践，我很高兴了解到你学到了什么。

关于作者

　　Jonathan Fenocchi是一个网络开发者，主攻web设计，客户端脚本，php脚本。他的网站位于：http://www.slightlyremarkable.com

posted on 2006-03-22 09:40 汪杰阅读(133) 评论(0) 编辑收藏引用