基于Ajax的资源管理系统的设计与实现

开篇：润墨网以专业的文秘视角，为您筛选了一篇基于Ajax的资源管理系统的设计与实现范文，如需获取更多写作素材，在线客服老师一对一协助。欢迎您的阅读与分享！

摘要:针对目前现有的资源管理系统存在的问题,提出了一种基于ajax技术的资源管理系统。Web页面采用局部动态刷新,提高了系统的使用效率。介绍了系统的功能模块和实现方案。

关键词:Ajax;资源管理;无刷新;Web2.0

中图分类号:TP311 文献标识码:A文章编号:1009-3044(2009)35-9977-02

Design and Implementation of Resources Management System Based on Ajax

HAN Meng1, WEI Xin2

(1.Beifang Ethnic University, Yinchuan 750021, China; 2.Ningxia Talent Exchange Center, Yinchuan 750001, China)

Abstract: Aiming at the present problem of resources management system, the paper puts forward an Ajax technique to design system. Web page using a local dynamic refresh, to improve the system efficiency. Introduces its structure, design and implementation.

Key words: Ajax; resources management; non-refurbishing; Web2.0

Ajax(Asynchronous JavaScript and XML)是一种设计交互式网页应用的网页开发技术, Ajax技术引进了异步调用,使页面可按照需要进行局部刷新,节省了网络带宽,提升了用户体验。实现浏览器与服务器的异步通讯,局部刷新浏览器窗口而满足用户的操作,减少页面重载次数和用户等待时间。

本文介绍的基于Ajax技术的资源系统为网络教学平台的使用者,主要是为教师和学生服务。本系统中教师可以针对教师教授的课程课程资源,学生可以下载学习课程资源。与传统资源系统相比,采用Ajax技术实现局部刷新技术,用户上传资源后可以在Web页面中无刷新显示资源的路径,主题等内容,减少等待时间。

1 系统框架设计

1.1 Ajax技术

Ajax作为JavaScript和XML等技术的结合体,它通过Ajax引擎来实现web页面与服务器的交互的,用户在页面上获得的数据是通过Ajax引擎提供的。Ajax引擎可以消除web的开始―停止―开始―停止这样的交互过程。它就像增加了一层机制到程序中,使它响应更灵敏,而它的确做到了这一点。不像加载一个页面一样,在会话的开始,浏览器加载了一个Ajax引擎―采用 JavaScript编写并且通常在一个隐藏frame或Div中。这个引擎负责绘制用户界面以及与服务器端通讯。Ajax技术的Web交互模式如图1所示。

1.2 系统实现

资源管理系统的功能包括教师上传与课程相关的课件与资料并可以对其进行管理,学生可以在线查看和下载,同时还要提供查询资源的功能。教学资源管理分为4个子模块:资源浏览、资源管理、资源下载和资源查询,功能模块图如图2所示。

1.2.1 资源查询模块

页面无刷新的模糊查询,通过页面的“关键字搜索”文本框的“onKeyUp()”事件执行javascript定义好的函数,提交到服务器后,执行like的sql语句,并将查询结果返回至客户端,而客户端页面并不刷新。资源查询的运行界面如图3所示。

1.2.2 资源上传模块

在应用程序的安装或下载过程中,进度条的使用已是非常普遍了。进度条可以用来标识项目的完成进度,可以用百分比或数字表示,可以水平放置也可以垂直放置。利用Ajax技术创建进度条,功能显得更加强大和快捷。

完成此功能,主要包含两个核心:

1)上传文件类型的检验,确保文件的类型为ppt、doc、rar或pdf格式。核心代码如下:

客户端检验:

var a=document.getElementById("file1").value;

var b=a.split("\\");

var c=b[b.length-1];

var d=c.split(".");

var ftype=d[1];

if(ftype!="ppt"&&ftype!="doc"&&ftype!="rar"&&ftype!="pdf")

{

alert("非法格式!只允许 ppt doc rar pdf 文件!!!");

return false;

}

服务器端检验:

String ftype=request.getParameter("ftype");

String filename=fname+"."+ftype;

if(ftype!="ppt"&&ftype!="doc"&&ftype!="rar"&&ftype!="pdf")

{

out.println("

" + ftype + "格式文件不被支持!");

}

2)提高程序运行的可见性,即为用户提供文件上传进度条的显示。

JavaScript函数createXMLHttpRequest()主要用来创建XMLHttpRequest对象,goUpFile()函数完成向服务器端发送异步请求,该函数在用户点击“开始上传”按钮时被调用,主要作用就是通知服务器端,并在客户端开始运行进度条。goCallback()函数主要用于处理服务器端响应,并每隔200ms调用pollServer()函数。pollServer()函数也是用于向服务器端发送异步请求,主要请求服务器端响应的百分比数字。pollCallback()函数主要用于处理服务器端响应,即依据服务器端的返回数字,指定进度条的显示状态。这里需要注意的是goCallback()函数只执行一次,而pollCallback()函数可以执行多次,其余三个函数(processResult(),checkDiv(),clearBar())都是实现进度条的辅助函数。进度条流程图如图4所示。

1.2.3 资源维护模块

传统的Web实现方式,页面初始化时准备好所有列表框中的信息,并通过逻辑控制建立列表框之间对应选项的联系。再依据用户的选择,通过逻辑判断将事先准备好的列表框信息装入对应的联动列表框中。这种方法的弊端是造成浏览器端下载的页面非常臃肿,许多在本次交互中根本用不到的信息也提前装在到页面中。

资源维护功能是系统管理员对教师上传的资源删除,这里实现了动态加载列表框的功能,是Ajax的常用技巧。借助Ajax技术,可以实现当用户选择第一个列表框中的对应选项后,将对应的请求以异步方式提交到服务器端,然后有选择地从服务器端获取下一个列表框中的列表信息,再返回浏览器端进行响应显示。系统的实现页面如图5所示。

2 结论

针对当前教学通知应用中存在的问题,充分利用Ajax技术的特点,将该技术应用到资源管理功能实现中。Ajax技术的应用,让用户减少等待时间,提高响应速度,给用户提供更方便、更及时的服务。

参考文献:

[1] 黄永烨,刘晖.Ajax应用开发典型实例[M].北京:电子工业出版社,2008.

[2] 梁文新,宋强,王占中,等.Ajax+JSP网站开发从入门到精通[M].北京:清华大学出版社,2008.

[3] 邵一川等.基于Ajax技术的智能客户端流引擎[J].计算机工程,2009,6(35).

[4] 陈兴渝,钟朝亮.基于Web的告警实时显示系统的设计与实现[J].北京邮电大学学报,2009,4(32).

[5] 欧阳荣彬.Ajax与新型管理信息系统[J].中山大学学报,2009,3(48).