WebJM项目指导手册

《WebJM》概要设计
目录
第一部分引言 (4)
一、编写目的 (4)
二、读者对象 (4)
三、术语定义 (4)
四、相关课程 (4)
第二部分项目概述 (5)
一、功能结构分析 (5)
售前咨询面板 (5)
好友面板 (5)
聊天面板 (6)
历史记录查询 (7)
游客信息管理 (8)
好友信息查询 (8)
聊天记录管理 (9)
网站配置管理 (9)
扩展应用 (9)
第三部分设计约束 (10)
一、需求约束 (10)
1.本系统应遵循的技术标准 (10)
2.软、硬件环境标准 (10)
3.接口/协议标准 (10)
4.用户界面标准 (10)
5.软件质量 (10)
6.技术需求 (11)
第四部分数据库设计 (12)
一、概述 (12)
1.命名规则 (12)
2.数据类型 (12)
二、数据表结构 (12)
1.消息记录表t_qq_message (12)
2.用户访问记录表t_qq_historyurl (13)
3.系统管理员表t_admin (13)
4.普通用户表t_user (13)
5.商家用户表t_merchants (13)
6.游客用户表t_visitors (13)
第五部分界面及用例设计 (14)
用例1：创建WebJM售前咨询面板 (14)
用例2：创建好友面板 (15)
用例3：获取好友信息 (17)
用例4：好友面板的高度根据好友数量自动调整 (18)
用例5：创建聊天面板 (20)
用例6：拖动聊天面板 (22)
用例7：判断聊天面板是否已经存在 (23)
用例8：发送聊天消息 (24)
用例9：接收消息 (26)
用例10：关闭聊天面板 (27)
用例11：刷新未读消息概况 (27)
用例12：有新消息时好友头像闪动 (29)
用例13：刷新用户的在线状态 (30)
用例14：查询聊天记录 (32)
用例15：查看好友的个人信息及当前访问的页面 (34)
用例16：给游客添加备注信息 (35)
用例17：动态创建展示配置数据的表格（扩展功能） (36)
用例18：修改配置数据（扩展功能） (37)
用例19：用户访问URL统计（扩展功能） (38)
用例20：客服人员工作量统计（扩展功能） (38)
用例21：如何集成WebJM (39)
第六部分项目进度要求 (40)
第一部分引言一、编写目的
第二部分项目概述
本项目为企业网站或网上商城提供一个在线交流平台，平台的主要目的是让普通用户能够和网站服务人员进行在线沟通。

围绕这一目的，系统需要实现售前询问，好友展示，聊天面板展示，消息的发送与接收，游客信息管理，历史记录查询，好友信息查询，配置数据管理等功能。

一、功能结构分析
WebJM是一套服务于企业网站或网上商城的在线交流平台，具备准实时的消息发送与接收功能，能够加强买卖双方的信息沟通。

系统应能满足大量在线用户同时进行消息传递，并尽可能节约系统内存资源及数据库资源。

系统包含以下模块：
售前咨询面板
（1）当用户浏览商城，或浏览某一商家达到一定的时间，表示该用户具有购买商品的计划。

达到网站规定的时间，网站自动在网页的右下角弹出询问窗口，询问该用户是否需要售前咨询。

界面展示效果参考下图。

（2）询问窗口弹出的时间，系统可以设置。

（3）用户可以在询问窗口中，点击“开始咨询”，与客服人员进行交流。

点击“稍后联系”，当前的咨询面板消失。

好友面板
（1）需要交流的好友，需要展示在网页上，网站专门为好友的展示建立好友面板。

网站在网页右侧区域打开好友面板，面板的位置随着页面滚动条的上下移动而上下移动，面板的高度随好友的个数自动调整。

好友面板的展示效果参考下图。

（2）在好友面板中展示当前用户的头像、名称等信息。

（3）普通用户的好友面板展示商城客服人员、商家客服人员。

用户当前所在的位置是商城首页，面板中展示商城客服人员；用户所在的位置是具体某一商家，面板中展示商城客服人员、商家客服人员。

（4）客服人员的好友面板展示最近咨询的普通用户、以及给自己留言的用户。

