如何使用ajax開發(fā)web應用程序(二)35682

《如何使用ajax開發(fā)web應用程序(二)35682》由會員上傳分享，免費在線閱讀，更多相關內容在行業(yè)資料-天天文庫。

1、如何使用ajax開發(fā)web應用程序(二)35682本文由avenir2008貢獻如何使用ajax開發(fā)web應用程序(二)選擇自anlydo的Blog關鍵字如何使用ajax開發(fā)web應用程序(二)出處作者：JonathanFenocchi時間：2005.10.26譯者：Sheneyan英文原文：http://www.webreference.com/programming/javascript/jf/column13/在上一篇文章中，我們討論了如何通過javascript從一個遠程XML文件中取得數(shù)據(jù)。在這篇文章中，我們將學會怎樣對數(shù)據(jù)作更復雜的

2、處理。作為一個示例，我們會準備一組XML數(shù)據(jù)，將數(shù)據(jù)分割成獨立的片斷并以不同的方式展示這些片斷（取決于它們是如何被標識的）。這篇文章是建立在上一篇文章中構造的示例代碼的基礎之上，所以如果你不能理解我們現(xiàn)在的代碼，你可以回過頭去讀第一篇文章（sheneyan注：就在上面）。開始～讓我們開始我們的第一步：構造XML。我們準備寫一個XML文檔，它組織了一系列準備讓javascript處理的數(shù)據(jù)，所以我們將一起組織一些節(jié)點和子節(jié)點（或者，元素和子元素）。在這個例子里，我們將使用一些家庭寵物的名字：

3、UTF-8"?>貓狗魚在上面，我們有這個XML聲明（標明這個文檔是一個XML1.0文檔，使用UTF-8編碼），一個根元素（）將下面所有的元素組合在一起，一個元素組織了所有的寵物，然后一個節(jié)點對應一只寵物。為了指定每一只寵物是什么類型的動物，我們在元素中設置了文本節(jié)點：貓，狗，魚。使用Ajax開發(fā)web應用程序這個頁面演示了AJAX技術如何通過

4、動態(tài)讀取一個遠程文件來更新一個網頁的內容－－不需要任何網頁的重新加載。注意：這個例子對于禁止js的用戶來說沒有效果。這個頁面將演示如從取回并處理成組的XML數(shù)據(jù)。被取回的數(shù)據(jù)將會以表格形式輸出到底下。查看演示.（Sheneyan注：完整代碼示例見example_2.html，XML文件見：data_2.xml）你會注意到我們和上次一樣以同樣的方式（通過一個超鏈接）調用了這個函數(shù)，而且我們將數(shù)據(jù)放入一個DIV（這次這個東東叫做“dataArea”）。這個ajaxRead()函數(shù)和上次很接近，除了一點不同：onreadystatechange函數(shù)。

5、讓我們先看一下這個函數(shù)：xmlObj.onreadystatechange=function(){if(xmlObj.readyState==4){processXML(xmlObj.responseXML);}}我們取消了updateObj函數(shù)并用一個叫做processXML()的新函數(shù)來代替它。這個函數(shù)將得到XML文檔本身（也就是被ajaxRead函數(shù)取回的）并處理它。（這“XML文檔本身”我指的是參數(shù)“xmlObj.responseXML”）現(xiàn)在讓我們分析一下這個函數(shù)processXML。下面是它的代碼：functionprocessXM

6、L(obj){vardataArray=obj.getElementsByTagName('pet');vardataArrayLen=dataArray.length;varinsertData=''+'Pets';for(vari=0;i

7、dataArray”作為所有節(jié)點的數(shù)組（不是節(jié)點數(shù)據(jù)，只是節(jié)點）。“dataArrayLen”是這個數(shù)組的長度，用于我們的循環(huán)?！癷nsertData”則是一個表格的開頭的HTML。我們的第二步則是遍歷所有的元素（通過變量“dataArray”）并將數(shù)據(jù)添加到變量insertData中。這里我們會創(chuàng)建一個表格行，插入一個表格數(shù)據(jù)節(jié)點(td)進去，再將每一個元素的文本包含進這個表格數(shù)據(jù)節(jié)點，并將這些都添加進變量“insertData”。因此，每循環(huán)一次，變量insertData將添加一行包含三個寵物中之一名稱的新數(shù)據(jù)。新數(shù)據(jù)行添加完后，我們插入一

8、個“”結束標簽到變量“insertData”。這完成了這個表格，然后我只剩這最后一步來達成我們的目標：我們需要將這個表格放到頁面上。幸運的是，我們得感