ajax与spry的关系,用Spry框架来简化AJAX

Spry AJAX框架是一个面向Web设计者的JavaScript库。它提供了很多供设计者建立页面的扩展功能，AJAX风格。目前其最新版本为

2007.5.17日发布的1.5版本。下载地址为：http:

//www.adobe.com/cfusion/entitlement/index.cfm?event=custom&sku=RC00210&e=labs_spry

Spry框架的目标：

1)保持开放

Spry工作在所有的HTML编辑器上，包括Dreamweaver。任何人都可以从Adobe Labs下载它，开始建立高性能的交互式Web页面和应用程序。无需授权或服务端代码支持。

2)易于使用

Spry使用了同建立Web页面相同的技术，如HTML，CSS和JavaScript，包括几个JavaScript库。使用同样的技术来创建和设计动态区域和交互式的工具，可以象其它HTML元素一样在页面上使用。

3)能够创新(innovation)

Spry提供了轻量级的强有力的模型，如增加数据、交互性，丰富的UI工具，促使你完全控制设计。

Spry同时为Web设计者和开发者而创建。它的指导原则：

1)工作在Web产品上，集中精力于Web UI和x(HTML)产品

2)x(HTML)和CSS专家

3)熟悉JavaScript和DOM

4)关心代码的质量

5)想创建下一代的Web页面。

要求：

1)保持框架熟悉、轻量级和透明性

2)保持框架最小(以页为中心Page-Centric)

3)看起来象HTML的自然扩展

4)和其它技术的整合

提供更好的设计开发工作流

1)促使设计时的数据和内容的分离

2)支持"design-time XML"

3)框架易于均衡design-time工具

下一代的Web用户界面

看例子：

http://labs.adobe.com/technologies/spry/demos/index.html

Spry是客户端框架，以JavaScript库的方式增加到Web页面中。Spry的JavaScript库主要有三个模块：

1)Spry Data

使用Spry Data Sets and Regions来访问和显示数据。Spry的Data Set是一个JavaScript对象，负责载入和管理数据。Data Set基础类适合多种不同的数据源访问数据。

2)Spry Regions

一个Spry dynamic Region是Web页面上绑定数据集的一个区域。当数据集被修改时(如，从服务器载入数据，过滤、排序等)，Spry Region被更新并反射新数据。Spry Region能用任何HTML块元素如＜div＞、＜p＞标签创建。

例：

＜div spry:region="dsProducts" id="content"＞

＜table id="products"＞

...

＜/table＞

＜/div＞

3)Loading Data

Spry Data Set负责载入和处理数据，而XML是经常用到的在服务器端到客户端传递数据。Spry XML Data

Set能被用于通过浏览器的XMLHTTPRequest对象来检索数据。XML可以包含在一个文件中，也可以是服务器端的函数调用。Spry使用

XPath，W3C标准来描述XML节点集，识别节点描述为数据记录。

4)Data Set Declaration

Spry Data Set增加到页面分为两步。

首先，包含适当的JavaScript库：

＜script type="text/javascript" src="/SpryAssets/xpath.js"/＞

＜script type="text/javascript" src="/SpryAssets/SpryData.js"/＞

其次，创建Data Set的实例，通过知道XML数据，定义重复的节点。

var dsProducts=new SpryDataXMLDataSet("products.xml","products.product")

------------

dsProducts: 变量引用。数据集的名字。

SpryDataXMLDataSet：对象实例。

products.xml：XML数据。

products.product：XPath。在XML文件中指向节点的指针。

5)显示数据

使用Spry Regions显示数据到Web页面。创建从数据集到Spry Regions的绑定是很容易实现的，通过附加Spry属性到HTML标准标签上。如下的例子：

＜div spry:region="dsProducts" id="content"＞

＜table id="products"＞

＜tr＞

＜th spry:sort="name"＞Product＜/th＞

＜th spry:sort="category"＞Category＜/th＞

＜/tr＞

＜tbody spry:repeat="dsProducts"＞

＜tr＞

＜td＞{name}＜/td＞

＜td＞{category}＜/td＞

＜/tr＞

＜/tbody＞

＜/table＞

＜/div＞

------------------

Spry Region Declaration：Spry区域声明

Data Set Binding：数据集绑定

Spry Attributes：Spry属性

Spry Data Bindings：Spry数据绑定

Repeat Region Declaration：重复区域声明

6)Master/Detail Data Sets

Spry框架支持Master/Detail Data Sets概念。这意味着在Master Data Sets中选择记录来驱动Detail Data Set的内容。