面板中展示用户的数量超过系统规定时，好友列表出现滚动条。

（5）普通用户点击客服人员，或客服人员点击普通用户，都可以打开聊天面板。

双方可以在面板中进行文字交流。

（6）好友在线时，头像呈亮色；好友离线时，头像呈灰色。

有未读消息时，好友头像闪动；用户读取消息后，头像停止闪动。

展示效果可以参考下图。

聊天面板
（1）用户与客服在聊天面板中进行文字沟通。

聊天面板展示对方的基本信息，包括头像、名称等；展示本次聊天的历史记录、待发送消息。

聊天面板的展示效果参考下图。

（2）聊天面板具有消息发送功能、面板关闭功能。

（3）用户可以打开历史记录查询面板、好友信息面板。

（4）一个页面可以展示一个或多个聊天面板，聊天面板可以拖动。

历史记录查询
已经发送的文字信息称为历史记录，网站应具备历史记录查询功能。

普通用户、客服都可以根据时间、联系人查询历史记录。

界面效果可以参考下图。

游客信息管理
（1）未登陆用户称为游客，系统为每一位游客分配唯一编号。

（2）系统记录游客的编号、IP地址、登录时间、备注信息。

客服人员可以根据需要设置游客的备注。

好友信息查询
客服可以查询普通用户及游客的编号、名称、当前访问的网页地址、备注信息。

界面的效果可以参考下图。

聊天记录管理
聊天记录要存储在数据库中，基于这些聊天记录，可以统计客服人员的工作量。

聊天记录包括消息的发送人、接收人、消失时间、接收人是否已读等。

网站配置管理
（1）网站页面提示用户是否需要咨询，配置这个消息的弹出时间。

（2）配置客服人员聊天面板的好友数量，超过这个数量好友面板出现滚动条。

（3）发送的聊天记录先保存在内存中，然后批量存储至数据。

网站配置批量存储至数据库的时间周期。

（4）网站获取用户最后访问的时间，该时间距离当前时间超过网站的配置数值，网站认为该用户离线。

（5）网站每隔一定的时间，获取用户的未读消息。

网站支持这个时间周期的配置。

（6）有好友消息未读时，好友的头像闪动。

网站可以配置好友头像闪动的速度。

扩展应用
（1）简易计算器，实现简单的计算功能。

（2）用户访问统计。

根据用户访问的URL，统计用户关注率比较高的商品。

（3）聊天记录统计。

根据网站保存的历史聊天记录，统计客服人员的工作量。

第三部分设计约束
一、需求约束
1.本系统应遵循的技术标准
数据命名的规则遵循《Java语言编码规范(Java Code Conventions)》中相关的规定；
2.软、硬件环境标准
本系统采用B/S架构，通过WEB访问（IE）；
系统使用统一的Oracle数据库；
系统应能部署在Microsoft Windows 2003 Server及以上环境下。

3.接口/协议标准
本系统B/S结构通过HTTP协议，在IE8浏览器上实现WEB方式访问。

4.用户界面标准
使用浏览器WEB界面，保证用户操作的简单性、易操作性。

同时减少系统管理员的终端维护工作量。

5.软件质量
正确性：消息的发送与接收能够被正确处理；
健壮性：系统应能够7*24小时无故障运行；
效率：系统可以支持100个终端同时发起业务，处理业务的时间不超过10秒钟；
易用性：界面应采用图形化操作方式，便于业务人员操作；
安全性：报文中的关键数据域以密文的方式传输；
可扩展性：应该充分考虑到将来消息内容的丰富性，避免需求变更时大规模修改程序。

要求客户端使用HTML、CSS、JavaScript、jQuery、Ajax技术要求服务端使用Tomcat服务器，Java、Servlet技术
要求数据库使用Oracle
使用Eclipse开发工具
要求使用JDK7
第四部分数据库设计一、概述
数据库使用Oracle 10g
商家用户；3、游2.用户访问记录表t_qq_historyurl
该表参照京东商城项目
第五部分界面及用例设计
用例1：创建WebJM售前咨询面板
所属章节：
JavaScript第二章：基础语法
JavaScript第五章：Document对象,事件处理
Ajax第一章：Ajax基本原理及开发过程
需求说明
当用户浏览某一商品达到指定的时间，网站弹出售前咨询面板。

用户可以选择“开始咨询”，进而打开聊天面板；选择“稍后联系”，则隐藏售前咨询面板。

训练要点
（1）JavaScript操作DOM元素
（2）Ajax基本开发过程
实现思路及关键代码
（1）动态创建DIV元素
（2）创建XMLHttpRequest对象
（3）编写Ajax请求完成事件响应方法，完成面板内容的加载以及面板的定位
（4）创建Ajax请求，发送请求
（5）完成服务端JSP，输出面板内容
参考解决方案
（1）创建XMLHttpRequest对象
function createXHR(){
var xhr = null;
if(window.ActiveXObject){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
alert("can't create xhr object!");
}
return xhr;
}
（2）客户端创建帮助咨询面板
//创建相关内容
helpPanel = document.createElement("div");
document.body.appendChild(helpPanel);
helpPanel.id = "_helpPanel";
var url = basePath + "/qq/jsp/HelpPanel.jsp";
if(getQueryString("merchantId") != null){
url += "?friendId=" + getQueryString("merchantId") + "&friendType=2";
}else{
url += "?friendId=admin&friendType=4";
}
var xhr = createXHR();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var ret = xhr.responseText;
helpPanel.innerHTML = ret;
helpPanel.className = "helpPanel";
helpPanel.style.right = "10px";
helpPanel.style.top = (document.documentElement.scrollTop + document.documentElement.clientHeight - 200) + "px";
}
}
};
xhr.open("get", url);
xhr.send(null);
（3）服务端JSP
参考文件：/qq/jsp/HelpPanel.jsp
用例2：创建好友面板
所属章节：
JavaScript第二章：基础语法
JavaScript第四章：Window对象,对话框,定时器
JavaScript第五章：Document对象,事件处理
Ajax第一章：Ajax基本原理及开发过程
需求说明
需要交流的好友，需要展示在网页上，网站专门为好友的展示建立好友面板。

网站在网页右侧区域打开好友面板，面板的位置随着页面滚动条的上下移动而上下移动，面板的高度随好友的个数自动调整。

训练要点
（1）JavaScript操作DOM元素
（2）JavaScript事件处理
（3）Ajax基本开发过程
（4）JavaScript定时器
实现思路及关键代码
（1）创建XMLHttpRequest对象
（2）编写Ajax请求完成事件响应方法，完成面板内容的加载、头像及关闭图标设定、关闭事件处理（3）创建Ajax请求，发送请求
（4）完成服务端JSP，输出面板内容
参考解决方案
（1）客户端创建并处理好友面板
//打开好友面板
function openFriendPanel(){
var url = basePath + "/qq/jsp/FriendPanel.jsp";
var xhr = createXHR();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var ret = xhr.responseText;
document.getElementById("_friendsPanel").innerHTML = ret;
document.getElementById("_myHeadImg").childNodes[0].src = basePath + "/qq/image/qq.png";
document.getElementById("_myCloseImg").childNodes[0].src = basePath + "/qq/image/close.png";
document.getElementById("_myCloseImg").onclick = function(){
document.getElementById("_friendsPanel").style.display = "none";
};
document.getElementById("_friendsPanel").style.display = "";
}
}
};
xhr.open("get", url);
xhr.send(null);
}
（2）服务端JSP
文件参考：/qq/jsp/FriendPanel.jsp
用例3：获取好友信息
所属章节：
JavaScript第二章：基础语法
JavaScript第三章：内置对象
Ajax第二章：JSON数据结构及使用方法
Ajax第三章：jQuery基本语法、选择器
Ajax第四章：jQuery函数
Ajax第五章：jQuery事件与动画
需求说明
普通用户的好友面板展示商城客服人员、商家客服人员。

如果用户当前所在的位置是商城首页，面板中展示商城客服人员；如果用户所在的位置是具体某一商家，面板中展示商城客服人员、该商家客服人员。

客服人员的好友面板展示最近联系的好友。

训练要点
（1）JavaScript的if、while使用
（2）JavaScript数组
（3）客户端JSON文本转换为JSON对象
（4）读取JSON数组、对象
（5）jQuery选择器
（6）jQuery事件处理、Ajax事件处理方法
（7）jQuery核心函数、文档对象操作函数
实现思路及关键代码
（1）编写servlet及java类，根据请求的URL参数输出好友数据
（2）客户端使用jQuery框架的get函数获取好友数据
（3）在好友面板中动态创建好友
（4）编写好友的单击事件处理函数
参考解决方案
（1）servlet及java类
文件参考：com.qq.servlet.QQServlet; erDao; erDaoImpl
（2）客户端获取好友数据，动态创建好友列表
//获取用户的好友
function getMyFriends(){
var pars = "type=friend";
if(getQueryString("merchantId") != null){
pars += "&merchantId=" + getQueryString("merchantId");
}
$.get(basePath + "/QQServlet", pars, function(data){
var arrFriends = eval(data);
for(var i=0; i<arrFriends.length; i++){
var jFriend = $("<li id='friend_panel_" + arrFriends[i].userid + "'></li>");
jFriend.appendTo($("#_myFriends"));
jFriend.append("<span flash='0'><img src='" + basePath +
arrFriends[i].userimg + "' width='20' height='20'></span>");
jFriend.append("<label>" + arrFriends[i].username + "</label>");
jFriend.append("<span style='display:none'>" + arrFriends[i].usertype + "</span>");
jFriend.click(function(){
$("#" + this.id + " span:eq(0)").attr("flash", "0");
//openChatPanel(this.id, this.childNodes[2].innerText);
});
}
});
}
用例4：好友面板的高度根据好友数量自动调整
所属章节：
JavaScript第二章：基础语法
Ajax第三章：jQuery基本语法、选择器
Ajax第四章：jQuery函数
需求说明
好友面板的高度随着好友的数量自动伸缩，当好友的数量超过系统配置的数量后，面板不再伸缩，而是出现垂直方向的滚动条。

训练要点
（1）JavaScript选择控制语句
（2）jQuery选择器
（3）jQuery样式操作函数
实现思路及关键代码
（1）创建Java类，增加静态属性保存好友数量设置
（2）创建JSP文件，将静态类的属性输出到JavaScript变量
（3）客户端使用JavaScript调整好友面板高度
参考解决方案
（1）Java代码中静态属性保存好友数量设置
/**
* 超过这个数量，好友界面出现滚动条
*/
public static int PANEL_FRIEND_COUNT = 10;
（2）JSP文件中，将静态类的属性输出到JavaScript变量
var panelFriendCount = <%=String.valueOf(QQConfig.PANEL_FRIEND_COUNT)%> （3）客户端使用JavaScript调整好友面板高度
//调整好友列表高度
function updateMyFriendsHeight(){
var count = $("#_myFriends li").length;
if(count >= panelFriendCount){
$("#_friendsPanel").css("height", (panelFriendCount * 25 + 50) + "px");
$("#_myFriends").css("height", (panelFriendCount * 25) + "px");
}else{
$("#_friendsPanel").css("height", (count * 25 + 50) + "px");
$("#_myFriends").css("height", (count * 25) + "px");
}
}
用例5：创建聊天面板
所属章节：
JavaScript第二章：基础语法
JavaScript第三章：内置对象
JavaScript第五章：Document对象,事件处理
Ajax第三章：jQuery基本语法、选择器
Ajax第四章：jQuery函数
Ajax第五章：jQuery事件与动画
需求说明
聊天面板展示对方的基本信息，包括头像、名称等；展示本次聊天的历史记录、待发送消息。

点击面板的关闭按钮、关闭图标将关闭聊天面板；点击发送按钮，将发送消息；双击好友头像，将打开好友信息；点击历史记录，打开历史记录查询面板。

聊天面板的展示效果参考下图。

