從 XML 生成可與 Ajax 共同使用的 JSON[zhuan]
時下,非常流行使用 JavaScript 代碼為數據驅動的 Web 應用程序添加互動性。若能將數據編碼成 JavaScript Object Notation(JSON)的格式,您就可以更輕松地通過 JavaScript 語言使用它。通過本文,發掘使用 XSLT V2 從 XML 數據生成 JSON 的幾種不同方法。
![]() |
|
幾年前,許多開發人員很看好 XML、XSLT、Extensible HTML (XHTML)和其他一些基于標記的語言。現在,Asynchronous JavaScript and XML(AJAX)成了新的熱點,人們又將目光轉向了使用 JavaScript 代碼的數據驅動的富 Internet 應用程序。但是開發人員是否已經消除了 XML 和這一新技術之間的鴻溝呢?
當 然,您可以在 Web 客戶機中使用 XML 解析器來讀取數據,但這種做法會帶來兩個問題。第一,出于安全方面的原因,XML 數據只能從與此頁面相同的那個域中讀取。這雖然不是什么大的限制因素,但它的確會引起部署方面的問題,還會阻礙 DHTML 小部件的創建。第二,讀取和解析 XML 會非常慢。
另一種做法是讓服務器執行 XML 的解析工作,方法是設置服務器,使之向瀏覽器發送以 JavaScript 代碼或時下流行的 JavaScript Object Notation(JSON)編碼的數據。本文將展示如下三種使用 XSLT V2 語言和 Saxon XSLT V2 處理器從 XML 數據生成 JSON 的技巧:
- 簡單編碼
- 通過函數調用加載數據
- 編碼對象
要學習如何將數據編碼成 JSON(它只是 JavaScript 的一個子集),最好的方法是從數據開始。清單 1 顯示了書籍列表的一個示例 XML 數據集。
清單 1. 基本的圖形化圖書館
|
這個數據集很簡單,只包含三本書,每本書都具有惟一的 ID、書名、作者姓名及出版商的名字。(沒錯,我只選擇了我自己的書作為數據集,但能怨我嗎?這些書實在是不可多得的節日和生日禮物。)
清單 2 顯示了這些數據在 JSON 中的效果。
清單 2. JSON 中的示例數據集
|
方括號 ([]) 表明這是一個數組。大括號 ({}) 則表明這是一個散列表,該散列表由一組名稱和值對組成。在本例中,我創建了一個散列表的數組 —— 用來存儲這類結構式數據的一種常見方法。
另外一點值得注意的是字符串是通過單引號或雙引號被編碼的。所以,如果我想用單引號編碼 O'Reilly
,我就必須使用反斜杠對它進行轉義:'O\'Reilly'
。
這讓我編寫的這個 XSLT 樣式表更為有趣了一些。
我并未在本例中放上任何日期,但您也可以通過如下兩種方法來編碼日期。第一種方法是將日期作為字符串,該字符串必須在后面被解析。第二種方法是將日期作為一個對象,比如:
publishdate: new Date( 2006, 6, 16, 17, 45, 0 ) |
這段代碼將 publishdate
的值設置為6/16/2006
5:45:00 p.m.。
![]() ![]() |
![]()
|
接下來我將陸續介紹 JSON 編碼的幾種技巧。第一種也是其中最簡單的一種,此樣式表如 清單 3 所示。
清單 3. simple.xsl 樣式表
|
要理解此樣式表,不妨先來看一下 清單 4 所示的輸出。
清單 4. simple.xsl 的輸出
|
這里,我將名為 g_books
的變量設置為一個包含三個散列表的數組,每個散列表包含關于該書的信息。再回過頭來看看 清單 3,您會發現第一個模板匹配 "/" 路徑,它也是首先應用到輸入數據集的模板,該模板使用 for-each
循環來遍歷每本書。之后,它使用 <value-of>
標記來將文本從該數據輸出到 JavaScript 輸出代碼。
對于字符串,我使用名為 js:escape()
的定制函數,它在模板之前定義。該函數使用一個正則表達式將一個單引號標記更改為帶有反斜杠的單引號標記。
最后一個重要的元素是 <xsl:output>
標記,它告知處理器要輸出的是文本而不是 XML。要檢驗此過程是否可以正常工作,我加入了一個 simple .html 文件,該文件引用我在 simple.js 保存的 XSL 樣式表的輸出。這個 HTML 文件如 清單 5 所示。
清單 5. simple.html 文件
|
.html 文件使用 <script>
標記簡單地加載已編碼了的 JavaScript 代碼。之后,第二個
<script>
標記將數組的長度寫出到瀏覽器頁面,如 圖 1 所示。
圖 1. simple.html 的輸出

