基于Ajax的教学资源素材库数据交换模式研究

摘要:“教学资源素材库”是教学信息化的基础支撑库,为全校教师备课时提供丰富的参考资源。建设一个学科门类齐全、内容丰富的资源库,可有效提高教师备课效率和电子教案的质量。在研究当前先进的Web2.0网络设计技术的基础上,结合多年多媒体课件制作经验,优化现有资源素材库的数据交换机制,提高了服务系统的响应,改进了用户的浏览体验。

关键词:计算机辅助教学;素材资源库;jQuery;异步响应

中图分类号:TP312文献标识码:A文章编号:1009-3044(2010)22-6314-03

Optimize Ajax Technology-based Data Exchange Mechanism in TRL

DUAN Sheng-qiang, YU Le-bing, CHENG Jie, ZHAO Jia

(Xi'an University of Arch. & Tech, Xi'an 710055, China)

Abstract: "Teaching Resource library" is the basal support library for the traditional education, which provides a wealth of reference resources for teachers during lesion preparation phase. To construct a wide range of disciplines, content-rich resource library, can effectively improve the efficiency of lesson preparation and electronic teaching quality. With the advanced technology of Web2.0, combined with years of experience in the production of multimedia courseware, optimize the data exchange mechanisms, and improve the service system response, enhancing the user's browsing experience.

Key words: computer-aided instruction; teaching resource library; jquery; asynchronous response

多媒体教学资源素材库是计算机多媒体教学全面展开的基础。它包含的素材种类丰富,媒体类型多样,实时在线用户多,需要采用计算机和数据库技术对素材数据进行管理。许多高校已经建立起了这样的资源库管理系统,但在已建成的系统中,客户请求页面中存在着大量重复数据,造成较大的网络带宽和服务器处理资源的浪费,使服务器在同一时刻无法处理更多的用户请求,同时客户端显示效果较为单一,并且无法追踪反馈服务器的处理状态,在系统或网络繁忙的情况下,用户长时间内得不到任何提示,容易失去浏览信心。针对上述问题,本文拟采用jQuery (Ajax扩展库)异步通信技术,优化改进现有资源素材库管理系统的数据交换和数据验证机制,提高系统服务的响应效率。

1 理论依据

1.1 Ajax技术原理

AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式Web应用系统的开发技术。根据Ajax提出者Jesse James Garrett建议,需满足:1)使用XHTML+CSS来表示信息;2)使用JavaScript操作DOM(Document Object Model)进行动态显示及交互;3)使用XML和XSLT进行数据交换及相关操作;4)使用XMLHttpRequest对象与Web服务器进行异步数据交换;5) 使用JavaScript将所有的东西绑定在一起。6)使用SOAP以XML的格式来传送方法名和方法参数。AJAX不是指一种单一的技术,而是有机地利用了一系列相关的技术。

在传统的B-S交换模型中(图1),客户端的请求与服务端的处理是同步的,浏览者首先向服务器提出浏览请求,然后等待服务器的响应,接下来根据服务器的响应,解析页面的HTML源代码,分析出需要下载的样式表、图片、音视频、动画等数据,下载完成后浏览器再进行渲染,这样浏览者就可以看到点击的网页了。在这种模式中,浏览者每次点击的页面是不同的,在这些页面中大部分数据是相同的,无需再次下载,多次点击会带来服务器处理资源和网络带宽的浪费。

在Ajax异步处理模型中(图2),浏览器首先加载并分析整个页面的HTML-DOM结构,完成页面首次初始化渲染后,用户的后续操作,仅仅是通过Ajax引擎向服务器发起数据请求,收到服务器的处理数据后,客户端利用Javascript技术,操作DOM模型中的元素,实现元素内容的更新,在这种模型中,客户端的一个页面可以多次向多个服务器页面发起请求,客户端与服务器之间只进行“更改”内容的交换,从而大大降低了通信数据量。

实际上,Ajax利用了XmlHttpRequest对象(Ajax引擎)消除了用户和服务器交互之间的等待,使用户操作与服务器响应异步化。用户提交的请求以及服务器返回数据解析均需要由Javascript完成,由于Javascript编码语言的复杂性和弱调试性,在实际的工程使用中,较少直接使用原生的Javascript实现Ajax,多采用经过封装和扩展的框架,常用的有jQuery, Mootools, Dojo, Ext,每种框架都有着各自的优点和缺点,在此不做展开讨论。本文拟采用体积轻巧、插件丰富的jQuery代码库。

1.2 jQuery技术特点

