陳國耀，王清心＊

（昆明理工大學(xué)信息工程與自動化學(xué)院，云南 昆明 650500）

基于jQuery的高校網(wǎng)絡(luò)心理咨詢系統(tǒng)的設(shè)計與實現(xiàn)

陳國耀，王清心＊

（昆明理工大學(xué)信息工程與自動化學(xué)院，云南 昆明 650500）

網(wǎng)絡(luò)心理咨詢具有便于為當事人保密、方便快捷、便于存儲和查詢案例等傳統(tǒng)心理咨詢方式所不具備的優(yōu)勢，jQuery使用戶能更方便地處理HTML documents、events、實現(xiàn)動畫效果，并且方便地為網(wǎng)站提供Ajax交互.介紹了基于j Query的高校心理咨詢系統(tǒng)的設(shè)計與實現(xiàn)的整個過程，展示了采用jQuery框架開發(fā)系統(tǒng)的便利性和優(yōu)越性.

jQuery；ajax；Easy UI；網(wǎng)絡(luò)心理咨詢

0 引 言

在社會處于轉(zhuǎn)型期的現(xiàn)在，大學(xué)生面臨的各種心理問題也是社會心理問題在學(xué)校的體現(xiàn)，高校大學(xué)生心理健康問題日益嚴峻.目前絕大多數(shù)高校心理輔導(dǎo)的方式仍然是面對面咨詢，但是面對面咨詢可能因為來訪者的尷尬、羞怯、情景暴露等因素，容易出現(xiàn)防御心理而掩藏一些心理信息，而且不方便、收費高，受到一些客觀條件的制約.網(wǎng)絡(luò)心理咨詢具有便于為當事人保密，平等與輕松的咨訪關(guān)系，選擇的自由度大，信息量豐富，方便快捷，便于思考分析，便于存儲和查詢案例，具有傳統(tǒng)心理咨詢方式無法替代的優(yōu)勢等優(yōu)點，部分高校開始建立網(wǎng)絡(luò)心理咨詢系統(tǒng)，力圖通過對學(xué)生開展心理健康教育，及時做好學(xué)生的心理疏導(dǎo)工作，全面提高學(xué)生的心理素質(zhì)，促進學(xué)生全面健康發(fā)展.目前高校主要采用實時網(wǎng)絡(luò)咨詢、校園BBS咨詢、留言本咨詢、電子郵件咨詢四種咨詢方式開展網(wǎng)絡(luò)心理咨詢工作.其中實時網(wǎng)絡(luò)咨詢具有實時性，快捷性，安全性等其它方式不具有的優(yōu)勢，使其成為高校網(wǎng)絡(luò)心理咨詢的發(fā)展趨勢.

1 系統(tǒng)分析和設(shè)計

1.1 系統(tǒng)分析

網(wǎng)絡(luò)心理咨詢的實現(xiàn)模式主要有兩種：推模式和拉模式.推模式的優(yōu)點是當消息來臨時，觀察者很直接地收到信息，然后進行相關(guān)的處理，與被觀察者沒有一點聯(lián)系，兩者幾乎沒有耦合.推模式的缺點是當消息來臨時，所有的信息都強迫觀察者，不管有用與否［1］.其還有一個致命的缺點是，如果想在通知消息中添加一個參數(shù)，那么所有的觀察者都需要修改.為了彌補推模式的不足，拉模式產(chǎn)生了.拉模式是觀察者按照自己的意圖定制信息，符合定制要求的信息才會彈出到觀察者的視野，所以拉模式的出現(xiàn)是在信息海量化之后更新的一種方式，其優(yōu)勢在于信息搜索，知識選擇和積累.可廣泛應(yīng)用于各種商業(yè)智能系統(tǒng)，如知識管理系統(tǒng).本系統(tǒng)采用了拉模式方便地實現(xiàn)了只提取要獲得的信息，有效地實現(xiàn)了信息的屏蔽.

傳統(tǒng)拉模式不采用Ajax技術(shù)實現(xiàn)的網(wǎng)絡(luò)咨詢室，實時從數(shù)據(jù)庫提取信息，整個頁面都會定時刷新，用戶體驗較差.采用Ajax技術(shù)可以實現(xiàn)頁面的局部和無閃爍定時刷新，大大提高了用戶體驗［2］.j Query提供了用于 Ajax開發(fā)的豐富函數(shù)（方法）庫，使得Ajax應(yīng)用變得極其簡單［3］.

此系統(tǒng)要實現(xiàn)的功能：每個咨詢師同時可以和多位學(xué)生交流，每個學(xué)生同一時刻只能和一位咨詢師交流；咨詢師可以根據(jù)實際情況“接受”或者“拒絕”學(xué)生的咨詢請求；信息屏蔽；系統(tǒng)用戶可以看到24 t之內(nèi)的聊天記錄；可以發(fā)送常見的表情符號；獨立的聊天窗口.