好了!數據文件包含三本書,相應的 JavaScript 文件也包含三本書。它真的可以工作!
![]() ![]() |
![]()
|
上述第一個示例很簡單,而且在大多數情況下可以發揮其作用,但它存在一些問題。第一個問題是對于數據何時被加載沒有任何提示。如果數據是像頁面那樣被靜態加載的,這不成問題。但是如果頁面動態創建了一個 <script>
標記來按需加載數據,那么就很有必要知道 <script>
標記是何時完成的。實現此功能的最好的方法是讓編碼了的數據調用一個 JavaScript 函數,而不是只設置數據。
這個概念很重要,所以我將花一些時間來介紹一下為什么您必須要通過動態生成的 <script>
標記來加載數據。頁面加載后,從服務器獲得數據是 Web 2.0 的核心功能。一種方法是使用 AJAX 機制通過到服務器的調用來加載
XML。然而,出于安全性的原因,AJAX 機制只限于從單一域獲取數據。這在大多數情況下都沒有問題,但有時,您可能需要 JavaScript
代碼運行在他人的頁面上(例如,Google Maps)。
在這種情況下從服務器獲得數據的惟一方法是通過動態加載 <script>
標記。獲悉 <script>
標記何時加載的最好的方法是讓 <script>
標記返回的腳本調用函數而不是簡單地加載數據。清單 6 顯示了在函數調用中編碼的數據。
清單 6. Function1.js
|
清單 7 給出了相應的 .html 文件。
清單 7. Function1.html
|
稍后將詳細介紹 drawbooks
函數。這里重要的是了解一下頁面如何定義 AddBooks
函數,該函數隨后會由 function1.js 文件中的腳本調用。該 AddBooks
函數負責處理數據。而且被調用的 AddBooks
函數會向頁面指示
<script>
標記被正確加載,并已加載完成。
要創建 function1.js 文件,我只對樣式表稍微做了一點修改,如 清單 8 所示。
清單 8. function1.xsl 樣式表
|
這里,我調用了一個函數,而不是簡單地設置一個變量。這就是我所做的惟一更改。
回到頁面,我使用了 drawbooks
函數來構建書的表格,這樣我就能夠確認數據被正確編碼和正確顯示。此函數是在 drawbooks.js 內定義的,如 清單 9 所示。
清單 9. Drawbooks.js
|
這個簡單函數創建了一個表格節點,然后循環訪問書的列表并為每本書創建一行,為每個數據元素分配一個單元格。此頁面上的代碼的結果如 圖 2 所示。
圖 2. function1.html 的結果

