18.4　一个AJAX框架——Spry框架

本节将要为读者介绍Spry框架，包括Spry框架的介绍及如何使用。为了让读者更好的理解，笔者采用几个实例来给读者进行介绍。其中包括Spry框架的使用方法、级联下拉菜单的实现等。

18.4.1　Spry框架简介

Spry是一个为Web设计人员开发的Ajax框架，它实现了在一个HTML页面中创建丰富体验。

Spry的目的是成为实现Ajax的一种简单方式，对HTML、CSS和JavaScript体验只有入门级水平的设计人员应该能够发现Spry是一种整合内容的简单方法。

Spry与Ajax框架是不同的，因为它是面向设计人员而不是开发人员。与其他一些Ajax框架相比，它的服务器端的技术不是很可靠。它依赖于XML，XML可以很容易被Spry组件接受，几乎没有什么大问题。

Spry包含一些新特性用于同不同类型的数据交互，主要如下：

·嵌套数据集。

·JSON数据集。

·HTML数据集。

·会话处理。

·表单提交。

·分页数据视图。

·重写已经存在的效果。

·单选按钮验证框。

·自动建议框Spry API函数。

Spry框架其实就是一个客户端的JavaScript类库，包含了一组JavaScript文件、CSS、图片文件、通过官方的框架结构图，能看出Spry框架的核心是4部分，为XML数据器（XML Data Sets）、动态区域（Dynamic Regions）、装饰器库（Widgets）和变化效果库（Transition Effects）。

XML数据器是一个提供了从XML文档中载入和管理数据的JavaScript对象，是Spry框架中处理XML格式数据的一个JavaScript功能实现。通过它可以从XML中直接得到转换成表格数据格式的行和列的值，其实就是数组。它封装了获取XMLhttpRequest的方法，和发送并接收数据等一系列获取数据的方法。

要创建一个XML数据器，读者必须在HTML文件中加入两行引入JavaScript文件的代码。

Spry框架的核心js文件之一xpath.js是Google基于XPath 1.0标准的JavaScript功能实现。SpryData.js则包含了定义XML数据器和动态区域的代码。

构造XML数据器就好像新建一个类一样，用“new”关键字即可，代码如下。

Var dsPhotos=newSpry.Data.XMLDataSet(
"/photos.php?galleryid=2000","/gallery/photos/photo");

Spry框架为XML数据器提供了一些有特色的功能，如数据排序，数据过滤，按指定时间间隔自动更新，并引入了观察者通知模式以支持事件的触发。

动态区域是读者一旦建立了XML数据器，就可以在动态区域中去显示这个数据器的数据了。创建动态区域块很简单，只要在HTML标签的相应位置加上“spry:region”属性就可以了，Spry框架就会知道这一块是被标识成动态区域了。在动态区域，读者可以有条件的选择要输出的数据，也可用循环输出。动态区域另一个特点就是，它分为“master”和“detail”两个区域类型。

装饰器库是指一个装饰器是由一组HTML，CSS，JavaScript封装成的高级UI。最常见的装饰器有可折叠的菜单，树型菜单和选项table面板等。这些对象都比较难于创建，需要一些更高级的编程经验。Spry的开发组在创建装饰器这一概念就是希望开发者们能相互协作，共享各自的设计，把这些高级界面元素用在网站的页面上。

Spry框架下的装饰器是易于编辑的。这种模型非常适合于设计者和编辑人员，要改变外观，只要改变CSS就可以了，要增加一个可折叠菜单就变得非常简单了。

变化效果库是指Spry框架的变化效果库都存于“SpryEffects.js”文件中，是基于JavaScript的一些动态变化效果。如淡出、改变形状等。Spry框架在设计时，曾考虑直接用第三方的效果库，如“Script.aculo.us”，但后来开发小组觉得要保证框架代码和标签的一致性，还是选择了自已开发，但是也基本上是以“Script.aculo.us”为原型进行设计，因为“Script.aculo.us”本身就是一个非常优秀的变化效果库框架。

