2006 年 6 月 12 日
時下，非常流行使用 JavaScript 代碼為數據驅動的 Web 應用程序添加互動性。若能將數據編碼成 JavaScript Object Notation（JSON）的格式，您就可以更輕松地通過 JavaScript 語言使用它。通過本文，發掘使用 XSLT V2 從 XML 數據生成 JSON 的幾種不同方法。
|
|
|
請訪問 Ajax 技術資源中心，這是有關 Ajax 編程模型信息的一站式中心，包括很多文檔、教程、論壇、blog、wiki 和新聞。任何 Ajax 的新信息都能在這里找到。
|
|
幾年前，許多開發人員很看好 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 簡介
要學習如何將數據編碼成 JSON（它只是 JavaScript 的一個子集），最好的方法是從數據開始。清單 1 顯示了書籍列表的一個示例 XML 數據集。
清單 1. 基本的圖形化圖書館
<?xml version="1.0" encoding="UTF-8"?>
<books>
<book id="1">
<title>Code Generation in Action</title>
<author><first>Jack</first><last>Herrington</last></author>
<publisher>Manning</publisher>
</book>
<book id="2">
<title>PHP Hacks</title>
<author><first>Jack</first><last>Herrington</last></author>
<publisher>O'Reilly</publisher>
</book>
<book id="3">
<title>Podcasting Hacks</title>
<author><first>Jack</first><last>Herrington</last></author>
<publisher>O'Reilly</publisher>
</book>
</books>
|
這個數據集很簡單，只包含三本書，每本書都具有惟一的 ID、書名、作者姓名及出版商的名字。（沒錯，我只選擇了我自己的書作為數據集，但能怨我嗎？這些書實在是不可多得的節日和生日禮物。）
清單 2 顯示了這些數據在 JSON 中的效果。
清單 2. JSON 中的示例數據集
[ { id: 1,
title: 'Code Generation in Action',
first: 'Jack',
last: 'Herrington',
publisher: 'Manning' },
... ]
|
方括號 ([]) 表明這是一個數組。大括號 ({}) 則表明這是一個散列表，該散列表由一組名稱和值對組成。在本例中，我創建了一個散列表的數組 —— 用來存儲這類結構式數據的一種常見方法。
另外一點值得注意的是字符串是通過單引號或雙引號被編碼的。所以，如果我想用單引號編碼 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 樣式表
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0"
xmlns:js="http://muttmansion.com">
<xsl:output method="text" />
<xsl:function name="js:escape">
<xsl:param name="text" />
<xsl:value-of select='replace( $text, "'", "\\'" )' />
</xsl:function>
<xsl:template match="/">
var g_books = [
<xsl:for-each select="books/book">
<xsl:if test="position() > 1">,</xsl:if> {
id: <xsl:value-of select="@id" />,
name: '<xsl:value-of select="js:escape(title)" />',
first: '<xsl:value-of select="js:escape(author/first)" />',
last: '<xsl:value-of select="js:escape(author/last)" />',
publisher: '<xsl:value-of select="js:escape( publisher )" />'
}</xsl:for-each>
];
</xsl:template>
</xsl:stylesheet>
|
要理解此樣式表，不妨先來看一下 清單 4 所示的輸出。
清單 4. simple.xsl 的輸出
var g_books = [
{
id: 1,
name: 'Code Generation in Action',
first: 'Jack',
last: 'Herrington',
publisher: 'Manning'
}, {
id: 2,
name: 'PHP Hacks',
first: 'Jack',
last: 'Herrington',
publisher: 'O\'Reilly'
}, {
id: 3,
name: 'Podcasting Hacks',
first: 'Jack',
last: 'Herrington',
publisher: 'O\'Reilly'
}
];
|
這里，我將名為 g_books 的變量設置為一個包含三個散列表的數組，每個散列表包含關于該書的信息。再回過頭來看看 清單 3，您會發現第一個模板匹配 "/" 路徑，它也是首先應用到輸入數據集的模板，該模板使用 for-each 循環來遍歷每本書。之后，它使用 <value-of> 標記來將文本從該數據輸出到 JavaScript 輸出代碼。
對于字符串，我使用名為 js:escape() 的定制函數，它在模板之前定義。該函數使用一個正則表達式將一個單引號標記更改為帶有反斜杠的單引號標記。
最后一個重要的元素是 <xsl:output> 標記，它告知處理器要輸出的是文本而不是 XML。要檢驗此過程是否可以正常工作，我加入了一個 simple .html 文件，該文件引用我在 simple.js 保存的 XSL 樣式表的輸出。這個 HTML 文件如 清單 5 所示。
清單 5. simple.html 文件
<html>
<head>
<title>Simple JS loader</title>
<script src="simple.js"></script>
</head>
<body>
<script>
document.write( "Found "+g_books.length+" books" );
</script>
</body>
</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
AddBooks( [
{
id: 1,
name: 'Code Generation in Action',
first: 'Jack',
last: 'Herrington',
publisher: 'Manning'
}, {
id: 2,
name: 'PHP Hacks',
first: 'Jack',
last: 'Herrington',
publisher: 'O\'Reilly'
}, {
id: 3,
name: 'Podcasting Hacks',
first: 'Jack',
last: 'Herrington',
publisher: 'O\'Reilly'
}
] );
|
清單 7 給出了相應的 .html 文件。
清單 7. Function1.html
<html>
<head>
<title>Function 1 JS loader</title>
<script>
var g_books = [];
function AddBooks( books ) { g_books = books; }
</script>
<script src="function1.js"></script>
<script src="drawbooks.js"></script>
</head>
<body>
<script>drawbooks( g_books );</script>
</body>
</html>
|
稍后將詳細介紹 drawbooks 函數。這里重要的是了解一下頁面如何定義 AddBooks 函數，該函數隨后會由 function1.js 文件中的腳本調用。該 AddBooks 函數負責處理數據。而且被調用的 AddBooks 函數會向頁面指示 <script> 標記被正確加載，并已加載完成。
要創建 function1.js 文件，我只對樣式表稍微做了一點修改，如 清單 8 所示。
清單 8. function1.xsl 樣式表
<xsl:template match="/">
AddBooks( [
<xsl:for-each select="books/book">
<xsl:if test="position() > 1">,</xsl:if> {
id: <xsl:value-of select="@id" />,
name: '<xsl:value-of select="js:escape(title)" />',
first: '<xsl:value-of select="js:escape(author/first)" />',
last: '<xsl:value-of select="js:escape(author/last)" />',
publisher: '<xsl:value-of select="js:escape( publisher )" />'
}</xsl:for-each>
] );
</xsl:template>
|
這里，我調用了一個函數，而不是簡單地設置一個變量。這就是我所做的惟一更改。
回到頁面，我使用了 drawbooks 函數來構建書的表格，這樣我就能夠確認數據被正確編碼和正確顯示。此函數是在 drawbooks.js 內定義的，如 清單 9 所示。
清單 9. Drawbooks.js
function drawbooks( books )
{
var elTable = document.createElement( 'table' );
for( var b in books )
{
var elTR = elTable.insertRow( -1 );
var elTD1 = elTR.insertCell( -1 );
elTD1.appendChild( document.createTextNode( books[b].id ) );
var elTD2 = elTR.insertCell( -1 );
elTD2.appendChild( document.createTextNode( books[b].name ) );
var elTD3 = elTR.insertCell( -1 );
elTD3.appendChild( document.createTextNode( books[b].first ) );
var elTD4 = elTR.insertCell( -1 );
elTD4.appendChild( document.createTextNode( books[b].last ) );
var elTD5 = elTR.insertCell( -1 );
elTD5.appendChild( document.createTextNode( books[b].publisher ) );
}
document.body.appendChild( elTable );
}
|
這個簡單函數創建了一個表格節點，然后循環訪問書的列表并為每本書創建一行，為每個數據元素分配一個單元格。此頁面上的代碼的結果如 圖 2 所示。
圖 2. function1.html 的結果
現在我就可以查看一下此頁面的輸出并確認來自原始 .xml 文件的一切均已被正確轉換成 JavaScript 代碼，且數據被發送到 AddData 函數并被正確添加到頁面。
細化函數調用技術
我很喜歡函數調用這一技術，但我并不贊同將所有圖書數據都放入一個塊中。另一種方式是為每條記錄采用一個調用，如 清單 10 所示。
清單 10. Function2.js
AddBook( {
id: 1,
name: 'Code Generation in Action',
first: 'Jack',
last: 'Herrington',
publisher: 'Manning'
} );
AddBook( {
id: 2,
name: 'PHP Hacks',
first: 'Jack',
last: 'Herrington',
publisher: 'O\'Reilly'
} );
...
|
對 .html 頁面只需做少許修改，如 清單 11 所示。
清單 11. Function2.html
...
<script>
var g_books = [];
function AddBook( book ) { g_books.push( book ); }
</script>
...
|
這里更改了 XSLT，以使函數調用駐留在 for-each 循環體內。清單 12 顯示了更新后的樣式表。
清單 12. function2.xsl
...
<xsl:template match="/">
<xsl:for-each select="books/book">
AddBook( {
id: <xsl:value-of select="@id" />,
name: '<xsl:value-of select="js:escape(title)" />',
first: '<xsl:value-of select="js:escape(author/first)" />',
last: '<xsl:value-of select="js:escape(author/last)" />',
publisher: '<xsl:value-of select="js:escape( publisher )" />'
} );</xsl:for-each>
</xsl:template>
...
|
對這個給定示例來說，這種更改看起來有些隨意。但如果原始的 XML 數據集有多種數據類型，要為每種類型分配一個單獨的函數調用會使 XSL 和頁面上的 JavaScript 代碼更為簡單、更易于維護。
編碼對象
對小的頁面來講，使用 JavaScript 函數沒有問題。但對于大型項目，就需要使用 JavaScript 語言的一些面向對象特性。是的，JavaScript 語言可以處理對象而且可以處理得很好。
清單 13 顯示了如何創建帶有數據的對象。
清單 13. Object1.js
g_books.push( new Book( {
id: 1,
name: 'Code Generation in Action',
first: 'Jack',
last: 'Herrington',
publisher: 'Manning'
} ) );
g_books.push( new Book( {
id: 2,
name: 'PHP Hacks',
first: 'Jack',
last: 'Herrington',
publisher: 'O\'Reilly'
} ) );
|
在本例中，我只簡單地向名為 g_books 的數組添加了 Book 對象。JavaScript 的對象創建與 Java™、C# 或 C++ 編程語言的對象創建十分相似。都是一個 new 操作符后跟一個類名。參數放到隨后的括號內。在本例中，我傳入了一個帶值的單一散列表，并將其分割成單獨的一些參數。
創建此對象的代碼如 清單 14 所示。
清單 14. Object1.xsl
<xsl:template match="/">
<xsl:for-each select="books/book">
g_books.push( new Book( {
id: <xsl:value-of select="@id" />,
name: '<xsl:value-of select="js:escape(title)" />',
first: '<xsl:value-of select="js:escape(author/first)" />',
last: '<xsl:value-of select="js:escape(author/last)" />',
publisher: '<xsl:value-of select="js:escape( publisher )" />'
} ) );</xsl:for-each>
</xsl:template>
|
此頁面內最值得注意的是定義 Book 類的那部分代碼。清單 15 顯示了該頁面。
清單 15. object1.html
...
<script>
var g_books = [];
function Book( data )
{
for( var d in data ) { this[d] = data[d]; }
}
</script>
...
|
Book 類的構造函數循環訪問散列表的所有數據。對于每個鍵，會在對象上創建一個具有對象名稱和數據的實例變量。不需要對 drawbooks 函數做任何修改，因為對象都有與原始的散列表相同的鍵和值。JavaScript 語言并不區分訪問的是散列表內的命名值還是對象上的命名值。
當然，Book 類應該有像 set 和 get 這樣的訪問程序。 清單 16 顯示了我是如何對 JavaScript 數據進行編碼的。
清單 16. Object2.js
var b1 = new Book();
b1.setId ( 1 );
b1.setTitle ( 'Code Generation in Action' );
b1.setFirst ( 'Jack' );
b1.setLast ( 'Herrington' );
b1.setPublisher ( 'Manning' );
g_books.push( b1 );
var b2 = new Book();
b2.setId ( 2 );
b2.setTitle ( 'PHP Hacks' );
...
|
沒錯，這有些大同小異。它也是先創建一個對象，設置其值，然后將它添加到數組，等等。首先，我對樣式表做了一些較大的修改，如 清單 17 所示。
清單 17. Object2.xsl
...
<xsl:function name="js:createbook">
<xsl:param name="book" />
<xsl:variable name="b" select="concat( 'b', $book/@id )" />
var <xsl:value-of select="$b" /> = new Book();
<xsl:value-of select="concat( $b, '.setId' )" />
( <xsl:value-of select="$book/@id" /> );
<xsl:value-of select="concat( $b, '.setTitle' )" />
( '<xsl:value-of select="js:escape( $book/title )" />' );
<xsl:value-of select="concat( $b, '.setFirst' )" />
( '<xsl:value-of select="js:escape( $book/author/first )" />' );
<xsl:value-of select="concat( $b, '.setLast' )" />
( '<xsl:value-of select="js:escape( $book/author/last )" />' );
<xsl:value-of select="concat( $b, '.setPublisher' )" />
( '<xsl:value-of select="js:escape( $book/publisher )" />' );
</xsl:function>
<xsl:template match="/">
<xsl:for-each select="books/book">
<xsl:value-of select="js:createbook(.)" />
g_books.push( b<xsl:value-of select="@id" /> );
</xsl:for-each>
</xsl:template>
...
|
我定義了一個新的名為 createbook 的函數，該函數構建 book 對象，并由用于每本書的模板調用。createbook 函數還是調用 escape 函數來確保字符串被正確編碼。
考慮到 HTML 方面，我必須向 Book 類添加更多方法以便編碼后的 JavaScript 代碼能夠調用它們。這些新方法如 清單 18 所示。
清單 18. Object2.html
...
<script>
var g_books = [];
function Book() { }
Book.prototype.setId = function( val ) { this.id = val; }
Book.prototype.setTitle = function( val ) { this.name = val; }
Book.prototype.setFirst = function( val ) { this.first = val; }
Book.prototype.setLast = function( val ) { this.last = val; }
Book.prototype.setPublisher = function( val ) { this.publisher = val; }
</script>
...
|
原型機制是 JavaScript 語言所特有的。該語言中的每個對象都是具有其自己的數據和函數的單獨實體，可獨立設置。某個類的每個對象都有相同的原型。所以，為了創建可由所有類共享的方法，我在原型之上設置了函數，而不僅僅是在對象上。
結束語
您可以使用幾種技巧來將存儲在 XML 內的數據編碼成 JavaScript 代碼形式。您編碼數據的方式取決于您的 Web 2.0 應用程序的整體設計，還取決于數據出現在頁面上時對這些數據作何打算。關鍵的一點是要充分利用所生成的動態 JavaScript 語言。
下載
|
描述
|
名字
|
大小
|
下載方法
|
|
本文使用的示例代碼
|
x-xml2json-samplecode.zip
|
7KB
|
HTTP
|