存档资料 成绩：
课 程 设 计 报 告 书
所属课程名称 JSP项目实训
题 目 Ajax聊天室
分 院
专业班级
学 号
学生姓名
指导教师
序号 项 目 等 级
优秀 良好 中等 及格 不及格
1 课程设计态度评价
2 出勤情况评价
3 任务难度评价
4 工作量饱满评价
5 任务难度评价
6 设计中创新性评价
7 论文书写规范化评价
8 综合应用能力评价
综合评定等级
课程设计（论文）评阅意见
评阅人 职称
20 年 月 日
目录
一、课程设计内容及要求 3
1.1开发背景 3
1.2课设内容 3
二 、需求分析 4
2.1 功能需求 4
2.2 技术可行性 5
2.3 操作可行性 5
2.4 经济可行性 5
三、设计思路 6
四、设计过程 6
4.1用户JavaBean的编写 6
4.2登录页面的设计 6
4.3聊天室主页面设计 9
4.4在线人员列表的设计 10
4.5用户发言的设计 12
4.6显示聊天内容的设计 14
4.7退出聊天室的设计 16
五、程序设计心得 18
六、参考资料 19
一、课程设计内容及要求
1.1开发背景
随着Internet的技术的高速发展，网络已经成为人们生活不可或缺的一部分。我们通过聊天室，在线聊天已经成为网上网络上能与人之间沟通交流联系的一种方式。据这种发展的趋势，或者说成为现实，越来越多的网站开始体验这种在线聊天的功能。在这个同时，聊天室也以其方便、快捷、低成本等优势，受到许多企业的青睐。很多企业的网站中也加入了聊天室，以达到增进企业与消费者之间，消费者和消费者之间的这种交流与联系的目的。本次聊天课程设计目的就是编写一个聊天室，在聊天室不但可以随时显示在线人员列表及聊天内容，而且增加了聊天表情和文字颜色选择的功能。
1.2课设内容
本课程设计通过一个聊天室，向读者介绍了JSP的内置对象（包括Session对象、Application对象、request对象和response对象）、Ajax技术、集合类中的Vector类以及JavaBean技术的实际应用。通过本章的学习，可以加深对这些技术的理解难度。另外，在开发无刷新的聊天室，有以下主要内容：
（1） 应用于Ajax技术实现实时刷新在线人员列表；
（2） 应用Ajax技术实现实时刷新显示的聊天内容；
（3） 在用户退出聊天室时，需要及时删除在线人员列表中的该用户；
（4） 当用户单击浏览器的“关闭”按钮关闭聊天页面时，也需要将该用户从在线人员列表中删除。
无刷新的聊天室的主页面如下图所示：
二 、需求分析
随着计算机技术的飞速发展，计算机在企业管理中应用的普及，利用计算机实现企业或用户聊天势在必行。网上聊天是现代网民上网中不可缺少的一部分，是适应现代化发展要求，推动我们更加普遍利用网络聊天。
2.1 功能需求
随着经济的迅速发展，网络的使用越来越普遍，人们对互联网各种需求越来越多，其中聊天就是一种，一种简洁、方便、快捷和低成本的聊天室越来越得到企业的欢迎。 很多企业的网站中也加入了聊天室，以达到增进企业与消费者之间，消费者和消费者之间的这种交流与联系的目的。
2.2 技术可行性
JSP技术特点跨平台、分离静态内容和动态内容、可重复使用的组件、沿用了Java Servlet的所有功能、具有预编译性。
·将内容的生成和显示进行分离
使用JSP技术,Web页面开发人员可以使用HTML或者XML标识来设计和格式化最终页面.使用JSP标识或者小脚本来生成页面上的动态内容.生成的内容的逻辑被封装在标识和JavaBeans组件中,那么其他人,如Web管理人员和页面设计者,能够编辑和使用JSP页面而不影响内容的生成。
·一次编写，到处运行
作为Java平台的一部分，JSP拥有Java编程语言“一次编写，到处运行”的特点，随着越来越多的供应商将JSP支持添加到他们的产品中，您可以使用自己所选择的服务器和工具，但并不影响当前的应用。
·JSP的平台适应性更广
这是JSP比ASP的优越之处，几乎所有的平台都支持Java，它们可以在任何平台下通行无阻。虽然NT的OS占据了很大的市场的份额，但在服务器方面UNIX的优势仍然很大。从一个平台移植到另一个平台，JSP和JavaBeans甚至不用重新编译，因为Java字节码都是标注的字节码与平台无关。
2.3 操作可行性
对于用户来说，本系统只要求使用者掌握少量的上网经验，经过仔细设计和测试之后的系统具有操作简单，方便灵活等优点，足可以满足各种用户的不同需求，用户在短时间内掌握并熟练使用。只要动一动鼠标键盘就可以达到想要的效果。
2.4 经济可行性
系统的经济可行性指的是对组织的经济状况和投资能力进行分析，对系统建设、运行和维护费用进行估算，对系统建成后可能取得的社会及经济效益进行估计。本模块简单易开发，且开发需要资金少，系统开发运行后，可以实现企业职工信息管理的计算机化，节省了人力、物力，将人从繁重的工作业务中解脱出来，减少了信息管理中无意的错误，节省了大量的时间，管理效率也大幅度提高，所带来的效益远远大于系统软件的开发成本。所以，在经济上是可行的。
三、设计思路
实现无刷新的聊天室，主要应用的技术是Ajax技术的JSP的application对象、session对象、request对象和集合类的Vector类。无刷新聊天室的具体要求设计思路如下。
（1） 实现用户登录。实现用户登录时，首先将用户信息保存在Vector类中，在将该类保存在appliance对象中，最后将用户信息保存在session对象中。
（2） 实现在线人员的列表。实现在线人员列表时，首先将保存的application对象中的人员信息保存在Vector类的对象中，然后应用for循环将这些信息显示在页面中。
（3） 保存并显示聊天内容。在实现聊天内容时，首先应用request对象获取发言信息，再将该信息添加到保存聊天内容的application对象中，并显示application对象的聊天内容。
最后，还需要应用Ajax技术实现实时显示在线人员列表及聊天内容。
四、设计过程
4.1用户JavaBean的编写
编写用户JavaBean，名称为UserForm.java保存在com.wgh包中。用户JavaBean就是对用户实体的抽象，它包含了用户实体的属性。
4.2登录页面的设计
运行聊天室首先进入的是登录页面，只有在登录页面输入用户名，才可以进入到聊天室主页面进行聊天。聊天室登录页面的运行结果如下图
登录页面主要用于收集用户输入的用户名并通过JavaScript验证用户是否输入用户名。登录页面index.jsp的关键代码如下。
<%@ page contentType="text/html;charset=gb2312" language="java" %>
<html>
<title>
聊天室
</title>
<link href="CSS/style.css" rel="stylesheet">
<script language="javascript">
function check(){
if(form1.username.value==""){
alert("请输入用户名！");form1.username.focus();return false;
}
}
</script>
<body>
<br>
<form name="form1" method="post" action="login.jsp" onSubmit="return check()">
<table width="363" height="224" border="0" align="center" cellpadding="0" cellspacing="0" background="images/login.png">
<tr>
<td height="121" colspan="3" class="word_dark"> </td>
</tr>
<tr>
<td width="53" align="center" valign="top" class="word_dark"> </td>
<td width="216" align="center" valign="top" class="word_dark">
用户名：<input type="text" name="username"></td>
<td width="94" valign="top" class="word_dark"><input type="image" name="imageField" src="images/go.jpg"></td>
</tr>
</table>
</form>
</body>
</html>
接下来还需要编写登录处理页面login.jsp.在该页面中，首先判断输入的用户名是否已经登录，如果登录讲给予提供信息，并返回到登录页面，否则将该用户添加到在线人员列表中，并进入聊天室主页面。Login.jsp页面的完整代码如下。
<%@ page contentType="text/html;charset=gb2312" language="java" %>
<%@ page import="java.util.Vector"%>
<%@ page import="com.wgh.UserForm"%>
<% request.setCharacterEncoding("gb2312");
String username=request.getParameter("username");
boolean flag=true;
Vector temp=(Vector)application.getAttribute("myuser");
if(application.getAttribute("myuser")==null){
temp=new Vector();}
for(int i=0;i<temp.size();i++){
UserForm tempuser=(UserForm)temp.elementAt(i);
if(tempuser.username.equals(username)){
out.println("<script language='javascript'>alert('该用户已经登录');window.location.href='index.jsp';</script>");
flag=false;}}
UserForm mylist=new UserForm();
mylist.username=username;
//保存当前登录的用户名
session.setAttribute("username",username);
application.setAttribute("ul",username);
Vector myuser=(Vector)application.getAttribute("myuser");
if(myuser==null){
myuser=new Vector();
}
if(flag){
myuser.addElement(mylist);
}
application.setAttribute("myuser",myuser);
response.sendRedirect("main.jsp");
%>
4.3聊天室主页面设计
用户通过登录页面进入到聊天室主页面。在聊天室主页面可以分为在线人员列表区、聊天内容显示区和用户发言区共3个区域，如下图。
在线人员列表区
聊天内容显示区
用户发言区
<!--此处省略了部分HTML代码-->
<table width="778" height="276" border="0" align="center"
cellpadding="0" cellspacing="0">
<tr>
<td width="165" valign="top" bgcolor="#FDF7E9" id="online"
style="padding: 5px">在线人员列表</td>
<td width="613" valign="top" bgcolor="#FFFFFF" id="content"
style="padding: 5px">聊天内容</td>
</tr>
</table>
```
<!--此处省略了用户发言区的代码，下面会有详细的介绍-->
4.4在线人员列表的设计
在实现在线人员列表显示时，为了实时显示在线人员列表，需要应用到Ajax技术，这时，首先需要创建一个封装Ajax必须实现功能的对象AjaxRequest，并将其代码保存为AjaxRequest.js，然后在聊天室的主页面中通过以下代码包含该文件。
```jsp
<script language="javascript" src="JS/AjaxRequest.js"></script>
AjaxRequest.js文件的完整代码如下。
var net=new Object(); //定义一个全局变量net
net.AjaxRequest=function(url,onload,onerror,method,params){
this.req=null;
this.οnlοad=onload;
this.οnerrοr=(onerror) ? one rror : this.defaultError;
this.loadDate(url,method,params);
}
net.AjaxRequest.prototype.loadDate=function(url,method,params){
if (!method){
method="GET";
}
if (window.XMLHttpRequest){
this.req=new XMLHttpRequest();
} else if (window.ActiveXObject){
this.req=new ActiveXObject("Microsoft.XMLHTTP");
}
if (this.req){
try{
var loader=this;
this.req.onreadystatechange=function(){
net.AjaxRequest.onReadyState.call(loader);
}
this.req.open(method,url,true);
//this.req.send(params);
this.req.send(null);
}catch (err){
this.onerror.call(this);
}
}
}
net.AjaxRequest.onReadyState=function(){
var req=this.req;
var ready=req.readyState;
if (ready==4){
if (req.status==200 ){
this.onload.call(this);
}else{
this.onerror.call(this);
}
}
}
net.AjaxRequest.prototype.defaultError=function(){
alert("error fetching data!"
+"\n\nreadyState:"+this.req.readyState
+"\nstatus: "+this.req.status
+"\nheaders: "+this.req.getAllResponseHeaders());
}
接下来还需要在主页面中编写调用AjaxRequest对象的函数、错误处理函数和返回值处理函数，代码如下。
window.setInterval("showOnline();",10000);
//此处需要加&nocache="+new Date().getTime()，否则将出现在线人员列表不更新的情况
function showOnline(){
var loader=new net.AjaxRequest("online.jsp?nocache="+new Date().getTime(),deal_online,onerror,"GET");
}
function showContent(){
var loader1=new net.AjaxRequest("content.jsp?nocache="+new Date().getTime(),deal_content,onerror,"GET");
}
function one rror(){
alert("很抱歉，服务器出现错误，当前窗口将关闭！");
window.opener=null;
window.close();
}
function deal_online(){
online.innerHTML=this.req.responseText;
}
最后，再来编写显示在线人员列表的页面online.jsp，在该页面中，主要是讲保存在集合类中的在线人员列表显示到页面。Online.jsp页面的代码如下。
<%@ page contentType="text/html; charset=gb2312" language="java" import="java.util.*" %>
<%@ page import="com.wgh.UserForm"%>
<% request.setCharacterEncoding("gb2312"); %>
<%Vector myuser=(Vector)application.getAttribute("myuser");%>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td height="32" align="center" class="word_orange ">欢迎来到丫丫聊天室！</td></tr>
<tr>
<td height="23" align="center"><a href="#" οnclick="set('所有人')">所有人</a></td>
</tr>
<% for(int i=0;i<myuser.size();i++){
UserForm mylist=(UserForm)myuser.elementAt(i);%>
<tr>
<td height="23" align="center"><a href="#" οnclick="set('<%=mylist.username%>')"><%=mylist.username%></a></td>
</tr>
<%}%>
<tr><td height="30" align="center">当前在线[<font color="#FF6600"><%=myuser.size()%></font>]人</td></tr>
</table>
4.5用户发言的设计
在实现用户发言功能时，首先需要在主页面的用户发言区中，添加用于收集用户发言信息的表单及表单元素，关键代码如下。
<form action="send.jsp" name="form1" method="post"
onSubmit="return check()">
<tr>
<td height="30" align="left"> </td>
<td height="37" align="left">[<%=session.getAttribute("username")%>
]对 <input name="tempuser" type="text" value="" size="35"
readonly="readonly"> 表情 <select name="select"
class="wenbenkuang">
<option value="无表情的">无表情的</option>
<option value="微笑着" selected>微笑着</option>
<option value="笑呵呵地">笑呵呵地</option>
<!--引出省略了添加其他列表的代码-->
</select> 说：
</td>
<td width="163" align="left"> 字体颜色： <select
name="color" size="1" class="wenbenkuang" id="select">
<option selected>默认颜色</option>
<option style="color: #FF0000" value="FF0000">红色热情</option>
<option style="color: #0000FF" value="0000ff">蓝色开朗</option>
<!--引处省略了添加其他列表项的代码-->
<option style="color: #999999" value="999999">烟雨蒙蒙</option>
</select></td>
<td width="19" align="left"> </td>
</tr>
<tr>
<td width="21" height="30" align="left"> </td>
<td width="575" align="left"><input name="message" type="text"
size="70"> <input name="Submit2" type="submit"
class="btn_blank" value="发送"></td>
<td align="right"><input name="button_exit" type="button"
class="btn_orange" value="退出聊天室" onClick="Exit()"></td>
<td align="center"> </td>
</tr>
<tr>
<td height="30" align="left"> </td>
<td colspan="2" align="center" class="word_dark"> All
CopyRights ? reserved 2019 江西省交大理工学院</td>
<td align="center"> </td>
</tr>
</form>
在上面的代码中，语句<%=session.getAttribute(“username”)%>用于显示当前的登录用户名。聊天框被设置为只读属性，这样用户就不能手动输入聊天对象了，所以还要提供。选择聊天对象，还可以通过在主页面中添加选择聊天对象的JavaScript定义函数及在线人员列表上添加超链接实现。将选择的聊天对象添加到聊天对象文本框的JavaScript代码如下。
<script language="javascript">
function set(selectPerson){ //自动添加聊天对象
if(selectPerson!="<%=session.getAttribute("username")%>"){
form1.tempuser.value=selectPerson;
}else{
alert("请重新选择聊天对象！");
}
}
</script>
接下来编写用于处理用户发言信息的处理页send.jsp，在该页面中首先包含显示聊天内容页面content.jsp，将用户的方言信息添加到聊天内容列表中，然后再加显示页面重定向到聊天室主页面，具体代码如下。
<%@ page contentType="text/html; charset=gb2312" language="java"%>
<%@ include file="content.jsp"%>
<%response.sendRedirect("main.jsp");%>
4.6显示聊天内容的设计
在实现显示聊天内容时，也需要应用Ajax技术，这里只需要在主页面中调用AjaxRequest对象的函数和返回值处理函数即可。具体代码如下。
window.setInterval("showContent();",1000);
function showContent(){
var loader1=new net.AjaxRequest("content.jsp?nocache="+new Date().getTime(),deal_content,onerror,"GET");
}
function deal_content(){
content.innerHTML=this.req.responseText;
}接下来将编写显示留言内容的页面content.jsp,该页面主要用于获取发言并保存到application对象中，再将application对象中的聊天内容显示到页面。Content.jsp页面的代码如下。
<%@ page contentType="text/html; charset=gb2312" language="java" import="java.util.*" errorPage="" %>
<% request.setCharacterEncoding("gb2312"); %>
<%
if(session.getAttribute("username").equals("null")){
out.println("<script language='javascript'>alert('您还没有登录不能进入本聊天室');parent.location.href='login.html';</script>");
}
if(session.getAttribute("username").equals("request.getParameter("+request.getParameter("tempuser")+")")){
out.println("<script language='javascript'>alert('请重新选择聊天对象');</script>");
}
String message=request.getParameter("message");
String select=request.getParameter("select");
String tempuser=request.getParameter("tempuser");
String color=request.getParameter("color");
if(message!=null&&tempuser!=null){
if(message.startsWith("<")){
out.print("<marquee direction='left' scrollamount='23'>"+
"<font color='blue'>"+"请不要输入带有标记的特殊符号"+"</font>"+"</marquee>");
return;
}else if(message.endsWith(">")){
out.print("<marquee direction='left' scrollamount='25'>"+
"<font color='blue'>"+"请不要输入带有标记的特殊符号"+"</font>"+"</marquee>");
return;
}
if(application.getAttribute("message")==null){ //第一个人说话时
application.setAttribute("message","<br>"+"<font color='blue'>"+
"<strong>"+session.getAttribute("username")+"</strong>"+"</font>"+"<font color='#CC0000'>"+select+"</font>"+"对"+"<font color='green'>"+"["+tempuser+"]"+"</font>"+"说："+"<font color="+color+">"+message);
}else{
application.setAttribute("message","<br>"+"<font color='blue'>"+"<strong>"+session.getAttribute("username")+"</strong>"+"</font>"+"<font color='#CC0000'>"+select+"</font>"+"对"+"<font color='green'>"+"["+tempuser+"]"+"</font>"+"说："+"<font color="+color+">"+message+"</font>"+application.getAttribute("message"));
}
out.println("<p>"+application.getAttribute("message")+"<p>");
}else{
if(application.getAttribute("message")==null){
out.println("<font color='#cc0000'>"+application.getAttribute("ul")+"</font>"+"<font color='green'>"+"走进了网络聊天室"+"</font>");
out.println("<br>"+"<center>"+"<font color='#aa0000''>"+"请各位聊友注意聊天室的规则,不要在本聊天室内发表反动言论及对他人进行人身攻击，不要随意刷屏。"+"</font>"+"</center>");
}else{
out.println(application.getAttribute("message")+"<br>");
}
}
%>
4.7退出聊天室的设计
在该聊天室中，有两种退出聊天的方法，一种是单击主页面中的“退出聊天室”按钮，另一种是单击浏览器的关闭按钮。需要注意的是，无论用哪种方法，都会显示如图对话框。
下面先来第一种。首先在主页面的合适位置添加“退出聊天室”按钮，并在按钮的onclick事件中调用自定义的JavaScript函数Exit（），关键代码如下。
然后编写自定义的JavaScript函数Exit()，在该函数中，首先将页面重定向到退出聊天室页面leave.jsp，然后在弹出“欢迎您下次光临!”的对话框，具体代码如下。
function Exit(){
window.location.href=“leave.jsp”;
alert(“欢迎您下次光临！”);
}
最后编写退出聊天室页面leave.jsp。在该页面中，首先从保存在application对象中的在线人员列表中将的登录的用户删除，然后将保存用户信息的session对象设置为空，再判断保存在线人员列表的集合是否为空，如果为空，则清空聊天内容，最后将页面重定向到登录页面。Leave.jsp代码如下。
<%@ page contentType="text/html; charset=gb2312" language="java"%>
<% request.setCharacterEncoding("gb2312"); %>
<%@ page import="java.util.Vector"%>
<%@ page import="com.wgh.UserForm"%>
<%
Vector temp=(Vector)application.getAttribute("myuser");
for(int i=0;i<temp.size();i++){
UserForm mylist=(UserForm)temp.elementAt(i);
if(mylist.username.equals(session.getAttribute("username"))){
temp.removeElementAt(i);
session.setAttribute("username","null");
}
if(temp.size()==0){
application.removeAttribute("message");
}
}
response.sendRedirect("index.jsp");
%>
接下来再实现第二种方法。在实现单击关闭按钮退出聊天室时，只需要主页面中添加以下代码即可实现。
<script language="jscript">
window.οnbefοreunlοad=function(){ //当用户单击浏览器中的“关闭”按钮时，执行退出操作
if(event.clientY<0 && event.clientX>document.body.scrollWidth){
Exit(); //执行退出操作
}
}
</script>
五、程序设计心得
在这两周的时间里，我们组两个人设计完成了Ajax聊天系统，在聊天室不但可以随时显示在线人员列表及聊天内容，而且增加了聊天表情和文字颜色选择的功能。
在这两周的时间里，我们把过去学的JSP理论知识得到了实践，甚至为了Ajax技术不得不进行自学创新。但是理论跟实践总是有所差别，所以在设计的过程中也出现了不少问题，例如，在 Tomcat中连接出错，在代码不完整等等细节上出错。
本系统开发的技术难点主要需要注意的内容：应用于Ajax技术实现实时刷新在线人员列表；应用Ajax技术实现实时刷新显示的聊天内容；在用户退出聊天室时，需要及时删除在线人员列表中的该用户；当用户单击浏览器的“关闭”按钮关闭聊天页面时，也需要将该用户从在线人员列表中删除。聊天逻辑是聊天室系统的行业特点及其实际需要来进行设计的。只有在准确理解一个系统的功能逻辑之后才可能开发出适应其应用的应用系统来，并且在系统之间模块的科学划分与结构组织都是在正确理解实际应用的逻辑需求的前提下完成的。
在课程设计结束后我们也得到了一些成绩，我们设计的过程中熟悉了JSP的内置对象（包括Session对象、Application对象、request对象和response对象）、Ajax技术、集合类中的Vector类以及JavaBean技术的实际应用。我们统筹对于设计思路、设计过程以及课设总结等等，协调发展和优势发展实现共赢的战略。利用的时间可以说比较充实，集中处理课程设计，我们对于JSP程序设计得到了一个更好的认识与新的想法。我们总结不足之处，继续努力，继续前进！
这学期的学习已经临近结束，但我们要想学好这门课还应在空余的时间里多加练习，多实践，多做，多思考。希望在明年的学习中我能学到更多相关的知识，来提升自己的设计能力，在平时老师讲课时多注意细节问题，注重上机实践，不能只是听老师讲完就没事了，这样到课程设计的时候还是无厘头，所以在下学期不能再纸上谈兵了，我会多练习老师讲过的例题，争取弄懂程序的运行原理。
六、参考资料
[1]耿祥义 张跃平.JSP实用教程（第三版） 清华大学 出版社
[2]刘长生，谢强，丁秋林，Java应用中的乱码问题分析[J] 计算机技术与发展，2006,25（5）：77-80.
[3]飞思科技产品研发中心。JSP应用开发详解（第二版）[M].北京：电子工业出版社，2004
[4]萨师煊，王珊。数据库系统概论（第三版）[M].北京：高等教育出版社，2000
[5]张红梅，王磊。在JSP中访问数据库的方法[J].农业图书情报学刊，2006,18（12）：142-144
[6]崔淼，陈明非.Visual C# 2005 程序设计教程.北京：机械工业出版社，2007.1
致 谢