1.2 模塊設(shè)計

據(jù)需求分析，此系統(tǒng)分為登陸注冊，查看系統(tǒng)使用說明，聊天，查看歷史記錄，退出系統(tǒng)五大主要功能模塊，按時間順序依次分模塊實現(xiàn).

1.3 數(shù)據(jù)庫設(shè)計

數(shù)據(jù)庫chat中有三張表，各張表的具體信息如下：

（1）users表：用戶信息表.

（2）sendConnect表：臨時表，主要用于實現(xiàn)學(xué)生和咨詢師之間的握手.

（3）record表：信息記錄表.

通過users表中的用戶id字段把這三張表關(guān)聯(lián)了起來，users表和sendConnect表中均有發(fā)送者id（參照用戶id），接受者id（參照用戶id）兩個字段.

2 關(guān)鍵技術(shù)介紹

2.1 Ajax與j Query

Ajax是一種創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)，通過在后臺與服務(wù)器交換少量數(shù)據(jù)的方式，允許網(wǎng)頁進行異步更新，即在不重載整個頁面的情況下，對網(wǎng)頁的一部分進行更新［4］.

jQuery提供了用于AJAX開發(fā)的豐富函數(shù)（方法）庫，通過j Query AJAX，使用HTTP Get和HTTP Post，可以從遠程服務(wù)器請求txt、html、xml或json，而且還可以直接把遠程數(shù)據(jù)載入網(wǎng)頁的被選 HTML元素中［5］.

2.2 j Quey.post（）方法

post（）方法通過HTTP POST請求從服務(wù)器載入數(shù)據(jù)，是對ajax（）方法的一個封裝，簡化了Ajax應(yīng)用［3］.傳遞中文參數(shù)時，字符編碼設(shè)置為“UTF-8”，后臺函數(shù)接收參數(shù)時進行相應(yīng)的設(shè)置：request.setCharacter Encoding（“UTF-8”）以解決中文亂碼問題.

2.3 j Query Easy UI介紹

jQuery Easy UI是一組基于j Query的UI插件集合，開發(fā)者不需要編寫復(fù)雜的javascript，也不需要對css樣式有深入的了解，就可以借助j Query Easy UI更輕松的打造出功能豐富并且美觀的UI界面［6］.

3 系統(tǒng)功能實現(xiàn)與關(guān)鍵點

3.1 首頁

首頁采用了j Query Easy UI的Accordion可折疊標簽進行設(shè)計，這樣即可以節(jié)省空間，又可以增加用戶的易用性，用戶在一個頁面內(nèi)就可以完成多項操作［7］；默認界面為用戶登陸界面.首頁如圖1所示.

圖1 首頁截圖Fig.1 Homepage Screenshot

用戶注冊驗證采用Easy UI的ValidateBox驗證框?qū)崿F(xiàn)，方便快捷.登陸和注冊功能均采用jQuery的post方法把前臺用戶輸入的數(shù)據(jù)（通過jQuery的attr（）方法返回的被選元素的屬性值［8］）傳到后臺代碼中.登陸事件核心代碼如下：

此模塊采用了jQuery的Aajx技術(shù)，用戶注冊或登陸過程出現(xiàn)錯誤，系統(tǒng)不會刷新整個頁面，注冊或登陸信息依然會保留在頁面上，避免了信息的重復(fù)錄入，用戶感覺不到頁面刷新，用戶體驗較好，這也是使用Ajax的優(yōu)勢所在［9］.

3.2 連線在線咨詢師

學(xué)生登錄成功后，跳轉(zhuǎn)到學(xué)生成功登陸頁面.此頁面前臺代碼直接采用jQuery的post方法調(diào)用后臺類操作數(shù)據(jù)庫，實時刷新（此刷新時間可以長一些，以減輕服務(wù)器端的負擔，并不會影響用戶的正常使用）和查找數(shù)據(jù)，查找出在線咨詢師，然后采用jQuery的html方法把查詢結(jié)果顯示在頁面上.此時學(xué)生可以選擇任意一個在線咨詢師進行連線.前臺刷新數(shù)據(jù)核心代碼如下：

3.3 咨詢請求彈出窗口

咨詢師成功登陸界面前臺代碼采用實時刷新的方式，從臨時表sendConnect表中提取學(xué)生的咨詢請求信息，若有咨詢請求，會有彈出提示框（采用j Query Easy UI的confirm消息框?qū)崿F(xiàn)［10］），如圖2所示.

圖2 咨詢請求彈出窗口Fig.2 Consulting Pop-up Window

3.4 聊天窗口

