一个用ajax实现聊天室

最新推荐文章于 2023-06-07 16:55:42 发布
最新推荐文章于 2023-06-07 16:55:42 发布
阅读量3.2k 收藏 1
点赞数
分类专栏： ajax 文章标签： ajax javascript border sqlserver html input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yjsyliserver/article/details/1692875
版权

以前实现聊天必须每隔几秒钟来进行刷新页面保正数据同步，让人感觉太烦了！
这里用 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;" οnclick="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" οnlοad="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" οnlοad="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" οnlοad="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="登录"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input  type="reset" value="取消"/></td>
  </tr>
</table>
</form>
</body>
</html>

 

 

yjsyliserver
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Ajax实现在线聊天室
Jere的专栏
04-09 6422
功能实现及开发过程可能遇到的问题 发送聊天的消息和实时显示聊天的消息一定要分开处理！ 发送聊天消息如何实现？ ①在多行文本框上面绑定“按下键盘[keypress]”事件，在用户按回车键时发送Ajax请求 ②接收到Ajax请求后，保存聊天记录信息 实时显示聊天记录如何实现？ ①困难： [1]服务器端不会主动的告诉浏览器有新的聊天记录了，而是只能被动的响应浏览器的请求 [2]浏览器不知道服务
ajax在线聊天室(一)
7F
03-08 7626
经过多天的努力，我们在老师的带领下做了一个聊天室，功能很多，请听我一一道来，分享大家学习。 首先，一个聊天室必须能够多人在线聊天，聊天的信息实时显示，今天我就分享如何在线聊天。 搭建一个聊天室的框架 在线聊天室 欢迎，进入聊天室 在线用户列表： 已屏蔽：取
Ajax实现在线聊天
04-09
使用Ajax、jQuery、Servlet技术实现在线聊天功能，聊天记录会保存到数据库（MySQL）中，并用GSON工具包将集合转换为JSON格式数据传递到前台
Ajax在线聊天室
杜小白的博客
07-21 5286
一、聊天室功能需求分析： 区域1：及时显示大家的聊天信息，页面在不刷新的情况下把聊天信息给追加进来。利用反向推技术，每间隔2s就去服务器查看是否有新的聊天信息，有则请求回来并显示。     实现：给ajax做一个轮询（setInterval()）。 区域2：在页面不刷新的情况下，把信息提交给服务器存储，同时在区域1中显示对应的内容。     实现：ajax无刷新方式获得聊天Form表单...
AJAX的完整介绍-江阳宏海
jhly123的博客
06-07 146
例如，在一个搜索引擎网站中，当用户输入关键词并按下“搜索”按钮时，使用传统的方式会导致整个页面重新加载，而使用AJAX则只需要请求并更新搜索结果区域，避免了不必要的刷新。使用AJAX技术可以实现表单的异步提交，即在不刷新页面的情况下向服务器发送表单数据，并获取返回的结果。例如，在一个电子商务网站中，当用户滚动页面到底部时，使用AJAX技术可以异步加载更多商品信息，从而提高用户浏览商品的效率。由于AJAX技术可以在不刷新页面的情况下向服务器发送请求，因此可以减少不必要的网络流量，提高网站的性能。
使用 Ajax 实现聊天功能
MYOS的博客
05-29 1575
使用 Ajax 实现聊天功能 文档选项打印本页将此页作为电子邮件发送英文原文级别： 中级Judith Myerson, 系统工程师兼架构师
websocket 代理tcp_一文看懂websocket
weixin_39736150的博客
11-25 940
我们先看一下下面这张图：可以看到这是一个简易的聊天室，两个窗口的消息是实时发送与接收的，这个主要就是用我们今天要讲的websocket实现的。websocket是什么？websocket是一种网络通信协议，我们都知道http协议，http协议只能从客户端主动发起，不能从服务端推送数据到客户端，今天我们讲的websocket就是一种不仅能从客户端发送数据到服务端，也可以主动从服务的推送数据给客户端的...
asp.net+ajax 制作一个简单的社区聊天室
07-26
asp.net+ajax 制作一个简单的社区聊天室，asp.net 源码
基于Ajax的无刷新聊天室.zip
12-19
使用Ajax技术，实现一个无刷新聊天室.后台使用XML或者数据库来储存用户信息（包括用户名，密码，性别，年龄，兴趣爱好等）和聊天信息（包括聊天内容，发送方，接收方，发送时间等）
实用聊天室源码(利用Ajax实现).zip
06-19
实用聊天室源码(利用Ajax实现).zip
Ajax实现前端聊天室
06-10
Ajax实现网页聊天室源码。运行环境，eclipse，tomcat7.0.
phpAJAX聊天室
12-20
php聊天室
web即时聊天(ajax长轮询方式实现)
02-20
采用ajax＋长轮询，简单易懂．实现web对话即时推送。欢迎下载！
Ajax实现的简单的web聊天
03-05
用Ajax实现的简单web聊天，可以实现实时刷新。
ajax无刷新聊天代码
09-21
ajax无刷新聊天代码 只发关键部分了啊 /* *@ author 让痛苦痛苦 *@ param 开源QQ群：37424970 *@ param 本人邮箱:[email protected] */ *--*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*--*-*-*-*-*-*-*-**-*-*-*-*-*-*-*-*-*-*-**-*-*-*-*-*-*-*-*-*-*--* jsp页面代码： <%@ page language="java" import="java.util.*,com.yeeyoo.it.*,java.text.*" pageEncoding="GB18030"%> <jsp:directive.page import="com.yeeyoo.model.*"/> <jsp:directive.page import="com.yeeyoo.Bo.*"/> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <% ArrayList al=(ArrayList)new UsersBo().ShowAllUsersZaixian(); %> .............
基于jsp+servlet+ajax的web聊天室
05-30
使用数据库保存聊天记录；使用session页面限制访问；使用application显示在线人名字列表； 使用servlet+ajax实现无刷新发言与更新实时聊天记录以及注册时文本框失去焦点AJAX验证用户名是否已重复； 系统支持双人聊天与群聊，群聊登陆界面为webLogin.jsp 双人聊天为login.jsp。在注册以后均可以登陆系统进行聊天。 最新加入了收到消息MSN消息提示，以及任务栏文字提示等。
基于ajax的在线聊天室程序
10-14
asp+ajax做的一个聊天室程序，纯粹为了技术学习，完成度不是很高，但是完成了一个聊天室所应该有的基本功能，包括私聊什么的。
Ajax实现聊天
dianmei3204的博客
10-19 227
用Ajax发送请求，查询数据库是否有自己的数据，如果有自己的数据，就返回 前端页面 <head> <meta charset="UTF-8"> <title>登录聊天室</title> <?php session_start(); $sender = $_SESSION['loginuse...
asp+ajax实现简单聊天室
最新发布
07-10
要实现一个简单的聊天室，可以使用ASP和AJAX的结合使用。 首先，我们需要一个包含聊天室界面的ASP页面。在页面中，我们可以添加一个文本框输入框用于输入聊天内容，以及一个按钮用于发送消息。还可以添加一个用于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值