快捷導(dǎo)航

JQuery讀取XML文件數(shù)據(jù)并顯示的實(shí)現(xiàn)代碼

更新時(shí)間：2009年12月16日 13:43:57 作者：

今天向大家演示如何通過(guò)JQuery框架為空白HTML文檔加載從XML文件讀取的數(shù)據(jù)并顯示出來(lái)。我們將會(huì)主要用到JQuery自帶過(guò)程$.get 。

準(zhǔn)備工作

在開(kāi)始之前我們需要做如下準(zhǔn)備工作：

1.創(chuàng)建一個(gè)名為DEMO.html空白html文件；（推薦使用Editplus創(chuàng)建）

2.熟悉JQuery框架的基本語(yǔ)法；（不熟悉沒(méi)關(guān)系，后面我會(huì)注釋得很詳細(xì)）

3.創(chuàng)建一個(gè)名為data.xml的XML文件用來(lái)存儲(chǔ)數(shù)據(jù)，XML的結(jié)構(gòu)下面會(huì)涉及到，你也可以下載我打包好的文件查看；

4.一個(gè)loading.gif圖片，這個(gè)圖片用于在將XML讀取出來(lái)的等待時(shí)間里面顯示在空白html文檔中

正式開(kāi)始

Step 1:首先讓我們看看這個(gè)data.xml的簡(jiǎn)單結(jié)構(gòu)，我這里演示的數(shù)據(jù)是"Saturn為您推薦的幾本書(shū)"，故為書(shū)籍信息，那么xml就包括書(shū)籍的名稱(chēng)，縮略圖和書(shū)籍描述信息；

以下為XML文件代碼：

復(fù)制代碼代碼如下:

 
<?xml version="1.0" encoding="utf-8" ?> 
<books> 
<book title="藏地密碼" imageurl="images/Tibet_Code.jpg"> 
<description> 
這里是概況(www.dbjr.com.cn) 
</description> 
</book> 

<book title="劍橋雅思6" imageurl="images/ielts.jpg"> 
<description> 
這里是概況(www.dbjr.com.cn) 
</description> 
</book> 

<book title="Professional ASP.NET" imageurl="images/asp.jpg"> 
<description> 
這里是概況(www.dbjr.com.cn) 
</description> 
</book> 
</books> 

其次，讓我們看看加載在空白HTML文檔里面的JavaScript代碼：

復(fù)制代碼代碼如下:

 
$(document).ready(function() 
{ 
$.get('myData.xml', function(d){ 
$('body').append('<h1> Saturn給你推薦幾本書(shū)： </h1>'); 
$('body').append('<dl />'); 

$(d).find('book').each(function(){ 

var $book = $(this); 
var title = $book.attr("title"); 
var description = $book.find('description').text(); 
var imageurl = $book.attr('imageurl'); 

var html = '<dt> <img class="bookImage" alt="" src="' + imageurl + '" /> </dt>'; 
html += '<dd> <span class="loadingPic" alt="Loading" />'; 
html += '<p class="title">' + title + '</p>'; 
html += '<p> ' + description + '</p>' ; 
html += '</dd>'; 

$('dl').append($(html)); 

$('.loadingPic').fadeOut(2000); 
}); 
}); 
}); 

Step 2:這里，我只講下JavaScript代碼原理與運(yùn)行流程，不過(guò)分討論語(yǔ)法，如果你對(duì)語(yǔ)法有任何疑問(wèn)，請(qǐng)給我留言或者查看JQuery相關(guān)文檔。

行1：當(dāng)HTML文檔準(zhǔn)備完畢之后（即html和JavaScript都下載完畢），會(huì)自動(dòng)觸發(fā)JQuery的 $(document).ready方法及里面的過(guò)程。顯然，這里首先執(zhí)行的是$.get方法。
行3：$.get的第一個(gè)參數(shù)是XML文件的相對(duì)路徑（注意路徑要填寫(xiě)正確，這里我們把XML和網(wǎng)頁(yè)文件放在同一文件夾）。第二個(gè)參數(shù)是一個(gè)Callback函數(shù)，即回調(diào)函數(shù)。就是說(shuō)通過(guò)get方法來(lái)請(qǐng)求這個(gè)XML文件的內(nèi)容，然后通過(guò)這個(gè)callback回調(diào)函數(shù)來(lái)操作里面的數(shù)據(jù)。而callback的參數(shù)d表示從XML回調(diào)過(guò)來(lái)的所有數(shù)據(jù)，有了這個(gè)參數(shù)d，我們就好進(jìn)行下面的內(nèi)容了。
行4：通過(guò)JavaScript在文檔的BODY中動(dòng)態(tài)添加一個(gè)標(biāo)簽<h1>，這個(gè)是頁(yè)面的總標(biāo)題，無(wú)關(guān)緊要；
行5：同樣在BODY中動(dòng)態(tài)添加一個(gè)標(biāo)簽<dl>,用來(lái)作為包含循環(huán)下面的內(nèi)容容器。（行20會(huì)用到）
行7：這一行很重要，因?yàn)槲覀円呀?jīng)說(shuō)過(guò)，回調(diào)函數(shù)的參數(shù)d表示從XML回調(diào)的所有數(shù)據(jù)，現(xiàn)在我們就需要對(duì)這些數(shù)據(jù)進(jìn)行處理（篩選）和格式化；請(qǐng)注意：這里通過(guò)搜尋book標(biāo)簽（tag），然后循環(huán)執(zhí)行each后面的函數(shù)，直到xml里面數(shù)據(jù)的條目完全循環(huán)完畢；（有點(diǎn)像PHP里面的foreach函數(shù)的功能）
行9：$(this)實(shí)際上就創(chuàng)建一個(gè)對(duì)象，目的是將d的當(dāng)前一條書(shū)籍信息對(duì)象實(shí)例化，方便進(jìn)行操作，這就是$book；
行10--行12：分別獲取當(dāng)前對(duì)象$book的書(shū)籍名稱(chēng)，描述和縮略圖；（注意取屬性值和取節(jié)點(diǎn)值的語(yǔ)法不同）
行14-行18：格式化書(shū)籍信息，以便輸出；
行20：將格式化后的信息以HTML輸出方式輸出到文檔中。
行22：為了告訴用戶(hù)我們當(dāng)前的信息正在從XML中讀取，2000毫秒（2秒）后，圖片逐漸消失。

Step 3:至此，大功告成。歡迎大家給我留言，共同討論JQuery的開(kāi)發(fā)和你所碰到的問(wèn)題，請(qǐng)不吝賜教。另外，請(qǐng)將下載后的文件夾放在WEB環(huán)境下運(yùn)行（IIS或虛擬主機(jī)），請(qǐng)不要直接點(diǎn)開(kāi)運(yùn)行。

代碼打包下載

您可能感興趣的文章: