基于Ajax与jQuery的教学交互平台
时间：2022-09-08 12:23:50
摘要： 针对现有教学平台在交互方式上的不足，设计一个基于ajax技术的教学交互平台系统。通过Ajax和Web2.0技术的结合，实现数据交换的异步，使系统服务与用户之间有更丰富和快捷的交互性，同时jquery的使用简化了Ajax开发。
中图分类号：TP311文献标识码：A文章编号：1009-3044(2011)01-0116-02
The Interactive Teaching Platform Based on Ajax and jQuery
FENG Xiao-xin
(North University for Nationalities, Yinchuan 750021, China)
Abstract: At present teaching platform in an interactive mode. This teaching platform based on ajax technology. Ajax web2. 0 and technology and implementing a data exchange of the asynchronous services, the system from user to have a richer and fast, use of interactive jQuery simplify ajax development.
Key words: ajax; jQuery; the interactive teaching platform; Web 2.0
Web2.0是新一代网络应用的统称，其特点在于社区(Community)、交互(Interaction)和开放(Openness) [1]。Ajax(Asynchronous Javascript and Xml)是Web2.0的核心技术，是浏览器与服务器异步交互技术的总称。
教学平台为网上教学提供一种交互、开放、易用的全新环境，实现师生网上的互动交流讨论，实施个性化和人性化教学，提高教学质量。本文设计了基于Web与Ajax技术的教学交互平台，具有明显的异步特征，提高了系统的使用效率。而jQuery的使用是增加友好的页面效果和行为，同时利用其内置的Ajax函数简化了Ajax开发。
1 技术介绍
1.1 Ajax
Ajax是几种已有技术的综合使用，是一种新的互联网应用设计思想和实现方式。Ajax只会将页面中需要更新的部分传送给服务器来处理，并且将处理后的内容返回客户端浏览器来进行局部更新，由于只需要传送并处理少量的数据，而不是将整个页面内容重新加载到浏览器中，这样就提升了页面的互动性、响应速度与便利性，使得网页界面的使用体验大幅改善。
在基于Ajax的系统交互过程中，可以向服务器发起一个异步请求来完成这件事。模板文件、导航列表和页面布局上的其它部分已经随着初始页面发送给了浏览器，服务器无需重发，以后每次只需要发送相关的数据即可。异步通信方式适用于重新初始化以及服务器端产生新数据并不频繁的情况[3]。在Ajax应用中，网络的通信流量主要是集中在加载的前期，用户登录后都需要一次性地将一个大而复杂的客户端交付给浏览器。对于瞬态应用来说，积累起来的通信流量要比以前的基于页面的Web应用少很多。Ajax基本工作流程如图1所示。
1.2 jQuery
jQuery是一个简洁快速的JavaScript库，应用它可以在网页上简单地操作文档、处理事件、运行动画效果或者添加Ajax交互．它是轻量级的js库，兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
2 系统设计
基于Ajax技术的教学平台系统采用Apache-Tomcat-6.0作为web服务器，数据库关系平台采用Mysql。系统的整体结构如图2所示为四层结构，第一层是用户层，包括学生、教师和管理员；第二层是接口层，采用Ajax技术为不同的用户设计不同的个性化门户，同时Ajax技术带了好处，即把一些服务器负担的工作转嫁到这一层，减轻服务器负担[2]；第三层是应用层，是整个系统的核心层，所有的功能模块在此，不同的用户拥有不同的权限使用不同的模块；最后是数据层，存储系统所需的数据。通过此平台的使用，实现教师与学生之间的及时会话交流，同时也为学生的在线考试和资源的共享提供平台。
2.1 接口层设计
与传统的技术相比，采用Ajax技术可以容易的实现个性化页面设计。本系统设计了个性化门户，为不同的用户提供了不同的门户登陆。个性化门户主要是规划页面的布局，将整个页面划分为多个小窗口（Portlet），初始状态下多个Portlet均匀分布在规定的页面内。系统采用domdrag.js[3]文件为用户提供Portlet位置的拖放，使之按照用户拖放的位置来显示不同的布局。用户也可以任意添加或删除某个Portlet，系统可以直接保存用户的修改结果，无须刷新页面，再次登陆时页面是修改以后的布局。
本系统初始化状态下为教师、学生和管理员设计不同的门户，主要是针对不同的用户对系统拥有不同的操作权限。如初始化状态下系统为教师提供的门户至少包含5个Portlet，分别包含其拥有的五个权限：教学通知、资源管理、在线讨论、作业管理和试题管理。那么教师用户也可以随自己的喜好任意添加其他用途的Portlet。
2.2 应用层设计
应用层的设计主要是三个内容的设计，一是如何采用Ajax技术实现更加生动的信息，二是如何设计更加高效的树型菜单。同时整个应用层中，如何生成互异的随机试卷也是重点内容。
2.2.1 多样性信息
整个系统中多处实现信息的，采用Ajax与jQuery技术的融合，可以实现更加多样化的信息形式，具体实现包含三个特点：
1）淡入淡出效果。系统采用jQuery库中的fadeIn()函数实现窗口的淡入效果。在页面显示多个通知div时，为了使淡入效果先后出现，调用fadeIn()函数时传入一个参数值，设定整个淡入过程所需要的毫秒数。
2）随机背景颜色。系统使用jQuery的遍历功能实现每个窗口背景色的随机赋值，每个背景颜色可以在红、橙、黄、绿、青、蓝、紫7色中选取，其中背景颜色可以定义通知的紧急状态。同时用户也可以人为定义背景色，系统将具体的7种颜色代码放入一个数组中保存，当页面加载完毕后，通过jQuery对选择颜色的下拉列表项动态设置其背景颜色。
3）随机位置显示。每一条通知对应一个div，想要将该div随机显示在页面某个位置上，只需要使用JavaScript中的随机函数生成两个整数，分别作为div的左边距和顶边距即可。
2.2.2 无刷新目录树
传统Web开发技术制作的树型菜单，在每次页面打开时通常遍历数据库的所有与该树有关的数据，并一次性生成树型结构。每次树型结构的改变都要对整个页面进行刷新，重复的数据传输给服务器带来负担[3]。采用Ajax，只有在展开菜单时才想服务器数据库发送请求，利用JavaScript控制菜单的显示与隐藏，即无刷新和动态加载，大大减少了数据库与客户端的传输。为了避免不同客户端对同一个目录树结构显示不一致的问题，参考文[6]采用Server Push技术解决。
本系统设计了四级树型列表，如下图3所示，初始状态为左图所示，为了随机生成试卷，展开四级树型列表如右图所示。此时系统动态加载了教学平台功能、试题区和生成试卷三个目录节点中的叶子节点信息，而其他的节点的叶子节点数据并不需要读取。并且使用Ajax后，读取过的叶子节点信息将储存在缓冲区中，通过节点开关可以重复查看，无须再次加载，提高了工作效率。
目录树的创建分为三个步骤，第一步初始化目录树，主要是创建根节点；第二步获取给定节点的子节点；第三步设置给定节点的子节点的内容，并在页面上创建子目录。具体的工作流程如图4所示。
3 结束语
综上所述，传统模式的教学平台系统在用户与系统交互性方面存在着不足，同时由于大量冗余数据的传输，使得系统性能下降。基于Ajax的新系统通过异步式交互等一系列技术，使系统终端用户获得更丰富的交互体验。同时由于数据传输的关键和有效，避免了网络带宽的浪费，提高了系统性能。为了可以更好的提升Web应用的响应速度，解决大量数据交互而带来的服务器响应下降的问题，可以结合Ajax技术引入其他的框架结构，如Struts[7]或Spring和Hibernate集成[8]，用于简化系统的开发过程。
参考文献：
[1] 赵大朋.基于Web2.0的数字音乐图书馆[J].计算机工程,2009,35(13).
[2] 邵一川.基于Ajax技术的智能客户端流引擎[J].计算机工程,2009,35(12).
[3] 陈兴渝,钟朝亮.基于Web的告警实时显示系统的设计与实现[J].北京邮电大学学报,2009,4(32).
[4] 欧阳荣彬.Ajax与新型管理信息系统[J].中山大学学报,2009,3(48).
[5] 唐俊,焦浴波,董军.Ajax程序开发经典实例教程[M].北京:电子工业出版社,2008.
[6] 刘鑫,陈伟.基于AJAX和Server Push的Web树组件设计与实现[J].计算机工程与设计,2009,30(3).
[7] 肖杰,陈翔.基于Ajax和Struts的Web应用的设计与实现[J].计算机工程与设计,2009,30(8).
[8] 谌湘倩,狄文辉.基于SSH框架与AJAX技术的Java Web应用开发[J].计算机工程与设计,2009,30(10).
