现性能。
Web 存储, 提供在客户端存储数据的新方法 HTML5 提供了两种在客户端存储数据的新方法: localStorage——没有时间限制的数据存储, 这是 HTML5 新增的功能。
sessionStorage——针对一个 session 的数据存储 HTML5 存储为 Web 站点提供了在本地计算机上存储和提取数据的方法, 之前这些都是由 Cookie 机制完成的, 但是 Cookie 只适应小数据量的数据存储, 因为它们由每个对服务器的请求来传递, 这使得 Cookie 速度很慢而且效率不高。
在 HTML5 中, 数据不是由每个服务器请求传递的, 而是只有在请求时使用数据。
它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的收稿日期:2011-11-18作者简介:康靖, 助教, 女, 安徽理工大学计算机科学工程学院 2009 级工程硕士现在安徽省淮南联合大学工作,主要从事计算机辅助 教育研究。
本栏目责任编辑:谢媛媛 软件设计开发 59Computer Knowledge and Technology 电脑知识与技术 第 8 卷第 1 期 2012 年 1 月网站,数据存储于不同的 区域,并且一个网站只能访问其自身的数据。
HTML5 使用 JavaScript 来存储和访问数据。
首先要检测浏览器是否支持 HTML5 存储, 所以在使用 HTML5 时首先要检测使用的浏览器是否对 HTML5 支持,目前各主流浏览器对 HTML5 支持的情况如表 1 所示: 表 1 目前主浏览器对 HTML5 的支持情况 IE Firefox Safari Chrome Opera 8.0 3.5 4.0 4.0 10.5 HTML5 本地存储是基于键值对的, 以键保存和提取数据, Key 是 String 类型的, 键 而对应的存储数据可以是 JavaScript 支持的类型,但是真正存储时还是使用 string 的形式存储, 所以在提取数据时要进行必要的强制类型转换, 比如:parseIntparseFloat等。
虽然 HTML5 的存储空间变大, 但是还是有大小限制, 它的最大存储空间为 5M,但是这对于以字符串存储的数据来说已经是不小的空间。
HTML5 针对 localStorage 提供了必要的 API 接口,包括查找 key 对应的键值, 以及添加删除键值对内容。
2 Flex 技术 Flex 采用 ActionScript 3 编程语言。
ActionScript 3 是一种强大的面向对象的编程语言, 基于 ECMAScript Language Speci6cation,Third Edition1。
它是一个可构建具有表现力的移动、 网络和桌面应用程序并且高效、 免费的开放源框架。
Flex 允许您构建共享一个公共代码库的网络和移动应用程序, 从而减少了应用程序创建的时间和成本以及长期维护2。
目前比较成熟的几种 RIA 客户端开发技术包括 Adobe Flash/Flex, JavaScript, Microsoft 的 Avalon。
Dojo, Adobe Flex 是为满足希望开发 RIA 的企业级需求而推出的表示服务器和应用程序框架, 它可以运行于 J2EE 、 .NET、
PHP 和ColdFusion 平台。
Flex 程序设计基于 Flex UI 组件库及基于 XML 的 MXML 来定义丰富的用户界面, 利用面向对象的脚本语言 (ActionScript)来处理程序逻辑, Flex 服务器翻译成 SWF 格式的客户端应用程序, Flash Player 中运行。
Flex 提供了音频、 由 在 视频和实时对话的综合通信技术使 RIA 具有前所未有的网上用户体验, 具有高度互动性和丰富的用户体验。
Adobe AIR 是 Adobe 针对网络与桌面应用的结合而开发出来的技术, 可以不必经由浏览器而对网络上的云端程序做控制, 也由于这是 Adobe 所开发的技术, 因此能很顺利的与 Adobe 旗下的 Flex、 Flash 等应用程序来进行开发3。
Flex 结合 AIR 也可以实现数据的离线存储功能, 但是 AIR 需要安装, 对于目前浏览器的普及程度来说, 意义不是很大。
AIR 程序可以检测到网络的连接情况, 当网络连接时 AIR 会把 web 服务器上的最新数据 down 下来保存在本地, 可以是 XML 格式或者存储在本地数据库 sqlLite 中, 一旦 AIR 程 AIR序检测到网络断开连接, 程序就开始使用本地的数据, 以达到离线运行的功能。
3 实例应用 前面介绍了 HTML5 的 localStorage 和 Flex 结合 AIR 技术在离线存储中的特点, 下面我们选择把 Flex 和 HTML5 结合起来来展示一下离线存储的功能, HTML5 和 Flex 的优点结合起来。
选择 Flex 作为表现层来展现我们的示例程序, 把 再结合 HTML5 离线存储中 localStorage 功能, 实现可离线运行的富互联网程序。
Flex 和 HTML 交互通过 JavasCript 来实现, 这里只是简单的使用 Flex 的 ActionScript 来调用 JavasCript 来实现该程序。
首先, Flex 端的 ActionScript 中通过 ExternalInterface 接口调用 JavaScript 代码来实现 HTML 页面登陆会员的信息保存。
Flex 在的 ExternalInterface.call方法调用 JavaScript 函数, 本例中就是 JavaScript 的 login 方法。
Public function callLogin:void if ExternalInterface.available var wrapperFunction:String login ExternalInterface.callwrapperFunctionkey.textval.text else traceWrapper not available 其中 wrapperFunction 为 JavaScript 中的函数名称, 可以传递也可以不传递参数给名字 functionName 对应的方法。
在本例中 login 方法有两个参数, 分别传递用户名和密码, JavaScript 端的 login 函数如下所示: function loginnamepassword // 首先判断浏览器是否支持 HTML5 的 localStorage iftypeoflocalStorage undefined alertYour browser does not support HTML5 localStorage else try //将键值对存储于 localStorage 中 localStorage.setItemname password 60 软件设计开发 本栏目责任编辑:谢媛媛第 8 卷第 1 期 2012 年 1 月 Computer Knowledge and Technology 电脑知识与技术 iflocalStorage.getItemanull // 从 localStorage 中提取数据, 用于修改页面标题 window.document.title localStorage.getItema alertPage Title has been changed catche ife QUOTA_EXCEEDED_ERR alertQuota exeeded Flex 这样把 Flex 生成的 flash 文件通过 object 标签嵌入到 HTML 中, 接受服务器端的数据然后保存到 HTML5 中的 localStorage 中,这样在网络中断后就可以使用 flash 调用 HTML5 的 localStorage 存储的数据来显示内容, 实现数据的离线显示。
4 结束语 该文介绍了 Flex 结合 AIR 的离线存储以及 HTML5 的 localStorage 离线存储的特点, 提出利用 Flex 技术和 HTML5 结合在一起,以 Flex 作为表现层提供很好的交互性, 再利用 HTML5 的 localStorage 功能,实现真正意义上的离线运行的 web 程序。
其中涉及到Flex 对 JavaScript 方法的调用,对于大规模应用的开发尚需深入研究, 但是通过本文相关技术的介绍, 可以为离线 web 程序的开发提供解决思路, 开发出更能满足各种需求的 web 程序。
参考文献:1 Adobe Flex.构建具有表现力的跨平台移动、 网络和桌面应用程序EB/OL. http://www.adobe.com/cn/products/flex/.2009.2 Adobe. Adobe LabsEB/OL.http://labs.adobe.com/wiki/index.
php/ActionScript_3. 2001.3 维基百科. Adobe AIREB/OL.http://zh.wikipedia.org/wiki/Adobe_AIR. 2011.(上接第48页) 采用 ASPSQL Server 结构设计的高校调度管理系统具有以下优点: 1 对客户端的软硬件要求低, 只需要能上网并可以使用浏览器即可; 2 利用 SQL Server 2000 数据库系统的优点,采用范式设计的原则设计数据库, 最大程度地减少了数据冗余,提高运行效率; web 3 通过权限分离、 服务器与数据库服务器的分离、 虚拟目录的使用等手段, 提高了系统的安全性; 4 数据具有实时共享的特点, 突破了过去采用 Excel 作为数据库工具时只能进行单机操作的缺陷.使得实验室的管理工作从人工管理阶段走向计算机网络自动化办公阶段, 极大的提高了工作效率, 节省人力和物力。
本系统在使用过程中, 由于需求变化等种种原因, 可能需要进一步完善, 这样为更科学调度管理工作提供了参考。
参考文献:1 陈杰田珍.论高校科研管理信息化J.科技进步与对策20008.2 陆永祯孙云龙.用 ASP 和 SQL Server 实现网站分级管理J.鞍山钢铁学院学报20023.3 程敏.对数字化校园管理系统的设计的一点构想J.科技风20085.4 李劲谢兆阳.SQL Server 2000 数据库设计与系统管理M.北京:清华大学出版社2001.5 李家国李建华章程.一种 Web 站点网页资源保护设计方案J.计算机工程20024. 本栏目责任编辑:谢媛媛 软件设计开发 61