在线聊天系统，关键代码，（jquery.ajax）

在线聊天系统：

（jquery.ajax版本，定时刷新页面，且聊天内容不保存到数据库）

其实可以使用DWR推技术。有值进入，才刷新页面，

关键点：

【一】显示在线人数及其列表

【二】显示聊天内容 

         ① XXX进入聊天室

         ② XXX说什么话

         ③ XXX离开聊天室

【三】发送聊天信息

第一部分，页面

①  Chat.jsp页面：

<div class="container">
	<table height="300px" id="tb_chat" border="0" cellpadding="0" cellspacing="0">
		<tr>
			<td width="80px" valign="top" bgcolor="#f6fded" id="online">
			</td>
			<td width="480px" height="200px" valign="top" bgcolor="#FFFFFF">
				<div style="height:290px; overflow:auto;text-align:left;pading:5px;" id="content">聊天内容</div>
			</td>
		</tr>
	</table>
	<br>
	<input type="text" id="message" size=50 placeholder="请输入信息">
	<input type="button" id="button" class="btn btn-primary" value="发送">
</div>

【id】online，插入在线人数列表

【id】content，插入聊天内容

【id】message，输入框

【id】button，发送按钮

②online.jsp页面：

<%@ page import = "chat.entity.UserList" %>
<%@ page import = "java.util.Vector" %>
<%
	UserList ul=UserList.getInstance();
	Vector vector=ul.getUserList();
	int amount=0;
%>
<table align="center">
	<tr>
		<td>当前在线</td>
	</tr>
	<%
	if(vector!=null && vector.size()>0){
		String username="";	 
		amount=vector.size();
		for(int i=0;i<amount;i++){
			username=(String)vector.elementAt(i);
	%>
	<tr>
		<td height="23" ><%=username%></td>
	</tr>
	<%
		}
	}
	%>
</table>

③ content.jsp页面：

${message}

第二部分：jquery

【一】插入在线列表

window.setInterval("showOnline();",10000);
$(function(){
	showOnline();
})
//显示在线人员
function showOnline(){
	$.ajax({
		url: "toonline.action",
		type:"get",
		success: function(data){
			//alert(data);
			$("#online").html('');
			$("#online").append(data);
		}
	});
}
		

【二】插入聊天列表

window.setInterval("showContent();",1000);
$(function(){
	showContent();

})
//显示内容
function showContent(){
	$.ajax({
		url: "chat.action",
		type:"get",
		success: function(data){
			//alert(data);
			$("#content").html('聊天内容');
			$("#content").append(data);
		}
	});
}

【三】发送

$(function(){
	//提交表单
	$("#button").click(function(){
		if( $("#message").val()=="" ){
			alert("还没输入呢");
		}else{
			var varmessage = $("#message").val();
			$.ajax({
				url:"send.action",
				type:"POST",
				data:{message:varmessage},
				success: function(data){
					$("#message").prop("value","");
					//alert("ddd");
				}
			});
		}
	});
});

第三部分：后台

【一】显示在线人数及其列表

在登录的时候，专门用一个vector，来存取人的名字，作为列表

【二】显示聊天内容 

         ① XXX进入聊天室

这个在登陆的时候，顺带写到application里的message

         ② XXX说什么话

后台接收到消息后，弄成合适的输出结构，获取原先讲到一半的message里，再向里面插入，存回message

         ③ XXX离开聊天室

退出时，顺带写到application里的message

【三】发送聊天信息

同上②

② content.jsp页面：

${message}