如何使用ajax開(kāi)發(fā)web應(yīng)用程序(二)35682

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

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

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

3、UTF-8"?>貓狗魚(yú)在上面，我們有這個(gè)XML聲明（標(biāo)明這個(gè)文檔是一個(gè)XML1.0文檔，使用UTF-8編碼），一個(gè)根元素（）將下面所有的元素組合在一起，一個(gè)元素組織了所有的寵物，然后一個(gè)節(jié)點(diǎn)對(duì)應(yīng)一只寵物。為了指定每一只寵物是什么類(lèi)型的動(dòng)物，我們?cè)谠刂性O(shè)置了文本節(jié)點(diǎn)：貓，狗，魚(yú)。使用Ajax開(kāi)發(fā)web應(yīng)用程序這個(gè)頁(yè)面演示了AJAX技術(shù)如何通過(guò)

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

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

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

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

8、個(gè)“”結(jié)束標(biāo)簽到變量“insertData”。這完成了這個(gè)表格，然后我只剩這最后一步來(lái)達(dá)成我們的目標(biāo)：我們需要將這個(gè)表格放到頁(yè)面上。幸運(yùn)的是，我們得感