18.4.2　Spry框架的使用方法

这里将为读者总结Spry的知识点，相信会对读者有一定帮助，至少读者通过学习本节，可以对spry有个初步的认识。

（1）使用Spry框架，必须引用的两个核心js文件，这两个文件为“xpath.js”和“SpryData.js”，引用的语法格式如下。

<script type="text/javascript" src="../../includes/xpath.js">script>
<script type="text/javascript" src="../../includes/SpryData.js">script>

其中，type是指引用文本的类型，src是指引用文件的相对路径。

（2）创建一个数据器“dataset”。XML数据器是一个提供了从XML文档中载入和管理数据的JavaScript对象，是Spry框架中处理XML格式数据的一个JavaScript功能实现。通过它，读者可以从XML中直接得到转换成表格数据格式的行和列的值，其实就是数组。它封装了获取XMLhttpRequest的方法和发送并接收数据等一系列获取数据的方法，代码如下。

     var dsPhotos = new Spry.Data.XMLDataSet("/photos.php","/gallery/photos/photo",{
     method:"POST",postData:"galleryid=2000&offset=20&limit=10",headers:{
     "Content-Type":"application/x-www-form-urlencoded; charset=UTF-8"
     }});
     var dsPhotos2=new Spry.Data.XMLDataSet(
     "/photos.php?galleryid=2000", "/gallery/photos/photo");

其中，method:为请求发送方式，其值为POST和/GET，默认为GET。而postData:为请求参数，可省略，可直接把/photos.php换成/photos.php?galleryid=2000&offset=20&limit=10。Content-Type:为头信息。

（3）不使用缓存。这里要重点说明一下，在应用时，会出现设置为不用缓存时，页面仍然不是最新数据，是用一个“servlet”生成“xml”，然后对生成的数据进行删除和添加，但页面显示的数据不会自动更新。

出现这样的现象，是因为在IE中使用“userCache:false”是不够的，还要在生成xml的JSP、PHP等中，设置头不使用cache，如在生成xml的JSP和servlet中是要加上如下代码。

response.addHeader("Cache-Control","no-cache");

注意，以上问题只存在IE中，在Firefox和Opera中不存在。spry对Opera9以上版本支持很好，使用版本8的朋友要注意了。在PHP中的使用代码如下。

Var dsPhotos = new Spry.Data.XMLDataSet(
"/photos.php?galleryid=2000","/gallery/photos/photo",{useCache:false})

另外，也可以在构造完数据器后，再设置缓存。设置缓存的代码如下。

     dsData.useCache = false;
     dsData.loadData();

（4）获取数据形式。假如上面的程序发送请求，则返回的xml的代码，如下。

     gallery id="12345"> 
     photographer id="4532">John Doephotographer> 
     email>john@doe.comemail> 
     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" />
     hotos>
     gallery>

那么运行此程序时，“gallery/photos/photo”将会返回的数据是数组“[{"@path":"sun.jpg","@width":16,"@height":16},{"@path":"tree.jpg","@width":16,"@height":16},{"@path":"surf.jpg","@width":16,"@height":16}]”，程序的代码如下。

     var rows = dsPhotos.getData();
     // 
获取所有行
     var path = rows[0]["@path"];
     // 
获取第一行中"@path"
的值 
     dsPhotos.setCurrentRowNumber(2);
     // 
将第3
行做为当前处理行，下标以0
开始 
     var id = dsPhotos.getData()[2]["ds_RowID"];
     // 
获取第3
行的ID
     dsPhotos.setCurrentRow(id); 
     // 
通过第3
行的id
，将第3
行设为当前处理行

其中，第1行“var rows=dsPhotos.getData();”是用于获取程序中所有行的函数，第3行代码“var path=rows[0]["@path"];”是用于获取程序中第一行中“@path”的值，第四行代码“dsPhotos.setCurrentRowNumber(2);”则是作为当前处理行，下标以“0”开始。