使用Spry XML資料集
Spry XML資料集是一個JavaScript對象，可以使用它在WEB頁面上顯示XML資料檔案中的資料。你可以用這個資料根據訪問者的選擇在頁面的主要和詳細地區中更新資料。你可以訪問 Adobe LiveDocs獲得本文的最新版本。
Spry XML資料集基本概要Spry資料集就是一個JavaScript對象。你在WEB頁面裡用少量的代碼就可以使瀏覽器在開啟頁面時建立對象並裝載XML源到對象中。資料集的結果在一個平面的數組中並可以表現為一個包含行和列的標準表。
假設你有一個XML源檔案cafetownsend.xml, 其中包含下列內容：
<?xml version="1.0" encoding="UTF-8"?><specials> <menu_item id="1"> <item>Summer Salad</item> <description>organic butter lettuce with apples, blood oranges, gorgonzola, and raspberry vinaigrette.</description> <price>7</price> </menu_item> <menu_item id="2"> <item>Thai Noodle Salad</item> <description>lightly sauteed in sesame oil with baby bok choi, portobello mushrooms, and scallions.</description> <price>8</price> </menu_item> <menu_item id="3"> <item>Grilled Pacific Salmon</item> <description>served with new potatoes, diced beets, Italian parlsey, and lemon zest.</description> <price>16</price> </menu_item></specials>
使用XPath來指示你所感興趣的資料（在這個範例中，關注的節點為specials/menu_item），資料被平面化到一個對象數組中，對象為行，屬性為列，表現為下表：
@id |
item |
description |
price |
|---|---|---|---|
1 |
Summer salad |
organic butter lettuce with apples, blood oranges, gorgonzola, and |
7 |
2 |
Thai Noodle Salad |
lightly sauteed in sesame oil with baby bok choi, portobello mushrooms, |
8 |
3 |
Grilled Pacific Salmon |
served with new potatoes, diced beets, Italian parlsey, and lemon |
16 |
這個資料集包含每個功能表項目，每行為一個功能表項目，包含的列有：@id, item, description, 和 price。列表現為XML中specials/menu_item節點下的子節點，附加了一些屬性和子標記在menu_item標記裡。
這個資料集包含了一個內建的資料參考（built-in data references）稱作ds_RowID（不顯示），當顯示資料時會變的非常有用。另外資料集也包含了其他的內建資料參考（built-in data references），例如：ds_RecordCount, ds_CurrentRow等，你可以用他們來操作資料顯示。
你通過Spry.Data.XMLDataSet和XPath建立一個Spry資料集。XPath定義資料集的預設結構，作為例子，如果你用XPath指定一個包含3個子節點的重複XML節點，那麼每一個重複的XML節點將表現為資料集中的一行，3個子節點將表現為列。（資料集會建立列來表示任何重複節點或子節點所包含的屬性）
如果你沒有指定一個XPath，那麼XML源中的所有資料將被包含在資料集中。
資料集被建立後，它可以讓你容易的管理和顯示資料。做範例，你可以建立一個簡單的表來顯示XML資料，並用簡單的方法和屬性去重載（reload）、排序、過濾（filter）或頁面顯示。
下面的範例中，建立了一個叫dsSpecials的Spry資料集，並且從cafetownsend.xml中裝載資料：
<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Spry Example</title> <!--Link the Spry libraries--> <script type="text/javascript" src="includes/xpath.js"></script> <script type="text/javascript" src="includes/SpryData.js"></script> <!--Create a data set object--> <script type="text/javascript"> var dsSpecials = new Spry.Data.XMLDataSet("data/cafetownsend.xml", "specials/menu_item"); </script></head>. . .<body></body>
注意：以上範例僅僅用於示意，可以啟動並執行範例請查看Adobe Labs中的Spry欄目下的demos欄目。
在這個範例中，第一個script標記連結了一個開源的XPath庫用於XML資料的顯示。XPath庫允許你在建立資料集時使用複雜的Xpath：
<script type="text/javascript" src="includes/xpath.js"></script>
第二個scrip塊連結了SpryData.js，Spry資料操作庫, 它儲存於includes目錄下：
<script type="text/javascript" src="includes/SpryData.js"></script>
Spry資料操作庫以來於XPath庫，所以必須先引用XPath庫。
第三個script塊用於建立一個dsSpecials資料集，cafetownsend.xml檔案儲存體在data目錄中：
var dsSpecials = new Spry.Data.XMLDataSet("data/cafetownsend.xml", "specials/menu_item");
注意：JavaScript和XML都是大小寫敏感的，請在書寫指令碼和列名時注意大小寫。
在JavaScript中，使用new操作符來建立對象。Spry.Data.XMLDataSet包含在Spry資料操作庫（Spry
data library）中。其構造器有兩個參數：資料來源 ("data/cafetownsend.xml",這裡是一個相對路徑) 和用於指定XML中節點的XPath運算式("specials/menu_item")
In JavaScript the new operator is used to create objects. The Spry.Data.XMLDataSet method is a constructor in the Spry
data library that creates new Spry data set objects. The constructor takes two
parameters: the source of the data ("data/cafetownsend.xml", in this case, a relative URL) and
an XPath expression that specifies the node or nodes in the XML to supply the
data ("specials/menu_item").
你也可以指定一個XML資料檔案的絕對路徑：
var dsSpecials = new Spry.Data.XMLDataSet("http://www.somesite.com/somefolder/cafetownsend.xml", "specials/menu_item");
注意：使用絕對路徑還是相對路徑取決於你使用的瀏覽器的安全模型，這以為著你僅能從與HTML頁相同域的XML源裝載資料，你也可以消除這個限制，但需要和你的伺服器管理員溝通。
在前面的範例中，構造了一個dsSpecials資料集對象。並從cafatownsend.xml檔案的specials/menu_item節點中擷取資料並轉化為平面對象和屬性數組（a flattened array of
objects），類似包含行與列的表。（作為表的範例，請查看本章的開始部分）
每個資料集都有一個當前行。預設情況下，當前行是資料集的第一行。稍侯，你可以通過資料集的setCurrentRow()方法來改變當前行。
注意：當你通過new操作符建立的資料集是沒有包含資料的，要裝載資料到資料集，首先調用資料集的loadData()方法，如果你的頁面中沒有使用任何地區(regions)，那麼你可以在頁面中手動調用loadData()方法。裝載過程是非同步，如果你在調用loadData()方法後立即訪問資料，也許此時資料仍然是停用。
Spry XML 資料集進階範例Spry XML資料集用XMLHTPPRequest對象非同步裝載指定的URL，當XML資料擷取後，事實上是兩種形式：文本形式、文件物件模型（DOM）樹。
例如，你指定 “/photos.php?galleryid=2000" 作為你的資料來源。（這是一個web service，返回XML資料）
<script type="text/javascript"> var dsPhotos = new Spry.Data.XMLDataSet("/photos.php?galleryid=2000", "/gallery/photos/photo");</script>
下列代碼為XML資料的文本形式：
<gallery id="12345"> <photographer id="4532">John Doe</photographer> <email>john@doe.com</email> <photos id="2000"> <photo path="sun.jpg" width="16" height="16" /> <photo path="tree.jpg" width="16" height="16" /> <photo path="surf.jpg" width="16" height="16" /> </photos></gallery>
下面的範例中展示了XML資料的DOM樹形式。
使用XPath在XML DOM樹中指定部分節點，下面紅色的部分為XPath所指定的/gallery/photos/photo節點 ：
<gallery id="12345"> <photographer id="4532">John Doe</photographer> <email>john@doe.com</email> <photos id="2000"> <photo path="sun.jpg" width="16" height="16"/> <photo path="tree.jpg" width="16" height="16"/> <photo path="surf.jpg" width="16" height="16"/> </photos></gallery>
展現了指定節點的DOM-樹，黑色實心圓部分：
資料集指定節點的表形式：
@path |
@width |
@height |
|---|---|---|
sun.jpg |
16 |
16 |
tree.jpg |
16 |
16 |
surf.jpg |
16 |
16 |
在這個範例中，Spry的列名取自指定節點的屬性，Spry根據你的XPath來決定列的名稱。
Spry是用下面的規則來平面化資料（ flattening data）和建立列的：
如果指定的節點有屬性，Spry為每個屬性建立列並使用屬性值來填充。列的名字由屬性名稱前加@組成，例如：一個節點有一個id屬性，那麼列名則為@id。
如果指定的節點沒有子項目，但有一個CDATA，那麼Spry建立一個列並填充文本或CDATA。這個列的名字就是節點的名字。
這個範例將更詳細展示平面化處理以及Spry產生資料集列。
範例：指定、平面化一個元素的屬性和文本值下面的紅色代碼展示了被 /gallery/photographer XPath運算式所指定的資料：
<gallery id="12345"> <photographer id="4532">John Doe</photographer> <email>john@doe.com</email> <photos id="2000"> <photo path="sun.jpg" width="16" height="16" /> <photo path="tree.jpg" width="16" height="16" /> <photo path="surf.jpg" width="16" height="16" /> </photos></gallery>
用DOM樹的形式展現為：
用表的形式展現為：
photographer |
@id |
|---|---|
John Doe |
16 |
這裡，僅有一個節點被指定，因此在資料集中只有一行，photographer節點的文本為"John Doe", 因此節點值儲存在名字為photographer的列中。photographer節點下有一個id屬性，因此該屬性值放在@id列中。
範例：指定、平面化一個元素的屬性和子項目下面代碼為/gallery XPath運算式選擇的資料：
<gallery id="12345"> <photographer id="4532">John Doe</photographer> <email>john@doe.com</email> <photos id="2000"> <photo path="sun.jpg" width="16" height="16" /> <photo path="tree.jpg" width="16" height="16" /> <photo path="surf.jpg" width="16" height="16" /> </photos></gallery>
用DOM樹形式戰線為：
用表的形式展現為：
@id |
photographer |
photographer/@id |
|
|---|---|---|---|
12345 |
John Doe |
4532 |
john@doe.com |
注意子項目的屬性的資料列名首碼為子項目名。在這裡photographer是指定的gallery節點的子項目，所以id屬性的首碼應該為photographer/@。 同樣需要注意的是，表中沒有photos 元素,這是因為Spry不能平面化任何包含子項目的子項目。
範例：平面化選定元素的屬性使用XPath可以指定節點的屬性。下列紅色代碼展示了gallery/photos/photo/@path XPath運算式所選擇的資料：
<gallery id="12345"> <photographer id="4532">John Doe</photographer> <email>john@doe.com</email> <photos id="2000"> <photo path="sun.jpg" width="16" height="16" /> <photo path="tree.jpg" width="16" height="16" /> <photo path="surf.jpg" width="16" height="16" /> </photos></gallery>
用DOM樹形式展現為：
用表的形式展現為：
@path |
|---|
sun.jpg |
tree.jpg |
surf.jpg |
在你建立一個Spry資料集後，你可以在Spry動態地區中顯示資料，一個Spry動態地區是也面上的一個範圍，其與資料集綁定。地區顯示通過資料集顯示XML資料併當資料集變化後自動更新。
動態地區重建是因為他們註冊為所繫結資料集的觀察器或接聽程式。每當資料變化 (loaded, updated, sorted, filtered等),資料集將給他所擁有的所有觀察器發送訊息，觸發正在偵聽的動態地區的自動重建。
在一個容器標記裡聲明Spry動態地區，使用spry:region屬性。大多數HTML元素可以成為動態地區容器，然而，下列標記不可以：
col
colgroup
frameset
html
iframe
select
style
table
tbody
tfoot
thead
title
tr
上面的這些標記不能作為Spry動態地區容器，但你可以在Spry動態地區容器內部使用他們。
注意：動態地區是在body標記內限定地區的，你不能添加spry:region屬性到body標記之外的任何標記中。
在下面的範例中，下面有一個名叫Specials_DIV的用於動態地區的容器，它是一個div標記，並包含一個標準的HTML表。表是典型的用於動態地區的HTML元素，因為表的第一行可以作為表頭，第二行就可以包含重複的XML資料了。
<!--Create the Spry dynamic region--><div id="Specials_DIV" spry:region="dsSpecials"> <!--Display the data in a table--> <table id="Specials_Table"> <tr> <th>Item</th> <th>Description</th> <th>Price</th> </tr> <tr spry:repeat="dsSpecials"> <td>{item}</td> <td>{description}</td> <td>{price}</td> </tr> </table></div>
在例子中，div標記建立動態地區僅僅需要兩個屬性：spry:region屬性用於聲明動態地區並指定繫結資料集，另一個為id屬性用於命名地區：
<div id="Specials_DIV" spry:region="dsSpecials">
一個新的地區是dsSpecials資料集的一個觀察器（observer）。只要dsSpecials資料集有變化，地區將根據更新的進行資料重建。
用一個HTML表顯示資料：
<table id="Specials_Table"> <tr> <th>Item</th> <th>Description</th> <th>Price</th> </tr> <tr spry:repeat="dsSpecials"> <td>{item}</td> <td>{description}</td> <td>{price}</td> </tr> </table>
從表的第2行開始根據資料集迴圈顯示資料。因為XML資料經常包含重複的節點，這個例子同樣在表的第2行標記中聲明spry:repeat屬性，這將導致使用者裝載頁面時資料集中的所有資料被顯示（否則只顯示資料集的當前行） 。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