训练要点
（1）JavaScript选择控制语句
（2）JavaScript字符串函数
（3）JavaScript操作DOM元素
（4）jQuery选择器
（5）jQuery核心函数、文档操作函数、样式操作函数、属性操作函数、动画函数
（6）jQuery框架的Ajax事件处理
（7）jQuery事件处理
实现思路及关键代码
（1）动态创建页面DIV
（2）使用jQuery框架的Ajax请求JSP，获取聊天面板内容
（3）设置聊天面板的位置、头像、关闭图标
（4）设置关闭按钮、关闭图标的事件
（5）设置发送按钮、历史记录按钮的事件
（6）设置好友头像的双击事件
参考解决方案
（1）JSP文件输出聊天面板内容
参考文件：/qq/jsp/chatPanel.jsp
（2）客户端请求面板内容，操作面板样式，设置相关事件
//创建相关内容
var jChatPanel = $("<div id='chat_panel_" + friendId + "'><div>");
jChatPanel.appendTo($("body"));
var url = basePath + "/qq/jsp/ChatPanel.jsp?" + "friendId=" + friendId.substring(13)
+ "&friendType=" + friendType;
jChatPanel.load(url, function(){
jChatPanel.addClass("chatPanel");
//设置窗口居中显示
jChatPanel.css("left", ($(document).width()/2 - jChatPanel.width()/2) + "px");
jChatPanel.css("top", ((document.documentElement.clientHeight-380)/2 + document.documentElement.scrollTop) + "px");
//设置好友头像
jChatPanel.find(".friendHeadImg img").attr("src", basePath +
"/qq/image/head1.png");
//设置关闭按钮图标
jChatPanel.find(".friendCloseImg img").attr("src", basePath +
"/qq/image/close.png");
//设置关闭按钮事件
jChatPanel.find(".friendCloseImg").click(function(){
var friendId = this.parentNode.parentNode.id;
var friendType = $("#" + friendId + " input").val();
//closeChatPanel(friendId, friendType);
});
jChatPanel.find(".chatOperateButton input:eq(1)").click(function(){
var friendId = this.parentNode.parentNode.id;
var friendType = $("#" + friendId + " input").val();
//closeChatPanel(friendId, friendType);
});
//设置发送按钮事件
jChatPanel.find(".chatOperateButton input:eq(0)").click(function(){
var friendId = this.parentNode.parentNode.id;
var friendType = $("#" + friendId + " input").val();
//sendMessage(friendId, friendType);
});
//设置历史记录按钮事件
jChatPanel.find(".chatOperateButton a").click(function(){
var friendId = this.parentNode.parentNode.id;
var friendType = $("#" + friendId + " input").val();
//showHistoryMessage(friendId, friendType);
});
//双击好友头像，打开好友个人信息
if(friendType == "1" || friendType == "3"){
jChatPanel.find(".friendHeadImg img").dblclick(function(){
//showFriendMsg(friendId, friendType);
});
}
//jChatPanel.find(".friendHead").drag();
jChatPanel.show(1000);
});
用例6：拖动聊天面板
所属章节：
JavaScript第二章：基础语法
JavaScript第五章：Document对象,事件处理
Ajax第四章：jQuery函数
Ajax第五章：jQuery事件与动画
需求说明
实现用鼠标拖动聊天面板的标题栏，可以移动聊天面板的位置，以此避免多个聊天面板的重合。

训练要点
（1）如何扩展jQuery对象的方法
（2）JavaScript鼠标事件处理
（3）jQuery样式处理函数
实现思路及关键代码
（1）鼠标的mousedown事件获取事件发生点与面板左上角的位移
（2）页面的mousemove事件移动面板
（3）鼠标的mouseup事件停止移动面板
参考解决方案
客户端处理方法参考下面的代码
(function (document) {
$.fn.drag = function () {
var M = false;
var Rx, Ry;
var t = $(this);
t.mousedown(function (event) {
Rx = event.pageX - (parseInt(t.parent().css("left")) || 0);
Ry = event.pageY - (parseInt(t.parent().css("top")) || 0);
t.css("position", "absolute").css('cursor', 'move');
M = true;
})
.mouseup(function (event) {
M = false;
});
$(document).mousemove(function (event) {
if (M) {
t.parent().css({top: event.pageY - Ry, left: event.pageX - Rx});
}
});
};
})(document);
用例7：判断聊天面板是否已经存在
所属章节：
JavaScript第二章：基础语法
JavaScript第五章：Document对象,事件处理
Ajax第三章：jQuery基本语法、选择器
Ajax第四章：jQuery函数
Ajax第五章：jQuery事件与动
需求说明
用户选择某一用户进行交流时，网站先判断该用户的聊天面板是否已经创建（有可能已经隐藏）。