現在我就可以查看一下此頁面的輸出并確認來自原始
.xml 文件的一切均已被正確轉換成 JavaScript 代碼,且數據被發送到 AddData
函數并被正確添加到頁面。
![]() ![]() |
![]()
|
我很喜歡函數調用這一技術,但我并不贊同將所有圖書數據都放入一個塊中。另一種方式是為每條記錄采用一個調用,如 清單 10 所示。
清單 10. Function2.js
|
對 .html 頁面只需做少許修改,如 清單 11 所示。
清單 11. Function2.html
|
這里更改了 XSLT,以使函數調用駐留在 for-each
循環體內。清單 12
顯示了更新后的樣式表。
清單 12. function2.xsl
|
對這個給定示例來說,這種更改看起來有些隨意。但如果原始的 XML 數據集有多種數據類型,要為每種類型分配一個單獨的函數調用會使 XSL 和頁面上的 JavaScript 代碼更為簡單、更易于維護。
![]() ![]() |
![]()
|
對小的頁面來講,使用 JavaScript 函數沒有問題。但對于大型項目,就需要使用 JavaScript 語言的一些面向對象特性。是的,JavaScript 語言可以處理對象而且可以處理得很好。
清單 13 顯示了如何創建帶有數據的對象。
清單 13. Object1.js
|
在本例中,我只簡單地向名為 g_books
的數組添加了 Book
對象。JavaScript 的對象創建與 Java™、C#
或 C++
編程語言的對象創建十分相似。都是一個 new 操作符后跟一個類名。參數放到隨后的括號內。在本例中,我傳入了一個帶值的單一散列表,并將其分割成單獨的一些參數。
創建此對象的代碼如 清單 14 所示。
清單 14. Object1.xsl
|
此頁面內最值得注意的是定義 Book
類的那部分代碼。清單 15
顯示了該頁面。
清單 15. object1.html
|
Book
類的構造函數循環訪問散列表的所有數據。對于每個鍵,會在對象上創建一個具有對象名稱和數據的實例變量。不需要對
drawbooks
函數做任何修改,因為對象都有與原始的散列表相同的鍵和值。JavaScript 語言并不區分訪問的是散列表內的命名值還是對象上的命名值。
當然,Book
類應該有像 set
和 get
這樣的訪問程序。
清單 16 顯示了我是如何對 JavaScript 數據進行編碼的。
清單 16. Object2.js
|
沒錯,這有些大同小異。它也是先創建一個對象,設置其值,然后將它添加到數組,等等。首先,我對樣式表做了一些較大的修改,如 清單 17 所示。
清單 17. Object2.xsl
|
我定義了一個新的名為 createbook
的函數,該函數構建 book 對象,并由用于每本書的模板調用。createbook
函數還是調用 escape
函數來確保字符串被正確編碼。
考慮到 HTML 方面,我必須向 Book
類添加更多方法以便編碼后的 JavaScript 代碼能夠調用它們。這些新方法如 清單 18 所示。
清單 18. Object2.html
|
原型機制是 JavaScript 語言所特有的。該語言中的每個對象都是具有其自己的數據和函數的單獨實體,可獨立設置。某個類的每個對象都有相同的原型。所以,為了創建可由所有類共享的方法,我在原型之上設置了函數,而不僅僅是在對象上。
![]() ![]() |
![]()
|
您 可以使用幾種技巧來將存儲在 XML 內的數據編碼成 JavaScript 代碼形式。您編碼數據的方式取決于您的 Web 2.0 應用程序的整體設計,還取決于數據出現在頁面上時對這些數據作何打算。關鍵的一點是要充分利用所生成的動態 JavaScript 語言。
![]() ![]() |
![]()
|
描述 | 名字 | 大小 | 下載方法 |
---|---|---|---|
本文使用的示例代碼 | x-xml2json-samplecode.zip | 7KB | HTTP |
![]() |
||||
![]() |
關于下載方法的信息 | ![]() |
學習
- 您可以參閱本文在 developerWorks 全球網站上的 英文原文。
-
Ajax 技術資源中心:developerWorks 上所有有關 Ajax 的問題都可以在這里找到解答。
-
Json.org:尋找關于 JavaScript Object Notation 的有用信息、庫和鏈接。
-
掌握 Ajax,第 1 部分: Ajax 簡介(Brett McLaughlin,developerWorks,2006 年 1 月):學習使用 Ajax 這種用以構建 Web 站點的高效方法。
-
developerWorks Ajax 推薦閱讀清單:瀏覽此列表,先來了解一下 Ajax 及其相關技術。
-
JavaScript 標準:探究由 Ecma International 定義的這個標準。
-
XSLT 2.0 標準:深入研究這一標準語言的語法和語義,該語言可以將 XML 文檔轉換成其他 XML 文檔,由 World Wide Web Consortium (W3C) 維護。
-
Saxon XSLT 2.0 處理器:了解本篇文章作者所使用的這個處理器的更多信息。
-
IBM XML 1.1 certification:了解如何才能成為一名 IBM 認證的 XML 1.1 和相關技術的開發人員。
- 查閱 developerWorks 中國網站 XML 專區,獲取大量技術文章、提示、教程、標準和 IBM 紅皮書。
- 通過 developerWorks 技術活動和網絡廣播 隨時關注技術最新進展。
posted on 2008-03-12 18:33 gembin 閱讀(831) 評論(0) 編輯 收藏 所屬分類: Ajax 、Web 2.0