JQuery讀取顯示XML文件

這次帶給大家JQuery讀取顯示XML文件，JQuery讀取顯示XML文件的注意事項有哪些，下面就是實戰案例，一起來看一下。

準備工作 

在開始之前我們需要做以下準備：
1.建立一個名為DEMO.html空白html檔案；（建議使用Editplus創建）
2. 熟悉JQuery框架的基本語法；（不熟悉沒關係，後面我會註釋得很詳細）
3. 創建一個名為data.xml的XML文件用來存儲數據，XML的結構下面會涉及到，你也可以下載我打包好的文件查看；
4.一個loading.gif圖片，這個圖片用於在將XML讀取出來的等待時間裡面顯示在空白html文檔中
正式開始
Step 1:首先讓我們看看這個data.xml的簡單結構，我這裡演示的數據是"Saturn為您推薦的幾本書"，故為書籍信息，那麼xml就包括書籍的名稱，縮圖和書籍描述資訊；
以下為 XML檔案程式碼：

<?xml version="1.0" encoding="utf-8" ?> 
<books> 
<book title="藏地密码" imageurl="images/Tibet_Code.jpg"> 
<description> 
这里是概况
</description> 
</book> 
<book title="剑桥雅思6" imageurl="images/ielts.jpg"> 
<description> 
这里是概况
</description> 
</book> 
<book title="Professional ASP.NET" imageurl="images/asp.jpg"> 
<description> 
这里是概况=
</description> 
</book> 
</books>

其次，讓我們看看載入在空白HTML文件裡面的JavaScript程式碼：

$(document).ready(function() 
{ 
$.get('myData.xml', function(d){ 
$(&#39;body&#39;).append(&#39;<h1 id="nbsp-Saturn给你推荐几本书-nbsp"> Saturn给你推荐几本书： </h1>&#39;); 
$(&#39;body&#39;).append(&#39;<dl />&#39;); 
$(d).find(&#39;book&#39;).each(function(){ 
var $book = $(this); 
var title = $book.attr("title"); 
var description = $book.find(&#39;description&#39;).text(); 
var imageurl = $book.attr(&#39;imageurl&#39;); 
var html = &#39;<dt> <img class="bookImage lazy"  src="/static/imghwm/default1.png"  data-src="&#39; + imageurl + &#39;"   alt=""  /> </dt>&#39;; 
html += &#39;<dd> <span class="loadingPic" alt="Loading" />&#39;; 
html += &#39;<p class="title">&#39; + title + &#39;</p>&#39;; 
html += &#39;<p> &#39; + description + &#39;</p>&#39; ; 
html += &#39;</dd>&#39;; 
$(&#39;dl&#39;).append($(html)); 
$(&#39;.loadingPic&#39;).fadeOut(2000); 
}); 
}); 
});

Step 2:這裡，我只講下JavaScript程式碼原理與運行流程，不過分討論語法，如果你對語法有任何疑問，請給我留言或查看JQuery相關文件。
行1：當HTML文件準備完畢之後（即html和JavaScript都下載完畢），會自動觸發JQuery的 $(document).ready方法及裡面的過程。顯然，這裡首先執行的是$.get方法。
行3：$.get的第一個參數是XML檔案的相對路徑（注意路徑要填寫正確，這裡我們把XML和網頁檔案放在同一資料夾）。第二個參數是一個Callback函數，也就是回呼函數。就是說透過get方法來請求這個XML檔案的內容，然後透過這個callback回呼函數來操作裡面的資料。而callback的參數d表示從XML回調過來的所有數據，有了這個參數d，我們就好進行下面的內容了。
行4：透過JavaScript在文件的BODY中動態加入一個標籤

，這個是頁面的總標題，無關緊要;
行5：同樣在BODY中動態加入一個標籤

,用來作為包含循環下面的內容容器。 （行20會用到）
行7：這一行很重要，因為我們已經說過，回呼函數的參數d表示從XML回調的所有數據，現在我們就需要對這些數據進行處理（篩選）和格式化；請注意：這裡透過搜尋book標籤（tag），然後循環執行each後面的函數，直到xml裡面資料的條目完全循環完畢；（有點像PHP裡面的foreach函數的功能）
行9：$(this)實際上就建立一個物件，目的是將d的當前一本書資訊物件實例化，方便進行操作，這就是$book;
行10 --行12：分別取得目前物件$book的書籍名稱，描述和縮圖；（注意取屬性值和取節點值的語法不同）
行14-行18：格式化書籍訊息，以便輸出；
行20：將格式化後的資訊以HTML輸出方式輸出到文件中。
行22：為了告訴使用者我們目前的資訊正在從XML中讀取，2000毫秒（2秒）後，圖片逐漸消失。
Step 3:至此，大功告成。歡迎大家給我留言，共同討論JQuery的發展和你所碰到的問題，請不吝賜教。另外，請將下載後的資料夾放在WEB環境下運作（IIS或虛擬主機），請不要直接點開運行。

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Jquery LigerUI實作檔案上傳步驟詳解

jquery動態載入js檔案詳解

#

以上是JQuery讀取顯示XML文件的詳細內容。更多資訊請關注PHP中文網其他相關文章！