如果已经创建，网站就直接打开该面板；如果页面中不存在，就重新创建聊天面板，并显示给用户。

训练要点
（1）JavaScript获取document属性
（2）jQuery选择器
（3）jQuery样式处理函数、动画函数
实现思路及关键代码
（1）使用jQuery对象的length属性判断面板是否存在
（2）如果存在，则调整面板位置，显现面板
（3）如果不存在，则参考用例“创建聊天面板”创建面板
参考解决方案
该功能仅在客户端处理，可以参考下面的代码。

//判断是否已经存在
if($("#chat_panel_" + friendId).length > 0){
$("#chat_panel_" + friendId).css("left", ($(document).width()/2 - $("#chat_panel_" + friendId).width()/2) + "px");
$("#chat_panel_" + friendId).css("top",
((document.documentElement.clientHeight-380)/2 +
document.documentElement.scrollTop) + "px");
$("#chat_panel_" + friendId).fadeIn(500);
return;
}
用例8：发送聊天消息
所属章节:
JavaScript第二章：基础语法
JavaScript第三章：内置对象
Ajax第三章：jQuery基本语法、选择器
Ajax第四章：jQuery函数
Ajax第五章：jQuery事件与动
需求说明
把用户或客服人员输入的消息发送到服务器，同时把该消息附加到聊天面板的历史记录中。

训练要点
（1）JavaScript选择控制语句
（2）JavaScript字符串操作函数
（3）jQuery选择器
（4）jQuery页面内容操作函数、文档操作函数
（5）jQuery框架的Ajax事件处理函数
实现思路及关键代码
（1）客户端获取当前用户、消息接收用户、消息内容
（2）使用jQuery框架的Ajax向服务端发送数据
（3）消息发送成功后，把面板的待发送内容追加到面板的历史消息框
（4）编写servlet及Java类，处理消息的接收
参考解决方案
（1）客户端获取消息的发送者、接受者、消息内容，以及消息发送、消息处理，参考下面的代码。

function sendMessage(friendId, friendType){
var strMessage = $("#" + friendId + " .chatSendMessage").val();
var strFriendId = friendId.substring(24);
var strFriendName = $("#" + friendId + " .friendOtherName").text();
var strMyUserId = $("#_my_id").val();
var strMyUserType = $("#_my_type").val();
var strMyUserName = $("#_my_name").val();
if(strMessage == null || strMessage.length < 1){
alert("不能发送空消息！");
return;
}
$.post(basePath + "/QQServlet",
{type:'send', friendId:strFriendId, friendName:strFriendName,
friendType:friendType,
myUserId:strMyUserId, myUsername:strMyUserName,
myUserType:strMyUserType, msg:strMessage},
function(data){
var eId = "#chat_panel_friend_panel_" + data.friendId;
var strMsg = $(eId + " .chatSendMessage").val();
$(eId + " .chatHistoryMessage").append("<b>[" + data.time + "][" + strMyUserName + "]</b><br>" + strMsg + "<br>");
$(eId + " .chatSendMessage").val("");
},
'json'
);
}
（2）服务器端接收消息
文件参考：com.qq.servlet.QQServlet; com.qq.service.MessageService
用例9：接收消息
所属章节：
JavaScript第二章：基础语法
JavaScript第三章：内置对象
Ajax第二章：JSON数据结构及使用方法
Ajax第三章：jQuery基本语法、选择器
Ajax第四章：jQuery函数
Ajax第五章：jQuery事件与动画
需求说明
从服务器端读取发送给本人的消息，并把消息显示在聊天窗口的历史记录中。

