《武汉工程大学学报》 2011年10期
103-106
出版日期：2011-11-30
ISSN:1674-2869
CN:42-1779/TQ
基于jQuery的高校网络心理咨询系统的设计与实现
0引言在社会处于转型期的现在，大学生面临的各种心理问题也是社会心理问题在学校的体现，高校大学生心理健康问题日益严峻．目前绝大多数高校心理辅导的方式仍然是面对面咨询，但是面对面咨询可能因为来访者的尴尬、羞怯、情景暴露等因素，容易出现防御心理而掩藏一些心理信息，而且不方便、收费高，受到一些客观条件的制约．网络心理咨询具有便于为当事人保密，平等与轻松的咨访关系，选择的自由度大，信息量丰富，方便快捷，便于思考分析，便于存储和查询案例，具有传统心理咨询方式无法替代的优势等优点，部分高校开始建立网络心理咨询系统，力图通过对学生开展心理健康教育，及时做好学生的心理疏导工作，全面提高学生的心理素质，促进学生全面健康发展．目前高校主要采用实时网络咨询、校园BBS咨询、留言本咨询、电子邮件咨询四种咨询方式开展网络心理咨询工作.其中实时网络咨询具有实时性，快捷性，安全性等其它方式不具有的优势，使其成为高校网络心理咨询的发展趋势.1系统分析和设计1.1系统分析网络心理咨询的实现模式主要有两种：推模式和拉模式.推模式的优点是当消息来临时，观察者很直接地收到信息，然后进行相关的处理，与被观察者没有一点联系，两者几乎没有耦合.推模式的缺点是当消息来临时，所有的信息都强迫观察者，不管有用与否［1］.其还有一个致命的缺点是，如果想在通知消息中添加一个参数，那么所有的观察者都需要修改.为了弥补推模式的不足，拉模式产生了.拉模式是观察者按照自己的意图定制信息，符合定制要求的信息才会弹出到观察者的视野，所以拉模式的出现是在信息海量化之后更新的一种方式，其优势在于信息搜索，知识选择和积累.可广泛应用于各种商业智能系统，如知识管理系统.本系统采用了拉模式方便地实现了只提取要获得的信息，有效地实现了信息的屏蔽.传统拉模式不采用Ajax技术实现的网络咨询室，实时从数据库提取信息，整个页面都会定时刷新，用户体验较差.采用Ajax技术可以实现页面的局部和无闪烁定时刷新，大大提高了用户体验［2］.jQuery提供了用于Ajax开发的丰富函数（方法）库，使得Ajax应用变得极其简单［3］.此系统要实现的功能：每个咨询师同时可以和多位学生交流，每个学生同一时刻只能和一位咨询师交流；咨询师可以根据实际情况“接受”或者“拒绝”学生的咨询请求；信息屏蔽；系统用户可以看到24 t之内的聊天记录；可以发送常见的表情符号；独立的聊天窗口.1.2模块设计据需求分析，此系统分为登陆注册，查看系统使用说明，聊天，查看历史记录，退出系统五大主要功能模块，按时间顺序依次分模块实现．1．3数据库设计数据库chat中有三张表，各张表的具体信息如下：（1）users表：用户信息表．（2）sendConnect表：临时表，主要用于实现学生和咨询师之间的握手．（3）record表：信息记录表．通过users表中的用户id字段把这三张表关联了起来，users表和sendConnect表中均有发送者id(参照用户id)，接受者id(参照用户id)两个字段．2关键技术介绍2.1Ajax与jQueryAjax是一种创建快速动态网页的技术，通过在后台与服务器交换少量数据的方式，允许网页进行异步更新，即在不重载整个页面的情况下，对网页的一部分进行更新［4］．jQuery提供了用于AJAX开发的丰富函数（方法）库，通过jQuery AJAX，使用HTTP Get和HTTP Post，可以从远程服务器请求txt、html、xml或json，而且还可以直接把远程数据载入网页的被选HTML元素中［5］．2.2jQuey.post()方法post()方法通过HTTP POST请求从服务器载入数据，是对ajax()方法的一个封装，简化了Ajax应用［3］．传递中文参数时，字符编码设置为“UTF8”，后台函数接收参数时进行相应的设置：request.setCharacterEncoding(“UTF8”)以解决中文乱码问题．2.3jQuery EasyUI介绍jQuery EasyUI是一组基于jQuery的UI插件集合，开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，就可以借助jQuery EasyUI更轻松的打造出功能丰富并且美观的UI界面［6］．3系统功能实现与关键点3.1首页首页采用了jQuery EasyUI的Accordion可折叠标签进行设计，这样即可以节省空间，又可以增加用户的易用性，用户在一个页面内就可以完成多项操作［7］；默认界面为用户登陆界面．首页如图1所示．图1首页截图
Fig.1Homepage Screenshot用户注册验证采用EasyUI的ValidateBox验证框实现,方便快捷．登陆和注册功能均采用jQuery的post方法把前台用户输入的数据(通过jQuery的attr()方法返回的被选元素的属性值［8］)传到后台代码中.登陆事件核心代码如下：var loginName=$(’#loginAccount’).attr(’value’);...$.post(’servlet/Login’,{’loginName’:loginName,’loginPwd’:loginPwd},function(result){...window.location.href=“afterStudentLogin.jsp”;...第10期陈国耀，等：基于jQuery的高校网络心理咨询系统的设计与实现
武汉工程大学学报第33卷
此模块采用了jQuery的Aajx技术，用户注册或登陆过程出现错误，系统不会刷新整个页面，注册或登陆信息依然会保留在页面上，避免了信息的重复录入，用户感觉不到页面刷新，用户体验较好，这也是使用Ajax的优势所在［9］．3.2连线在线咨询师学生登录成功后，跳转到学生成功登陆页面．此页面前台代码直接采用jQuery的post方法调用后台类操作数据库，实时刷新(此刷新时间可以长一些，以减轻服务器端的负担，并不会影响用户的正常使用)和查找数据，查找出在线咨询师，然后采用jQuery的html方法把查询结果显示在页面上．此时学生可以选择任意一个在线咨询师进行连线．前台刷新数据核心代码如下：var time=new Date();$.post(’servlet/OnlineTeacher’,{’time’:time},function(result){$(’#divOnlineTeacher’).html($(result));},“UTF-8”);3.3咨询请求弹出窗口咨询师成功登陆界面前台代码采用实时刷新的方式，从临时表sendConnect表中提取学生的咨询请求信息，若有咨询请求，会有弹出提示框(采用jQuery EasyUI的confirm消息框实现［10］)，如图2所示.图2咨询请求弹出窗口
Fig.2Consulting Popup Window3.4聊天窗口双方握手成功后，各自界面会弹出一个聊天窗口，如图3所示．弹出窗口的界面设计采用jQuery EasyUI的Layout布局，这样就大大减少了css代码的书写量，提高了程序开发的速度．关键一点：把接受者的id(acceptedId)传到聊天窗口，以保证信息的一对一传递,实现信息屏蔽．窗口右侧的对方信息也是通过接受者的id从数据库中提取出来的对应用户信息．图3聊天窗口
Fig.3Chat Window传递id代码：var url=’chat.jsp?acceptedId=’+teacherId，其中chat.jsp是聊天窗口要加载的页面，此页面采用实时刷新技术，利用jQuery的post方法调用后台函数从数据库中提取双方的实时聊天信息，每次通过比较record数据表中的id字段值大小，控制只提取尚未提取的信息，以减轻服务器端的负担，提高效率，然后采用jQuery的append方法把提取的信息显示在上方的记录窗口中．核心代码如下：var time=newDate();var cid=<%=request.getParameter(“acceptedId”)%>;$.post(’servlet/RefreshData’,{’time’:time,’acceptedId’:cid},function(result){$(’#record’).append(“<p>”+result+“</p>”);var ecordDiv=document.getElementById(’record’);...recordDiv.scrollTop=recordDiv.scrollHeight-recordDiv.offsetHeight;...nowMaxHeight=recordDiv.scrollTop;}}}},“UTF-8”);实时提取数据的时间间隔不能太长，否则会让用户难以忍受，用户体验较差．接受者id被传到后台代码中，后台代码只从record表中提取对应双方的信息，以实现信息的屏蔽和有效传输．利用jQuery的scrollTop属性查看以及控制滚动条的垂直位置，已达到用户可以任意拖动垂直滚动条查看聊天信息的目的［11］；利用window.open(url,name,windowFeatures)方法打开一个指向url路径文档的新窗口，其中name值不能置为null,否则前面打开的聊天窗口会被后面的覆盖掉；重新点击要聊天的用户时，系统会做一个判断，是重新打开聊天窗口，还是发出请求．3.5用户退出用户退出系统(正常退出或以关闭主窗口方式退出)时，系统将从临时表sendConnect表中删除接受者id和发送者id为登陆id的记录,并且置此用户为不在线状态，对话结束．4结语jQuery提供了用于Ajax开发的丰富函数（方法）库，使得ajax应用变得极其简单；以上所有模块中需要实时提取数据的页面均使用了jQuery的post()方法(简化的ajax()方法)，这样用户感觉不到页面刷新，用户体验较好；同时jQuery还有许多成熟的插件(例如本系统使用的页面布局插件jQuery EasyUI)可供选择，插件的使用大大提高了软件开发者的工作效率．参考文献：