作者：Jonathan Fenocchi
時間：2005.10.26
譯者：Sheneyan
英文原文：
http://www.webreference.com/programming/javascript/jf/column13/
在上一篇文章中，我們討論了如何通過javascript從一個遠程XML文件中取得數據。在這篇文章中，我們將學會怎樣對數據作更復雜的處理。作為一個示例，我們會準備一組XML數據，將數據分割成獨立的片斷并以不同的方式展示這些片斷（取決于它們是如何被標識的）。
這篇文章是建立在上一篇文章中構造的示例代碼的基礎之上，所以如果你不能理解我們現在的代碼，你可以回過頭去讀第一篇文章（sheneyan注：就在上面）。
開始～
讓我們開始我們的第一步：構造XML。我們準備寫一個XML文檔，它組織了一系列準備讓javascript處理的數據，所以我們將一起組織一些節(jié)點和子節(jié)點（或者，元素和子元素）。在這個例子里，我們將使用一些家庭寵物的名字：
<?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>節(jié)點對應一只寵物。為了指定每一只寵物是什么類型的動物，我們在<pet>元素中設置了文本節(jié)點：貓，狗，魚。
<!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開發(fā)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開發(fā)web應用程序</h1>
<p>這個頁面演示了AJAX技術如何通過動態(tài)讀取一個遠程文件來更新一個網頁的內容－－不需要任何網頁的重新加載。注意：這個例子對于禁止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）
新聞熱點
疑難解答
圖片精選