雙方握手成功后，各自界面會彈出一個聊天窗口，如圖3所示.彈出窗口的界面設(shè)計采用jQuery Easy UI的Layout布局，這樣就大大減少了css代碼的書寫量，提高了程序開發(fā)的速度.關(guān)鍵一點：把接受者的id（acceptedId）傳到聊天窗口，以保證信息的一對一傳遞，實現(xiàn)信息屏蔽.窗口右側(cè)的對方信息也是通過接受者的id從數(shù)據(jù)庫中提取出來的對應(yīng)用戶信息.

圖3 聊天窗口Fig.3 Chat Window

傳遞id代碼：var url＝＇chat.jsp？acceptedId＝＇＋teacherId，其中chat.jsp是聊天窗口要加載的頁面，此頁面采用實時刷新技術(shù)，利用jQuery的post方法調(diào)用后臺函數(shù)從數(shù)據(jù)庫中提取雙方的實時聊天信息，每次通過比較record數(shù)據(jù)表中的id字段值大小，控制只提取尚未提取的信息，以減輕服務(wù)器端的負擔，提高效率，然后采用jQuery的append方法把提取的信息顯示在上方的記錄窗口中.核心代碼如下：

實時提取數(shù)據(jù)的時間間隔不能太長，否則會讓用戶難以忍受，用戶體驗較差.接受者id被傳到后臺代碼中，后臺代碼只從record表中提取對應(yīng)雙方的信息，以實現(xiàn)信息的屏蔽和有效傳輸.

利用jQuery的scroll Top屬性查看以及控制滾動條的垂直位置，已達到用戶可以任意拖動垂直滾動條查看聊天信息的目的［11］；利用window.open（url，name，window Features）方法打開一個指向url路徑文檔的新窗口，其中name值不能置為null，否則前面打開的聊天窗口會被后面的覆蓋掉；重新點擊要聊天的用戶時，系統(tǒng)會做一個判斷，是重新打開聊天窗口，還是發(fā)出請求.

3.5 用戶退出

用戶退出系統(tǒng)（正常退出或以關(guān)閉主窗口方式退出）時，系統(tǒng)將從臨時表sendConnect表中刪除接受者id和發(fā)送者id為登陸id的記錄，并且置此用戶為不在線狀態(tài)，對話結(jié)束.

4 結(jié) 語

jQuery提供了用于Ajax開發(fā)的豐富函數(shù)（方法）庫，使得ajax應(yīng)用變得極其簡單；以上所有模塊中需要實時提取數(shù)據(jù)的頁面均使用了jQuery

的post（）方法（簡化的ajax（）方法），這樣用戶感覺不到頁面刷新，用戶體驗較好；同時jQuery還有許多成熟的插件（例如本系統(tǒng)使用的頁面布局插件jQuery Easy UI）可供選擇，插件的使用大大提高了軟件開發(fā)者的工作效率.

［1］張莉君.基于DWR的推技術(shù)實現(xiàn) Web聊天室［J］.科技風(fēng)，2009（1）：2-5.

［2］李紅娟，溫喆.基于JIEE與Ajax的Web應(yīng)用架構(gòu)設(shè)計［J］.制造企業(yè)與自動化，2011，33（9）：1-3.

［3］周楊.AJAX應(yīng)用的典型設(shè)計模式［J］.計算機系統(tǒng)應(yīng)用，2011.20（1）：2.

［4］付寧，黃森.AJAX技術(shù)分析［J］.河南農(nóng)業(yè)，2011（2）：2.

［5］季國飛.jQuery開發(fā)技術(shù)詳解［M］.北京：電子工業(yè)出版社，2010：40-47，53-54.

［6］尹婷，趙思佳.基于jQuery框架的AJAX網(wǎng)站設(shè)計模式的研究［J］.湖南環(huán)境生物職業(yè)技術(shù)學(xué)院學(xué)報，2010，16（3）：3.

［7］何成萬，張慧，陳艷蘭，等.基于 Web2.0的公交信息查詢系統(tǒng)的設(shè)計與實現(xiàn)［J］.武漢工程大學(xué)學(xué)報，2009，31（9）：50-52.

［8］王晶，溫向彬.利用jQuery操作 HTML元素［J］.農(nóng)業(yè)網(wǎng)絡(luò)信息，2008（4）：2.

［9］任雪冬，曲晶.Web應(yīng)用中AJAX與傳統(tǒng)網(wǎng)絡(luò)性能對比分析［J］.中國西部科技，2011，10（2）：2.

［10］郭吳明.基于Ajax的聊天室的設(shè)計與實現(xiàn)［J］.科技信息，2010（16）：2-4.

［11］王艷.基于Ajax技術(shù)的聊天室的研究與應(yīng)用［J］.計算機光盤軟件與應(yīng)用，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及數(shù)據(jù)庫技術(shù).

指導(dǎo)老師：王清心，男，教授，碩士研究生導(dǎo)師.研究方向：Web及數(shù)據(jù)庫技術(shù).＊通信聯(lián)系人