注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天朝布衣田中码农参上

苦逼码农的点点滴滴,请多多指教!

 
 
 

日志

 
 
 
 

Adobe Spry框架使用XML或JSON数据集入门  

2016-10-22 23:44:46|  分类: JavaScript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
Adobe Spry是一个为Web设计人员开发的Ajax框架,目的是成为实现Ajax的一种简单方式,对HTML、CSS和JavaScript有入门级水平的设计人员应该能够发现Spry是一种制作AJAX动态网页面的简单方法。 但严格意义上来说,Spry与Ajax框架是不同的,因为它是面向设计人员而不是开发人员。与其它一些Ajax框架相比,它的服务器端的技术依赖于XML,而不是依赖于JSON。但据说最新版的Spry 1.5已经开始整合JSON,可以从Adobe 免费下载,其中包括大量演示、示例、技术文章和文档。
它的使用可以说是非常简单,下面来看看相关简单示范。首先是如下数据源【XML格式】:

<?xml version="1.0" encoding="UTF-8"?>
<sets>
<site id="1">
<name>我就上乐乐吧</name>
<url>593668.com</url>
</site>
<site id="2">
<name>爱上吃喝</name>
<url>237h.com</url>
</site>
</sets>

使用之前先要引入了两个.js文件。

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

接下来是要显示相关数据的表格代码,可以看到是跟框架解析出来的XML数据对应的:

<div id="sites_div" spry:region="dsSites">
<table id="sites">
<tr>
<th>Name</th>
<th>url</th>
</tr>
<tr spry:repeat="dsSites">
<td>{name}</td>
<td>{url}</td>
</tr>
</table>
</div>

最后就是编写相关js代码,让Spry将数据XML填充到这个表格中来[这里用的就是xpath来指定具体的数据集]。

<script type="text/javascript">
<!--
var dsSites = new Spry.Data.JSONDataSet("data.json", "sets/site");
-->
</script>


Adobe Spry框架使用XML或JSON数据集入门 - sinsunson - 天朝布衣田中码农参上
接下来再说JSON格式的数据集,这样xpath.js就不再需要了,要集成另外一个js。

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

<scriptlanguage="JavaScript"type="text/javascript" src="includes/SpryJSONDataSet.js"></script>

JSON的格式文件如下:

{
"sets": {
"site": [
{
"id": "1",
"name": "我就上乐乐吧",
"url": "593668.com"
},
{
"id": "2",
"name": "爱上吃喝",
"url": "347h.com"
}
]
}
}

然后显示格式不用改,只要调整下js【可以看到,JSON用.来指示路径,就象XML和XPATH中用 '/'指示路径一样 】。

<script type="text/javascript">
<!--
var dsSites = new Spry.Data.JSONDataSet("data.json", { path: "sets.site" });
-->
</script>

好了,以上就是简单的用法,如果需要深入,比如要过滤,要多数据集,以及将数据排序什么的,都可以去察看相关文档。
 


  评论这张
 
阅读(1)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017