一个用ajax实现聊天室
2007-07-15 21:26
225 查看
以前实现聊天必须每隔几秒钟来进行刷新页面保正数据同步，让人感觉太烦了！
这里用 ajax + servlet + sqlserver 实现聊天室功能!
//JSP页面
//index
<%@ page contentType="text/html; charset=GBK" %>
<html>
<head>
<title>
index
</title>
<link href="css/web.css" style="text/css" rel="stylesheet"/>
</head>
<frameset rows="40,*">
<frame id="top" noresize scrolling="no" frameborder="0" src="top.jsp">
<frameset id="Middle" rows="*,130" frameborder="0">
<frameset cols="160,*" frameborder="1">
<frame id="left" scrolling="auto" src="Left.jsp" frameborder="0">
<frame id="main" scrolling="auto" src="Main.jsp" frameborder="0">
</frameset>
<frame frameborder="1" id="bottom" scrolling="no" frameborder="0" src="Bottom.jsp">
</frameset>
</frameset>
</html>
//Buttom
<%@ page contentType="text/html; charset=GBK" %>
<html>
<head>
<title>
Bottom
</title>
<script type="" src="js/Bottom.js" language="javascript">
</script>
</head>
<body bgcolor="#ffffff">
<form method="post" action="Bottom.jsp" name="form1">
<table width="722" height="124" border="0" style="border:black 1px solid" bordercolor="#CC9966" bgcolor="#CCFFCC">
<tr>
<td height="33">
<select name="stFont" size="1">
<option value="宋体" selected=true>宋体</option>
<option value="黑体">黑体</option>
<option value="隶书">隶书</option>
<option value="Arial">Arial</option>
</select>
<select name="stColor" size="1">
<OPTION style="COLOR: black" value="black" selected>■ black</OPTION>
<OPTION style="COLOR: dimgray" value="dimGray">■ dimGray</OPTION>
<OPTION style="COLOR: gray" value="gray">■ Gray</OPTION>
<OPTION style="COLOR: darkgray" value="darkGray">■ darkGray</OPTION>
<OPTION style="COLOR: silver" value="silver">■ silver</OPTION>
<OPTION style="COLOR: lightgrey" value="lightgrey">■ LightGrey</OPTION>
<OPTION style="COLOR: gainsboro" value="gainsboro">■ GainsBoro</OPTION>
<OPTION style="COLOR: whitesmoke" value="whitesmoke">■ whitesmoke</OPTION>
<OPTION style="COLOR: white" value="white">■ white</OPTION>
<OPTION style="COLOR: rosybrown" value="RosyBrown">■ RosyBrown</OPTION>
<OPTION style="COLOR: indianred" value="IndianRed">■ IndianRed</OPTION>
<OPTION style="COLOR: brown" value="firebrick">■ brown</OPTION>
<OPTION style="COLOR: firebrick" value="lightcoral">■ firebrick</OPTION>
<OPTION style="COLOR: darkred" value="darkred">■ darkred</OPTION>
<OPTION style="COLOR: snow" value="snow">■ snow</OPTION>
<OPTION style="COLOR: tomato" value="tomato">■ tomato</OPTION>
<OPTION style="COLOR: darksalmon" value="darksalmon">■ darksalmon</OPTION>
<OPTION style="COLOR: orangered" value="orangered">■ orangered</OPTION>
<OPTION style="COLOR: red" value="red">■ red</OPTION>
<OPTION style="COLOR: lightsalmon" value="lightsalmon">■ lightsalmon</OPTION>
<OPTION style="COLOR: seashell" value="seashell">■ seashell</OPTION>
<OPTION style="COLOR: chocolate" value="chocolate">■ chocolate</OPTION>
<OPTION style="COLOR: gold" value="gold">■ gold</OPTION>
<OPTION style="COLOR: yellow" value="yellow">■ yellow</OPTION>
<OPTION style="COLOR: olive" value="olive">■ olive</OPTION>
<OPTION style="COLOR: greenyellow" value="greenyellow">■ greenyellow</OPTION>
<OPTION style="COLOR: forestgreen" value="forestgreen">■ forestgreen</OPTION>
<OPTION style="COLOR: limegreen" value="limegreen">■ limegreen</OPTION>
<OPTION style="COLOR: darkgreen" value="darkgreen">■ darkgreen</OPTION>
<OPTION style="COLOR: green" value="green">■ green</OPTION>
<OPTION style="COLOR: lime" value="lime">■ lime</OPTION>
<OPTION style="COLOR: seagreen" value="seagreen">■ seagreen</OPTION>
<OPTION style="COLOR: springgreen" value="sienna">■ springgreen</OPTION>
<OPTION style="COLOR: powderblue" value="springgreen">■ orangered</OPTION>
<OPTION style="COLOR: lightblue" value="lightblue">■ lightblue</OPTION>
<OPTION style="COLOR: skyblue" value="skyblue">■ skyblue</OPTION>
<OPTION style="COLOR: steelblue" value="steelblue">■ steelblue</OPTION>
<OPTION style="COLOR: aliceblue" value="aliceblue">■ aliceblue</OPTION>
<OPTION style="COLOR: royalblue" value="royalblue">■ royalblue</OPTION>
<OPTION style="COLOR: navy" value="navy">■ navy</OPTION>
<OPTION style="COLOR: darkblue" value="darkblue">■ darkblue</OPTION>
<OPTION value="middleblue">■ middleblue</OPTION>
<OPTION style="COLOR: blue" value="blue">■ blue</OPTION>
<OPTION style="COLOR: purple" value="purple">■ purple</OPTION>
<OPTION style="COLOR: deeppink" value="deeppink">■ deeppink</OPTION>
<OPTION style="COLOR: pink" value="pink">■ pink</OPTION>
<OPTION style="COLOR: lightpink" value="lightpink">■ lightpink</OPTION>
</select>
<SELECT id="ddlFontSize" name="ddlFont" style="MARGIN:-2px;WIDTH:60px">
<OPTION value="1">1</OPTION>
<OPTION value="2" selected>2</OPTION>
<OPTION value="3">3</OPTION>
<OPTION value="4">4</OPTION>
<OPTION value="5">5</OPTION>
<OPTION value="6">6</OPTION>
<OPTION value="7">7</OPTION>
</SELECT>
<input name="chkPhone" type="checkbox" value="0" >悄悄话
<select name="ddlUser" Width="100px">
<option value="0" selected=true>所有人</option>
</select>
<strong>说:</strong>
</td>
</tr>
<tr>
<td valign="top">
<input type="hidden" value="0" name="ReceiverId" id="ReceiverId"/>
<textarea name="textarea" cols="60" rows="5"></textarea>
<input name="btnSend" type="button" id="btnSend" style="width:100;height:70;" onclick="getMessage();" value="发送">
</td>
</tr>
</table>
</form>
</body>
</html>
//Left
<%@ page contentType="text/html; charset=GBK" %>
<html>
<head>
<title>
Left
</title>
<script type="text/javascript" src="js/Left.js" language="javascript">
</script>
</head>
<body bgcolor="#ffffff" onload="getInfo();">
<form method="post" action="Left.jsp">
<table id="datatable" align="left" border="0" cellpadding="2" cellspacing="2" style="border:black 1px solid" bgcolor="#FFAFA">
<tbody id="datatbody">
</tbody>
</table>
</form>
</body>
</html>
//Main
<%@page contentType="text/html; charset=GBK"%>
<html>
<head>
<title>Main</title>
<script type="" src="js/Main.js" language="javascript">
</script>
</head>
<body bgcolor="#ffffff" onload="getMessage();">
<div id="datadiv"></div>
</body>
</html>
//Login
<%@ page contentType="text/html; charset=GBK" %>
<html>
<head>
<title>
用户登录
</title>
</head>
<link href="css/web.css" style="text/css" rel="stylesheet"/>
<body bgcolor="#ffffff" onload="javascript:document.all.txtName.focus();">
<h3 align="center">
欢迎登录聊天室
</h3>
<form action="login" method="POST">
<table align="center" border="0" cellpadding="2" cellspacing="2" bgcolor="#FFFAFA" style="border:red 1px solid">
<tr>
<td>姓名:</td> <td><input type="text" name="txtName"/></td>
</tr>
<tr>
<td>密码:</td><td><input type="password" name="txtPwd"/></td>
</tr>
<tr>
<td></td> <td><input type="submit" value="登录"/>
<input type="reset" value="取消"/></td>
</tr>
</table>
</form>
</body>
</html>
这里用 ajax + servlet + sqlserver 实现聊天室功能!
//JSP页面
//index
<%@ page contentType="text/html; charset=GBK" %>
<html>
<head>
<title>
index
</title>
<link href="css/web.css" style="text/css" rel="stylesheet"/>
</head>
<frameset rows="40,*">
<frame id="top" noresize scrolling="no" frameborder="0" src="top.jsp">
<frameset id="Middle" rows="*,130" frameborder="0">
<frameset cols="160,*" frameborder="1">
<frame id="left" scrolling="auto" src="Left.jsp" frameborder="0">
<frame id="main" scrolling="auto" src="Main.jsp" frameborder="0">
</frameset>
<frame frameborder="1" id="bottom" scrolling="no" frameborder="0" src="Bottom.jsp">
</frameset>
</frameset>
</html>
//Buttom
<%@ page contentType="text/html; charset=GBK" %>
<html>
<head>
<title>
Bottom
</title>
<script type="" src="js/Bottom.js" language="javascript">
</script>
</head>
<body bgcolor="#ffffff">
<form method="post" action="Bottom.jsp" name="form1">
<table width="722" height="124" border="0" style="border:black 1px solid" bordercolor="#CC9966" bgcolor="#CCFFCC">
<tr>
<td height="33">
<select name="stFont" size="1">
<option value="宋体" selected=true>宋体</option>
<option value="黑体">黑体</option>
<option value="隶书">隶书</option>
<option value="Arial">Arial</option>
</select>
<select name="stColor" size="1">
<OPTION style="COLOR: black" value="black" selected>■ black</OPTION>
<OPTION style="COLOR: dimgray" value="dimGray">■ dimGray</OPTION>
<OPTION style="COLOR: gray" value="gray">■ Gray</OPTION>
<OPTION style="COLOR: darkgray" value="darkGray">■ darkGray</OPTION>
<OPTION style="COLOR: silver" value="silver">■ silver</OPTION>
<OPTION style="COLOR: lightgrey" value="lightgrey">■ LightGrey</OPTION>
<OPTION style="COLOR: gainsboro" value="gainsboro">■ GainsBoro</OPTION>
<OPTION style="COLOR: whitesmoke" value="whitesmoke">■ whitesmoke</OPTION>
<OPTION style="COLOR: white" value="white">■ white</OPTION>
<OPTION style="COLOR: rosybrown" value="RosyBrown">■ RosyBrown</OPTION>
<OPTION style="COLOR: indianred" value="IndianRed">■ IndianRed</OPTION>
<OPTION style="COLOR: brown" value="firebrick">■ brown</OPTION>
<OPTION style="COLOR: firebrick" value="lightcoral">■ firebrick</OPTION>
<OPTION style="COLOR: darkred" value="darkred">■ darkred</OPTION>
<OPTION style="COLOR: snow" value="snow">■ snow</OPTION>
<OPTION style="COLOR: tomato" value="tomato">■ tomato</OPTION>
<OPTION style="COLOR: darksalmon" value="darksalmon">■ darksalmon</OPTION>
<OPTION style="COLOR: orangered" value="orangered">■ orangered</OPTION>
<OPTION style="COLOR: red" value="red">■ red</OPTION>
<OPTION style="COLOR: lightsalmon" value="lightsalmon">■ lightsalmon</OPTION>
<OPTION style="COLOR: seashell" value="seashell">■ seashell</OPTION>
<OPTION style="COLOR: chocolate" value="chocolate">■ chocolate</OPTION>
<OPTION style="COLOR: gold" value="gold">■ gold</OPTION>
<OPTION style="COLOR: yellow" value="yellow">■ yellow</OPTION>
<OPTION style="COLOR: olive" value="olive">■ olive</OPTION>
<OPTION style="COLOR: greenyellow" value="greenyellow">■ greenyellow</OPTION>
<OPTION style="COLOR: forestgreen" value="forestgreen">■ forestgreen</OPTION>
<OPTION style="COLOR: limegreen" value="limegreen">■ limegreen</OPTION>
<OPTION style="COLOR: darkgreen" value="darkgreen">■ darkgreen</OPTION>
<OPTION style="COLOR: green" value="green">■ green</OPTION>
<OPTION style="COLOR: lime" value="lime">■ lime</OPTION>
<OPTION style="COLOR: seagreen" value="seagreen">■ seagreen</OPTION>
<OPTION style="COLOR: springgreen" value="sienna">■ springgreen</OPTION>
<OPTION style="COLOR: powderblue" value="springgreen">■ orangered</OPTION>
<OPTION style="COLOR: lightblue" value="lightblue">■ lightblue</OPTION>
<OPTION style="COLOR: skyblue" value="skyblue">■ skyblue</OPTION>
<OPTION style="COLOR: steelblue" value="steelblue">■ steelblue</OPTION>
<OPTION style="COLOR: aliceblue" value="aliceblue">■ aliceblue</OPTION>
<OPTION style="COLOR: royalblue" value="royalblue">■ royalblue</OPTION>
<OPTION style="COLOR: navy" value="navy">■ navy</OPTION>
<OPTION style="COLOR: darkblue" value="darkblue">■ darkblue</OPTION>
<OPTION value="middleblue">■ middleblue</OPTION>
<OPTION style="COLOR: blue" value="blue">■ blue</OPTION>
<OPTION style="COLOR: purple" value="purple">■ purple</OPTION>
<OPTION style="COLOR: deeppink" value="deeppink">■ deeppink</OPTION>
<OPTION style="COLOR: pink" value="pink">■ pink</OPTION>
<OPTION style="COLOR: lightpink" value="lightpink">■ lightpink</OPTION>
</select>
<SELECT id="ddlFontSize" name="ddlFont" style="MARGIN:-2px;WIDTH:60px">
<OPTION value="1">1</OPTION>
<OPTION value="2" selected>2</OPTION>
<OPTION value="3">3</OPTION>
<OPTION value="4">4</OPTION>
<OPTION value="5">5</OPTION>
<OPTION value="6">6</OPTION>
<OPTION value="7">7</OPTION>
</SELECT>
<input name="chkPhone" type="checkbox" value="0" >悄悄话
<select name="ddlUser" Width="100px">
<option value="0" selected=true>所有人</option>
</select>
<strong>说:</strong>
</td>
</tr>
<tr>
<td valign="top">
<input type="hidden" value="0" name="ReceiverId" id="ReceiverId"/>
<textarea name="textarea" cols="60" rows="5"></textarea>
<input name="btnSend" type="button" id="btnSend" style="width:100;height:70;" onclick="getMessage();" value="发送">
</td>
</tr>
</table>
</form>
</body>
</html>
//Left
<%@ page contentType="text/html; charset=GBK" %>
<html>
<head>
<title>
Left
</title>
<script type="text/javascript" src="js/Left.js" language="javascript">
</script>
</head>
<body bgcolor="#ffffff" onload="getInfo();">
<form method="post" action="Left.jsp">
<table id="datatable" align="left" border="0" cellpadding="2" cellspacing="2" style="border:black 1px solid" bgcolor="#FFAFA">
<tbody id="datatbody">
</tbody>
</table>
</form>
</body>
</html>
//Main
<%@page contentType="text/html; charset=GBK"%>
<html>
<head>
<title>Main</title>
<script type="" src="js/Main.js" language="javascript">
</script>
</head>
<body bgcolor="#ffffff" onload="getMessage();">
<div id="datadiv"></div>
</body>
</html>
//Login
<%@ page contentType="text/html; charset=GBK" %>
<html>
<head>
<title>
用户登录
</title>
</head>
<link href="css/web.css" style="text/css" rel="stylesheet"/>
<body bgcolor="#ffffff" onload="javascript:document.all.txtName.focus();">
<h3 align="center">
欢迎登录聊天室
</h3>
<form action="login" method="POST">
<table align="center" border="0" cellpadding="2" cellspacing="2" bgcolor="#FFFAFA" style="border:red 1px solid">
<tr>
<td>姓名:</td> <td><input type="text" name="txtName"/></td>
</tr>
<tr>
<td>密码:</td><td><input type="password" name="txtPwd"/></td>
</tr>
<tr>
<td></td> <td><input type="submit" value="登录"/>
<input type="reset" value="取消"/></td>
</tr>
</table>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 实现一个无刷新的基于ajax的简易聊天室
- 实现一个无刷新的基于ajax的简易聊天室
- 实现一个无刷新的基于ajax的简易聊天室
- 实现一个无刷新的基于ajax的简易聊天室
- 分享一个基于长连接+长轮询+原生的JS及AJAX实现的多人在线即时交流聊天室
- ajax+js+json+dom+php+mysql实现一个聊天室
- 实现一个无刷新的基于ajax的简易聊天室
- 实现一个无刷新的基于ajax的简易聊天室
- 实现一个无刷新的基于ajax的简易聊天室
- 实现一个无刷新的基于ajax的简易聊天室
- 一个简单聊天室的两种实现 (fcntl 和 select)
- Java+MySql+Servlet+Ajax实现单态登陆，说白了就是一个账号只能在一个浏览器中登陆。
- 一个简单的例子看明白如何利用window.location.hash实现ajax操作时浏览器的前进/后退功能
- 用VC++6.0的Sockets API实现一个聊天室程序
- 用java多线程实现一个控制台聊天室
- 使用WebSocket实现即使通讯(实现一个群聊的聊天室)
- Ajax实现在线聊天室
- jQuery封装一个方法实现监控页面所有ajax请求
- ajax+jQuery实现一个页面同时加载多个模块！