服务器端将消息记录标记为已读。

训练要点
（1）JavaScript循环语句for
（2）jQuery选择器
（3）jQuery页面内容操作函数、文档操作函数
（4）jQuery框架的Ajax事件处理
（5）JSON数组、对象的读取
实现思路及关键代码
（1）获取当前用户、消息发送人信息
（2）Ajax请求消息内容
（3）把请求的消息内容追加到历史消息框
参考解决方案
（1）服务器端servlet及Java类，读取Java内存中的消息
参考文件：com.qq.servlet.QQServlet; com.qq.service.MessageService
（2）客户端收集用户信息、消息发送人信息，以及处理服务器端返回的消息，参考下面的代码。

function readFriendMsg(friendId, friendType){
var strMyUserId = $("#_my_id").val();
var strMyUserType = $("#_my_type").val();
$.post(basePath + "/QQServlet",
{type: 'readmsg', myUserId: strMyUserId, myUserType: strMyUserType, friendId: friendId, friendType: friendType},
function(data){
var hisObj = $("#chat_panel_friend_panel_" + friendId +
" .chatHistoryMessage");
var arrMsg = eval(data);
for(var i=0; i<arrMsg.length; i++){
hisObj.append("<b>[" + arrMsg[i].msgTime + "][" +
arrMsg[i].sendUserName + "]</b><br>" + arrMsg[i].msg + "<br>");
}
}
);
}
用例10：关闭聊天面板
所属章节：
Ajax第三章：jQuery基本语法、选择器
Ajax第五章：jQuery事件与动画
需求说明
当交流完毕，需要关闭聊天面板。

用户可以点击聊天面板上的“关闭”按钮，或面板右上角的关闭图标。

训练要点
（1）jQuery选择器
（2）jQuery动画处理函数
实现思路及关键代码
根据好友编号获取好友面板，执行面板的动画隐藏
参考解决方案
该功能仅需客户端处理，可以参考下面的代码。

function closeChatPanel(friendId, friendType){
$("#" + friendId).fadeOut(500);
}
用例11：刷新未读消息概况
所属章节：
JavaScript第二章：基础语法
Ajax第二章：JSON数据结构及使用方法
Ajax第三章：jQuery基本语法、选择器
Ajax第四章：jQuery函数
Ajax第五章：jQuery事件与动画
需求说明
定时读取发送给本人的未读消息概况。

如果消息发送人在我的好友列表中，则为消息发送人增加消息提示效果；如果没有在本人的好友列表中，则在好友列表中增加一行，并增加消息提示效果。

消息提示效果在本文的其他案例进行说明。

训练要点
（1）JavaScript选择控制语句、循环语句
（2）jQuery选择器
（3）jQuery核心函数、文档操作函数、属性操作函数
（4）jQuery框架的Ajax事件处理
（5）jQuery事件处理
实现思路及关键代码
（1）获取当前用户的编号、类型
（2）请求当前用户的未读消息情况
（3）服务器端收集当前用户的未读消息，返回客户端
（3）如果正在和消息发送人聊天，直接读取该消息
（4）如果消息发送人不在当前用户的好友列表中，则动态创建
参考解决方案
（1）服务器端servlet及Java类，收集当前用户的未读消息。

参加文件：com.qq.servlet.QQServlet; com.qq.service.MessageService
（2）客户端获取当前用户的编号、类型，发送未读消息请求，处理服务器端返回的未读消息等，可以参考下面的代码。