jQuery是一套跨浏览器的JavaScript库,强化HTML与 JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上释出第一个版本。全球有28%的站台使用jQuery,是目前最受欢迎的JavaScript库,它的主要特色是:1)轻量级,大小不到30K,压缩后只有18K;2)强大的选择器,兼容CSS1到CSS3几乎所有的选择;3)出色的DOM操作的封装;4)可靠的事件处理机制;5)完善的Ajax支持,使开发者专项处理业务逻辑;6)不污染顶级变量;7)出色的浏览器兼容性,能够在IE6.0+、FF2.0+、Safari2.0+、Opera9.0+下正常运行;8)链式操作,可在一个对象上添加一组操作;9)隐式迭代,自动操作集合对象,大幅减少代码量;10)丰富的插件支持。

2 系统设计

2.1 系统需求

改进后的多媒体教学素材资源库需要满足以下要求:

1) 素材资源库前台页面的数据必须异步的提交至服务器端。由于信息操作页面包含的数据量非常大,如果每次操作都对页面进行刷新的话,会对服务器带来较大的冲击,并且用户需要等待的时间会非常的长,因此必须采用异步提交的方法,每次用户的操作只是提交简单的数据,并且服务器的处理状态和处理结果在不刷新当前页面的情况下,用户会得到有效地反馈。

2) 素材资源库的录入数据必须进行验证。干净有效的数据是系统安全运行的基础,每次客户端提交的数据在存入数据库前,必须进行有效地检验,传统的同步模式中,每次客户端提交的数据,都提交到服务器端进行检验,这种检验模式也会带来不必要的服务器开销,新的管理系统中,数据的有效性验证在客户端完成,服务器端专注于数据的合法性验证。数据的有效性验证在客户端完成,无需与服务器的通信,可有效地改善了用户了浏览体验。

3) 数据处理过程中,客户端及时更新处理状态。素材资源库中包含着大体积数据,如展示挂图、讲解动画、演示视频,服务器处理这类数据时需要花费的时间较长,如果在这么长的时间内,客户端没有任何提示,就会造成用户等待的焦躁感,会不断地刷新页面,甚至会退出使用。因此在新系统的设计中,必须考虑这样的问题,在服务器的处理能力和网络带宽无法增加的情况下,给用户及时的信息提示,可有效地缓解用户的等待压力。

2.2 系统组成与结构

基于以上论述,设计基于jQuery的多媒体教学素材资源库信息管理系统,功能设置与现有的信息管理系统类似,以用户、文章、文件为中心展开,概要设计如图4所示。

总体结构设计如图5所示。系统遵循B-S的设计模型,主要分为客户端、服务器端、数据存储三部分组成。

1) 数据层主要存储了系统的所有数据信息,包括系统配置信息、用户信息、内容信息、文件信息及过程信息。

2) 服务器端主要是业务处理层,控制着整个系统的逻辑,保证系统正常运行,接收处理客户端提交的数据参数,传递给数据层,同时将数据层的信息解析到客户端。在Ajax系统中,业务处理层的页面不再承担构建处理后展示页面的组织功能,而专注于数据的处理,因此可按照功能进行设计。

3) 客户端主要通过接口与用户进行交互,用户首先将数据提交到jQuery封装层,然后由jQuery调用Ajax引擎,向服务器端提交数据,同时解析服务器端返回的数据,操作页面中DOM元素,实现页面的局部内容更新。

3 系统实现

素材资源库管理系统的系统功能和系统部署与传统的信息管理系统类似,主要区别是在客户端加入jQuery处理层,负责处理服务器端的数据交换处理。

3.1 jQuery环境配置

STEP1 下载jQuery-version.js文件,置放与Web网站的可访问目录。

STEP2 在客户端页面标签内引入jQuery包:

STEP3 构建jQuery代码书写总容器框架,置于引入包后,标签之前:

$(document).ready(function(){

///所有jQuery代码必须放在此处,才能生效

});

3.2 客户端表单验证

为了系统的安全性和避免读入脏数据,需要对上文所提及的各类表单的数据进行验证。表单的数据验证可在客户端和服务器端进行,客户端采用正则表达式的方式对数据的合法性进行验证,例如数据非空验证、字母编码范围(只允许字母和数字)的验证、数据格式(邮政编码、电话)的验证等,服务器端实现数据的有效性验证,例如输入的用户名是否存在,密码是否争取。一般来说,客户端的验证对用户响应较快,而服务器端的验证受CPU处理能力和网络带宽的影响较大,对用户的响应相对较慢。

以“用户登陆”操作为例实现表单验证,

客户端文件:login.php,用户输入用户名、密码,并完成数据合法性验证。

密码