关闭

用Spry框架来简化AJAX

标签: 框架javascriptxmlhttprequesthtmldreamweaverxml
1947人阅读 评论(0) 收藏 举报
分类:
用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的内容。
0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

实现AJAX的基本步骤

要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤:       (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.       (2)创建一个...
  • evilemon
  • evilemon
  • 2015-07-09 11:13
  • 1558

ajax的三种实现方式

Jquery的ajax实现 load方法 1 实现load方法中只有url参数的效果 load(url)     2 load方法中带三个参数 url data  function   第一个参数...
  • z_zhangteng_t
  • z_zhangteng_t
  • 2016-11-20 11:11
  • 1281

ajax实现简单的多人聊天

原理:简单来说就是利用ajax的异步,ajax每隔一段时间会从后台获取数据而不刷新页面。 步骤:1。数据库里建两张表,一张用户表,一张消息表 isGet表示消息是否被读 2.使用java web做后台,主要使用hibernate和struts2框架,xml数据格式。 3.下面给出核心...
  • change_on
  • change_on
  • 2015-11-01 21:10
  • 1108

AJAX的底层实现原理

创建一个 XMLHttpRequest 对象(由于浏览器不同需要 相应判断处理),设置相应的请求信息(通过open来做,例如请求地址等 设置 );然后我们绑定 onreadystatechange 事件,在这个事件中我们根 据服务器返回状态的不同来做出不同处理,这其中主要是请求成功后接收相应的返回值...
  • fuxiaohui
  • fuxiaohui
  • 2017-05-25 14:09
  • 1160

原生JS实现AJAX的思路

AJAX在网站的数据交互中起着重要的作用,它在不用刷新整个网页的情况下,能对网页的局部内容进行更新。当然它并不是一种新的编程语言,而是一种使用现有标准的方法。       我们知道,在传统的网页数据交互中,都是遵循这样一个流程:首先是客户端向服务器发送请求,服务器收到相...
  • yangkaige111
  • yangkaige111
  • 2017-03-22 18:37
  • 277

Ajax原理及用原生js实现Ajax应用

什么是Ajax? Asynchronous JavaScript and XML 浏览器与服务器之间进行异步交互无需刷新页面的技术 Ajax原理1. 获取XMLHTTPRequest对象HTML按钮<center> <button id="btn01&qu...
  • u011246325
  • u011246325
  • 2015-04-06 23:40
  • 5650

如何使用 ajax 实现分页技术

如何使用 ajax 实现分页技术标签: ajax, 分页技术, API 数据接口, 后台数据库效果图如下: 首先,先看 HTML 代码和 CSS 代码,我们需要一个 table 和一个 footer:<div id="global"> <div id=&quo...
  • github_37483541
  • github_37483541
  • 2017-02-09 10:17
  • 4605

jQuery实现Ajax应用

首先理解一下什么是Ajax,全称是Asynchronous Javascript And XML(异步JavaScript和XML)是一种交互式网页应用的网页开发技术。 用通俗的话说,就是当需要数据处理或更新的时候,不采用整个网页页面重载的方法,而是采用网页某部分更新,也就是让后台和服务器做少量的数...
  • u013045370
  • u013045370
  • 2016-05-11 09:53
  • 1109

使用Ajax的添加购物车

My JSP 'shop_cart.jsp' starting page         $(function(){     var isHasCart = "${sessionScope.sc == ...
  • sinat_35010585
  • sinat_35010585
  • 2016-08-08 17:31
  • 1686

AJAX的原理-如何做到异步和局部刷新

Overriew: onReadyStateChange被回调函数赋值,则能实现异步调用,回调函数直接操作DOM,则能实现局部刷新。那么XMLHttpRequest的onReadyStateChange如何知道服务ready了呢?状态如何change了呢(观察者模式)?则是通过客户端对服务的状态询问...
  • fyxxq
  • fyxxq
  • 2014-03-26 23:19
  • 33821
    个人资料
    • 访问:5870666次
    • 积分:51667
    • 等级:
    • 排名:第65名
    • 原创:792篇
    • 转载:23篇
    • 译文:24篇
    • 评论:1186条
    一名路过的黑客

    大家好,我是黑客,专门盗账号的。现在这个人的帐号被我盗了,但看这个人平时的博客空间,一直过着艰苦努力、持之以恒的技术研究生活,勤奋刻苦,积极分享,无私奉献,我被深深的感动了,这是一个纯粹的人,人品这样的高尚,希望大家看到我这条消息后,可以私聊他,多鼓励他,不缺钱的就多给他一些经济上的资助,让他再接再厉!就这样吧,我下线了,眼框湿湿的难受。

    文章存档