function refreshFriendStatus(){
var strMyUserId = $("#_my_id").val();
var strMyUserType = $("#_my_type").val();
$.post(basePath + "/QQServlet",
{type: 'getstatus', myUserId: strMyUserId, myUserType: strMyUserType},
function(data){
var arr = eval(data);
for(var i=0; i<arr.length; i++){
var liObj = $("#friend_panel_" + arr[i].userid);
//如果聊天窗口已经打开了，读取服务器消息
var chatObj = $("#chat_panel_friend_panel_" + arr[i].userid);
if(chatObj.length > 0 && chatObj.is(":visible") == true){
readFriendMsg(arr[i].userid, arr[i].usertype);
continue;
}
//判断好友是否存在列表中
if(liObj.length > 0){
//liObj.find("[flash]").attr("flash", "1");
}else{
var jFriend = $("<li id='friend_panel_" + arr[i].userid + "'></li>");
jFriend.appendTo($("#_myFriends"));
jFriend.append("<span flash='1'><img src='" + basePath + arr[i].userimg + "' width='20' height='20'></span>");
jFriend.append("<label>" + arr[i].username + "</label>");
jFriend.append("<span style='display:none'>" + arr[i].usertype + "</span>");
//flashImg("friend_panel_" + arr[i].userid);
jFriend.click(function(){
$("#" + this.id + " span:eq(0)").attr("flash", "0");
//openChatPanel(this.id, this.childNodes[2].innerText);
});
}
}
}
);
}
用例12：有新消息时好友头像闪动
所属章节:
JavaScript第四章：Window对象,对话框,定时器
Ajax第三章：jQuery基本语法、选择器
Ajax第四章：jQuery函数
需求说明
在刷新未读消息概况时，如果收到某一好友的未读消息，则闪动该好友的头像。

训练要点
（1）定时器的使用
（2）jQuery选择器
（3）jQuery属性操作函数、样式操作函数
实现思路及关键代码
（1）给好友的对象增加属性，用于标记是否有该好友的未读消息
（2）如果该属性为1，周期性改变好友对象的marginLeft样式
参考解决方案
该功能仅需客户端处理，可以参考下面的代码。

function flashImg(eId){
var handler = window.setInterval(function(){
if($("#" + eId + " span:eq(0)").attr("flash") == "0"){
return;
}
$("#" + eId + " img").css("marginLeft", "2px");
window.setTimeout(function(){
$("#" + eId + " img").css("marginLeft", "");
}, flashFriendHead/2);
}, flashFriendHead);
}
用例13：刷新用户的在线状态
所属章节：
JavaScript第二章：基础语法
Ajax第二章：JSON数据结构及使用方法
Ajax第三章：jQuery基本语法、选择器
Ajax第四章：jQuery函数
Ajax第五章：jQuery事件与动画
需求说明
用户在读取本人的未读消息时，网站记录该用户的最后访问时间；网站定时获取好友的状态，当好友的最后访问时间距离当前时间小于网站的规定，则该好友在线，否则该好友离线。

在线好友的头像是亮色，离线好友的头像是灰色。

训练要点
（1）JavaScript循环语句
（2）JSON数组及对象的操作
（3）jQuery框架的Ajax事件处理
（4）jQuery选择器、属性操作函数
实现思路及关键代码
（1）在“刷新未读消息概况”时，记录好友的最后访问时间
（2）收集当前用户的所有好友，并以此作为参数发送Ajax请求
（3）根据服务器端接收的好友，当好友的最后访问时间距离当前时间小于网站的规定，则该好友在线，否则该好友离线
（4）服务器端把在线状态返回到客户端。

客户端根据好友的在线状态修改好友的头像
参考解决方案
（1）服务器端servlet及Java类，更新好友的最后访问时间，返回好友的在线状态。

参考文件：com.qq.servlet.QQServlet; com.qq.service.MessageService
（2）客户端收集当前用户的所有好友，以及修改好友的头像，可以参考下面的代码。

function refreshFriendOnlineStatus(){
var jsonObj = [];
$("#_myFriends li").each(function(){
var obj = {};
erid = this.id.substring(13);
ertype = $(this).find("span:eq(1)").text();
erstatus = "";
jsonObj.push(obj);
});
$.post(basePath + "/QQServlet",
{type: 'getonlinestatus', json: JSON.stringify(jsonObj)},
function(data){
for(var i=0; i<data.length; i++){
var liObj = $("#friend_panel_" + data[i].userid);
//判断好友是否存在列表中
if(liObj.length > 0){
if(data[i].userstatus){
liObj.find("img").attr("src", basePath +
"/qq/image/head1.png");
}else{
liObj.find("img").attr("src", basePath +
"/qq/image/head.png");
}
}
}
},'json'
);
}。