AJAX在网络多媒体课件制作系统中的应用研究
摘 要:随着多媒体技术的迅猛发展,越来越多的高校正在加快多媒体课件资源的建设,基于B/S模式的网络多媒体课件系统很容易部署,具有传播范围广、易于操作等优点,被广泛应用到各高校中,但传统的B/S架构都是以同步请求/响应模式作为基础的,无法实现更加高端的用户体验。以AJXA技术为例,以异步请求/响应模式实现在网络多媒体课件制作系统中的应用设计,并对系统实现过程中的关键技术要点做了重点解析。
关键词:B/S模式; AJAX; Javascirpt;DOM;xml;XMLHttpRequest
中图分类号:G434,TP393 文献标识码:A 文章编号:1004373X(2008)1611903
Application Research of AJAX in Network Multimedia Courseware System
CAO Genyi
(Anhui Vocational Institute of Industrial Economy,Hefei,230051,China)
Abstract:With the rapid development of multimedia technology,more and more colleges and universities are speeding up the construction of multimedia courseware resources,it is easy to deploy based on the B/S mode network multimedia courseware system.It has been widely applied to all colleges and universities with its wide range of communication,easy operation and other advantages,but the traditional B/S structure is based on synchronous request/response mode,which can not be achieved to more highend user experience.In this paper,the author takes AJXA technology as an example to realize the application and design of the network multimedia courseware making system with asynchronous request/response mode,and pay special attention to analyze the key technical points in the process of achievement
Keywords:B/S mode;AJAX;Javascirpt;DOM;xml;XMLHttpRequest
随着计算机网络技术的飞速发展,如今Web技术已经成为商务和信息的中心,许多新方法和新技术也都粉墨登场。B/S结构已成为大量多媒体技术应用的首选平台,越来越多的高校也开始采用B/S架构来搭建课件系统,而AJAX的出现无疑是为当今的因特网添加了一道亮丽的风景线,让用户的体验变的更加丰富多彩。AJXA技术主要以Javascirpt,xmlhttprequest,DOM和XML为核心,来实现Web异步交互功能的应用,在Web应用研究开发中得到越来越多的关注。
1 AJAX定义
AJAX是通过现有的几种成熟技术的特性,相互结合构成一个功能强大的新技术。AJAX包括:
XHTML和CSS实现基本内容的显示;
使用文档对象模型Document Object Model来实现动态显示和交互;
使用XML和XSLT来实现数据交换和操作;
使用XMLHttpRequest或XMLHttp来实现异步数据查询;
使用JavaScript将以上技术结合在一起。
2 AJAX的工作流程
传统的Web应用程序,一般都是采取请求→刷新→显示模式,这就是同步请求/响应模式,就是每当用户通过单击按钮和链接向服务器发送一个请求时,都由服务器接收请求并处理,处理完毕后服务器将信息发送至浏览器进行显示。而在服务器处理的时间段里浏览器处于等待状态,显示为空白和无响应状态,用户所能做的事情只有等待。如图1所示。
在基于AJAX的Web程序中,最为重要的特征就是将同步请求转变为异步请求。这意味着客户端和服务器不必再互相等待,而是可以进行一些并发的操作。用户在发送请求以后可以继续当前工作,包括浏览或提交信息。在服务器响应完成之后,AJAX引擎会将更新的数据显示给用户,而用户则根据响应内容决定自己下一步的行为。AJAX在后台异步的方式工作,用户无需等待服务器的处理,可以进行并发工作,使得用户界面层次上更为接近C/S架构的客户端平台,并且AJAX还带来了性能的提高,因为用户的行为经过了AJAX引擎的处理,使得客户端可以只获取需要的数据。DOM模型使得动态改变页面的层次结构成为可能,这样动态获取的数据可以动态嵌入到页面中去,避免了数据复杂加载带来的速度和效率问题。服务器端的组织形式则可以将功能划分的更细,这样服务器就可以只为有用的数据进行工作,大大提高了运行效率。如图2所示。
3 AJAX的优势
提高效率 利用xmlhttprequest获取局部数据,减少了冗余请求和响应对服务器造成的负担,所以最大可能的节约时间、带宽、CPU耗用;
节约资源 利用AJAX技术把以前的一些服务器负担的工作移交到客户端,由闲置的客户端进行处理,从而节约服务器和带宽负担;
界面友好 AJAX无需刷新页面,减少用户等待时间,增强了用户体验;
技术支持 AJAX是基于标准化并被广泛支持的技术,无需插件和第三方程序;
易于移植 AJAX不受底层平台限制、有助于软件的移植。
4 AJAX 在网络多媒体课件系统中的应用实例
4.1 用户注册验证
在以往的网络多媒体课件系统应用中,一般情况下用户注册模块,都是将信息填好后,再传递给服务器端进行检验,这样就会给用户带来不便。如:用户名已被他人注册的情况,注册用户只能等到提交注册信息后,才能接收到系统反馈的信息,这样就可能造成注册失败,从而浪费用户的宝贵时间。
在填写表单内容时,如果需要保证数据的惟一性(例如新用户注册填写的用户名),则必须对用户输入的内容进行数据验证。数据验证通常有2种方式:一种是直接填写,然后提交表单,这种方式需要将这个页面数据提交到服务器端进行验证,整个过程不仅时间长而且造成了服务器不必要的负担;第二种方式是改进了的验证过程,用户可以通过点击相应的验证按钮,打开新窗口查看验证结果,但是这样需要新开一个浏览器窗口或者对话框,还需要专门编写验证的页面,比较耗费系统资源。而使用AJAX技术,可以由XMLHttpRequest对象发出验证请求,根据返回的HTTP响应判断验证是否成功,整个过程不需要弹出新窗口,也不需要将整个页面提交到服务器,快速而又不加重服务器负担。通常验证流程如图3,图4所示:
4.2 自由布局
在传统的网页中,页面的布局是固定的,但利用AJAX技术后则可以根据用户的使用习惯来进行自由布局,操作起来更加简单,并且在设置过程中用户可以根据需要随时改变窗口的布局。当用户关闭一个窗口时,也可以移动某一个窗口到需要的位置,而这些操作并不需要通过刷新页面就可以直接保存新的布局设置。
这些功能都是利用Javascirpt实现窗口的拖动响应、释放响应、显示和隐藏的,而拖动完成后向服务器发送XMLHttpRequest请求以完成数据的保存,通过CSS样式,丰富窗口效果,最终实现自由布局。
4.3 原理分析
(1) 当鼠标按下调用MouseDown事件,获得拖动元素的初始值;
(2) 当拖动时调用MouseOver事件,从而改变拖动元素的位置;
(3) 当鼠标释放时调用MOUSEUP事件,获得结束拖动时的鼠标位置。判断是否需要容器接收结点,如果需要容器接收该元素,则需要判断容器是否能接收被拖动的元素,如果能则在相应的结点插入拖动的元素,并删除原始点上的该元素,如果不能接收,要使拖动元素恢复到拖动前的位置,删除MouseOver事件。
4.4 防止页面过期
服务器中的Session变量,主要用来保存客户端的用户信息,为了节约服务器资源,通常会有个默认时间,所以session存在一个过期(也就是超时)的问题。如果在设置的时间内没有与服务器进行交互,那么就会触发服务器的session_end 事件,此时session就会过期。因此当教师在线编辑课件时出现内容较多的情况时,可能超出这个时间才与服务器进行交互,提交失败,导致编辑的内容丢失,如果利用AJAX技术,以定时刷新局部窗口来与服务器端进行交互,使浏览器窗口在被打开情况下与服务器保持畅通连接。
5 结 语
AJAX并不是一支独秀,Adobe公司的Flex等很多技术体系都在尝试提供更丰富的用户体验,随着Web异步交互的需求成长,会有越来越多的技术涌现出来。目前AJAX还处于前景与风险并存的阶段,虽然在应用领域AJAX已经取得了一定的进展,并且在用户认知度和影响力上也具有了相当的积累,但是其发展道路仍不能说一马平川,同时目前的AJAX还只是一个新生事物,并不是十分完美成熟的技术,所以还是存在一定的不足。所以在网络多媒体课件制作系统开发过程中也因该根据实际的需求,适当地使用AJAX技术,来丰富用户体验是有必要的。
参 考 文 献
[1]Dflying Chen.ASP.NET AJAX程序设计:第II卷(客户端)[M].北京:人民邮电出版社,2007.
[2]\阿斯利森,\舒塔.AJAX基础教程 [M].北京:人民邮电出版社, 2006.
[3]\克拉恩,帕斯卡雷洛,杰姆斯.AJAX实战 [M].北京:人民邮电出版社,2006.
[4]扎卡斯,姆克皮克,福西特.AJAX高级程序设计 [M].北京:人民邮电出版社,2006.
[5]李刚,宋伟,邱哲.征服AJAX+Lucene构建搜索引擎 [M].北京:人民邮电出版社,2006.
[6]杨华.AJAX及在ASP.NET中的实现\.现代电子技术,2006,29(12):7982.
作者简介 曹根义 男,1966年出生,安徽贵池人,工程师。院网络中心主任。主要从事网络与通讯技术方面的研究。