快捷導(dǎo)航

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

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

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

準備工作

在開始之前我們需要做如下準備工作：

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

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

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

4.一個loading.gif圖片，這個圖片用于在將XML讀取出來的等待時間里面顯示在空白html文檔中

正式開始

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

以下為XML文件代碼：

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

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

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

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

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

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

 
$(document).ready(function() 
{ 
$.get('myData.xml', function(d){ 
$('body').append('<h1> Saturn給你推薦幾本書： </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代碼原理與運行流程，不過分討論語法，如果你對語法有任何疑問，請給我留言或者查看JQuery相關(guān)文檔。

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

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

代碼打包下載

您可能感興趣的文章: