基于jQuery的高校网络心理咨询系统的设计与实现

陈国耀，王清心＊

（昆明理工大学信息工程与自动化学院，云南 昆明 650500）

基于jQuery的高校网络心理咨询系统的设计与实现

陈国耀，王清心＊

（昆明理工大学信息工程与自动化学院，云南 昆明 650500）

网络心理咨询具有便于为当事人保密、方便快捷、便于存储和查询案例等传统心理咨询方式所不具备的优势，jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供Ajax交互.介绍了基于j Query的高校心理咨询系统的设计与实现的整个过程，展示了采用jQuery框架开发系统的便利性和优越性.

jQuery；ajax；Easy UI；网络心理咨询

0 引 言

在社会处于转型期的现在，大学生面临的各种心理问题也是社会心理问题在学校的体现，高校大学生心理健康问题日益严峻.目前绝大多数高校心理辅导的方式仍然是面对面咨询，但是面对面咨询可能因为来访者的尴尬、羞怯、情景暴露等因素，容易出现防御心理而掩藏一些心理信息，而且不方便、收费高，受到一些客观条件的制约.网络心理咨询具有便于为当事人保密，平等与轻松的咨访关系，选择的自由度大，信息量丰富，方便快捷，便于思考分析，便于存储和查询案例，具有传统心理咨询方式无法替代的优势等优点，部分高校开始建立网络心理咨询系统，力图通过对学生开展心理健康教育，及时做好学生的心理疏导工作，全面提高学生的心理素质，促进学生全面健康发展.目前高校主要采用实时网络咨询、校园BBS咨询、留言本咨询、电子邮件咨询四种咨询方式开展网络心理咨询工作.其中实时网络咨询具有实时性，快捷性，安全性等其它方式不具有的优势，使其成为高校网络心理咨询的发展趋势.

1 系统分析和设计

1.1 系统分析

网络心理咨询的实现模式主要有两种：推模式和拉模式.推模式的优点是当消息来临时，观察者很直接地收到信息，然后进行相关的处理，与被观察者没有一点联系，两者几乎没有耦合.推模式的缺点是当消息来临时，所有的信息都强迫观察者，不管有用与否［1］.其还有一个致命的缺点是，如果想在通知消息中添加一个参数，那么所有的观察者都需要修改.为了弥补推模式的不足，拉模式产生了.拉模式是观察者按照自己的意图定制信息，符合定制要求的信息才会弹出到观察者的视野，所以拉模式的出现是在信息海量化之后更新的一种方式，其优势在于信息搜索，知识选择和积累.可广泛应用于各种商业智能系统，如知识管理系统.本系统采用了拉模式方便地实现了只提取要获得的信息，有效地实现了信息的屏蔽.

传统拉模式不采用Ajax技术实现的网络咨询室，实时从数据库提取信息，整个页面都会定时刷新，用户体验较差.采用Ajax技术可以实现页面的局部和无闪烁定时刷新，大大提高了用户体验［2］.j Query提供了用于 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.1 Ajax与j Query

Ajax是一种创建快速动态网页的技术，通过在后台与服务器交换少量数据的方式，允许网页进行异步更新，即在不重载整个页面的情况下，对网页的一部分进行更新［4］.

jQuery提供了用于AJAX开发的丰富函数（方法）库，通过j Query AJAX，使用HTTP Get和HTTP Post，可以从远程服务器请求txt、html、xml或json，而且还可以直接把远程数据载入网页的被选 HTML元素中［5］.

2.2 j Quey.post（）方法

post（）方法通过HTTP POST请求从服务器载入数据，是对ajax（）方法的一个封装，简化了Ajax应用［3］.传递中文参数时，字符编码设置为“UTF-8”，后台函数接收参数时进行相应的设置：request.setCharacter Encoding（“UTF-8”）以解决中文乱码问题.

2.3 j Query Easy UI介绍

jQuery Easy UI是一组基于j Query的UI插件集合，开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，就可以借助j Query Easy UI更轻松的打造出功能丰富并且美观的UI界面［6］.

3 系统功能实现与关键点

3.1 首页

首页采用了j Query Easy UI的Accordion可折叠标签进行设计，这样即可以节省空间，又可以增加用户的易用性，用户在一个页面内就可以完成多项操作［7］；默认界面为用户登陆界面.首页如图1所示.

图1 首页截图Fig.1 Homepage Screenshot

用户注册验证采用Easy UI的ValidateBox验证框实现，方便快捷.登陆和注册功能均采用jQuery的post方法把前台用户输入的数据（通过jQuery的attr（）方法返回的被选元素的属性值［8］）传到后台代码中.登陆事件核心代码如下：

此模块采用了jQuery的Aajx技术，用户注册或登陆过程出现错误，系统不会刷新整个页面，注册或登陆信息依然会保留在页面上，避免了信息的重复录入，用户感觉不到页面刷新，用户体验较好，这也是使用Ajax的优势所在［9］.

3.2 连线在线咨询师

学生登录成功后，跳转到学生成功登陆页面.此页面前台代码直接采用jQuery的post方法调用后台类操作数据库，实时刷新（此刷新时间可以长一些，以减轻服务器端的负担，并不会影响用户的正常使用）和查找数据，查找出在线咨询师，然后采用jQuery的html方法把查询结果显示在页面上.此时学生可以选择任意一个在线咨询师进行连线.前台刷新数据核心代码如下：

3.3 咨询请求弹出窗口

咨询师成功登陆界面前台代码采用实时刷新的方式，从临时表sendConnect表中提取学生的咨询请求信息，若有咨询请求，会有弹出提示框（采用j Query Easy UI的confirm消息框实现［10］），如图2所示.

图2 咨询请求弹出窗口Fig.2 Consulting Pop-up Window

3.4 聊天窗口

双方握手成功后，各自界面会弹出一个聊天窗口，如图3所示.弹出窗口的界面设计采用jQuery Easy UI的Layout布局，这样就大大减少了css代码的书写量，提高了程序开发的速度.关键一点：把接受者的id（acceptedId）传到聊天窗口，以保证信息的一对一传递，实现信息屏蔽.窗口右侧的对方信息也是通过接受者的id从数据库中提取出来的对应用户信息.

图3 聊天窗口Fig.3 Chat Window

传递id代码：var url＝＇chat.jsp？acceptedId＝＇＋teacherId，其中chat.jsp是聊天窗口要加载的页面，此页面采用实时刷新技术，利用jQuery的post方法调用后台函数从数据库中提取双方的实时聊天信息，每次通过比较record数据表中的id字段值大小，控制只提取尚未提取的信息，以减轻服务器端的负担，提高效率，然后采用jQuery的append方法把提取的信息显示在上方的记录窗口中.核心代码如下：

实时提取数据的时间间隔不能太长，否则会让用户难以忍受，用户体验较差.接受者id被传到后台代码中，后台代码只从record表中提取对应双方的信息，以实现信息的屏蔽和有效传输.

利用jQuery的scroll Top属性查看以及控制滚动条的垂直位置，已达到用户可以任意拖动垂直滚动条查看聊天信息的目的［11］；利用window.open（url，name，window Features）方法打开一个指向url路径文档的新窗口，其中name值不能置为null，否则前面打开的聊天窗口会被后面的覆盖掉；重新点击要聊天的用户时，系统会做一个判断，是重新打开聊天窗口，还是发出请求.

3.5 用户退出

用户退出系统（正常退出或以关闭主窗口方式退出）时，系统将从临时表sendConnect表中删除接受者id和发送者id为登陆id的记录，并且置此用户为不在线状态，对话结束.

4 结 语

jQuery提供了用于Ajax开发的丰富函数（方法）库，使得ajax应用变得极其简单；以上所有模块中需要实时提取数据的页面均使用了jQuery

的post（）方法（简化的ajax（）方法），这样用户感觉不到页面刷新，用户体验较好；同时jQuery还有许多成熟的插件（例如本系统使用的页面布局插件jQuery Easy UI）可供选择，插件的使用大大提高了软件开发者的工作效率.

［1］张莉君.基于DWR的推技术实现 Web聊天室［J］.科技风，2009（1）：2-5.

［2］李红娟，温喆.基于JIEE与Ajax的Web应用架构设计［J］.制造企业与自动化，2011，33（9）：1-3.

［3］周杨.AJAX应用的典型设计模式［J］.计算机系统应用，2011.20（1）：2.

［4］付宁，黄森.AJAX技术分析［J］.河南农业，2011（2）：2.

［5］季国飞.jQuery开发技术详解［M］.北京：电子工业出版社，2010：40-47，53-54.

［6］尹婷，赵思佳.基于jQuery框架的AJAX网站设计模式的研究［J］.湖南环境生物职业技术学院学报，2010，16（3）：3.

［7］何成万，张慧，陈艳兰，等.基于 Web2.0的公交信息查询系统的设计与实现［J］.武汉工程大学学报，2009，31（9）：50-52.

［8］王晶，温向彬.利用jQuery操作 HTML元素［J］.农业网络信息，2008（4）：2.

［9］任雪冬，曲晶.Web应用中AJAX与传统网络性能对比分析［J］.中国西部科技，2011，10（2）：2.

［10］郭吴明.基于Ajax的聊天室的设计与实现［J］.科技信息，2010（16）：2-4.

［11］王艳.基于Ajax技术的聊天室的研究与应用［J］.计算机光盘软件与应用，2010（4）：1-3.

Design and implementation of college counseling network system based on jQuery

CHEN Guo-yao，WANG Qing-xin
（Faculty of Information Engineering and Automation，Kunming University of Science and Technology，Kunming 650500，China）

Some obvious advantages that are only available through online counseling are as follow：It is usually convenient；Information is easier to be found，used and stored；Privacy and anonymity are assured.It is imperative to popularize on-line psychological counseling in the colleges.HTML document traversing，event handling，animating，and Ajax interactions for rapid web development are simplied by using Jquery.College Counseling Network System based on jQuery relevant analysis and designs，realize course and method are showed in this text，and the benefits in software development is also demonstrated.

j Query；ajax；Easy UI；on-line psychological counseling

陈小平

TP31

A

10.3969／j.issn.1674-2869.2011.10.024

16742869（2011）10010304

20110829

陈国耀（1985），男，河南商丘人，硕士研究生.研究方向：Web及数据库技术.

指导老师：王清心，男，教授，硕士研究生导师.研究方向：Web及数据库技术.＊通信联系人