`

AJAX无刷新聊天室实现(压缩包附件下载)

AjaxJSPCometIE浏览器 
阅读更多
之前也写了一个小的聊天室DEMO，在另外一篇博客中
http://lvp.iteye.com/blog/343236，也提供了附件下载。
但是这个示例中页面自动刷新 带来的体验感不好，且当聊天内容到达最后一行时，滚动条的滚动是用了非常耍赖的方法来解决的，因此，在此基础之上，做了一些改进。

我觉得，写代码，不见得一定要写很多的DEMO，但是力争每一个DEMO都永远比上一个好。有可能一直在写同一个示例，但是每一次的实现一定在改进，在推敲。所以我也一直在做这么一件事情，尽可能把每个小DEMO写好，永远比上一次要好，永远比上一次要碰到更多的问题，永远比上一次要多懂得一些解决这些问题的方法，我觉得这是初学者应该要懂得的一个道理。不应该过于贪多，认真的把一个问题给解决，分析与总结。

所以，对于我来说，这个示例只是比上一个示例要好了一些，但是也不是终点。

并且，为了对下载的朋友负责的态度，凡是提供下载的代码一定都是经过自己手动实现，并非抄袭他人，代码是齐全的，有数据库的就一定提供数据库，所以这些代码可以帮助你们解决一些具有同类功能的问题。

代码描述部分，红色字体是我碰到的问题，后来都解决了,大家可以查看是否遇到过。

这次的DEMO，主要解决了以下这些问题，或者说实现了以下的功能。

1.窗体的控制，只显示合适的窗体大小。
2.用户名从已经登陆用户中检查，是否已经存在同名的情况.ajax后台调用查找.
3.登录后主窗体显示，登陆窗体关闭
4.显示已经登录者，在线人数，可以发表信息
5.信息显示，发表消息，上线与下线，都感觉不到页面的刷新，ajax实现
6.滚动条的控制，有时需要看上面的消息，有时需要自动滚动，由你控制
7.点击退出时，关闭页面，其它窗体显示下线信息.

DEMO 的 ajax实现靠手工代码形式完成，页面布局和窗体定位也都是通过手写代码 css+div完成。


列出图片，说出主要功能实现以及流程
1.登陆页面,自动验证登陆名称是否被占用


2.登陆之后，登陆界面消失，聊天主界面消失掉。在线用户应该显示为 1人的，因为这是之前截取的，所以就没有修改。


3.再使用Simon lv这个名称就不行了，因为之前已经有这个用户。


4.换一个名字，就能登陆，登陆后的效果


5.多弄几个用户登陆进入


6.无刷新显示消息


7.张三退出后，聊天室信息显示离开，且在线人数马上发生改变


以上为图片部分，代码部分和流程部分看下面内容。

请求的首页为index.jsp
立马转向到 login.jsp,这时将自身关闭，打开 login.jsp页面时,改变打开的大小. 
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<html>
	<head>
		<script type="text/javascript">
			function openlogin(){
				window.open("login.jsp","","width=600px,height=460px");
				window.opener=null;
				this.close();
			}
		</script>
	</head>
	<body onload="openlogin()">
	</body>
</html>


中间的  window.opener=null; 不加的话，将会出现一个问题，就是在关闭 index.jsp自身时，会跳出一个提示框，提示是否需要关闭本页面，所以加上这句话就可以解决这个问题.

login.jsp中
检查用户是否存在部分 
<td >
							用户名:
						</td>
						<td >
							<input type="text" class="normalTxt" name="name" onblur="checkUserIsExits()">
						</td>


checkUserIsExits 函数异步请求另外的一个页面

login.jsp 
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<html>
	<head>
		<title>聊天室登录</title>
		<link rel="stylesheet" type="text/css" href="css/styles.css">
		<script language="javascript">
			function showMess(mess){
				document.getElementById("mess").innerHTML="<font color='red'>"+mess+"</font>";
			}
			//检查用户名是否登录
			function checkUserIsExits(){
				var objName = document.myform.name;
				
				if(objName.value==""){
					objName.focus();
					showMess("请输入用户名!");
					return;
				}else{
					for(var i=0;i<objName.value.length;i++){
						var ch = objName.value.charAt(i);
						if(ch=='<' || ch =='>' || ch=='-' || ch=='/' || ch=='\\'){
							objName.focus();
							showMess("不能含有<,>,-等特殊字符！");
							return;
						}
					}
				}
				var url = "checkUser.jsp?user="+objName.value;
				sendRequest(url);
			}
			
			//定义XMLHttpRequest对象
			var xmlRequest;
			//创建对象
			function createXMLHttpRequest(){
				if(window.XMLHttpRequest) { //Mozilla 浏览器
					xmlRequest = new XMLHttpRequest();
				}else if (window.ActiveXObject) { // IE浏览器
					try {
						xmlRequest = new ActiveXObject("Msxml2.XMLHTTP");
					} catch (e) {
						try {
							xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
						} catch (e) {}
					}
				}
			}
			
			//发送请求函数
			function sendRequest(url){
				createXMLHttpRequest(); //创建对象
				url=encodeURI(url); 
				url=encodeURI(url); 
				xmlRequest.open("GET",url,true);
				xmlRequest.onreadystatechange = checkResponse; //响应的函数
				xmlRequest.send(null);
			}
			
			//响应的函数
			function checkResponse(){
				if(xmlRequest.readyState==4){
					if(xmlRequest.status ==200) {
						//信息已经成功返回
						showloginInfo();
					}else{
						showMess("您所请求的页面有异常！");
					}
				}
			}
			
			//显示函数
			function showloginInfo(){
				//取得 checkUser.jsp返回的XML文本  
				var message = xmlRequest.responseXML.getElementsByTagName("userinfo")[0].firstChild.nodeValue;
				showMess(message);
				//因为之前解析XML 一直出现错误 所以改用了XML文本  先显示 后取出来
				if(message=="可以使用"){
					showMess("<font color='blue'>可以使用该名称！</font>");
					document.getElementById("sub").disabled=false; //使按钮可用
				}
			}
		</script>
	</head>
	<body>
		<div id="mainDiv">
			<form action="dologin.jsp" name="myform" method="post">
				<table align="left" width="300">
					<caption align="left"><font color="blue" size="6" face="隶书">o 蝈蝈岛聊天室 O</font></caption>
					<tr >
						<td >
							用户名:
						</td>
						<td >
							<input type="text" class="normalTxt" name="name" onblur="checkUserIsExits()">
						</td>
					</tr>
					
					<tr>
						<td colspan="2">
							<input type="submit" id="sub" class="normalBtn" value="登  录" disabled="true">
							&nbsp;
							<input type="reset" class="normalBtn" value="重  置">
							&nbsp;
						</td>
					</tr>
					<tr>
						<td colspan="2" align="right">
							<label id="mess">&nbsp;</label>
						</td>
					</tr>
					<tr>
						<td colspan="2">
						<br>
						<br>
						<br>
						Ajax 无刷新 简单多人聊天室DEMO,可到 <a href="http://lvp.iteye.com" target="_blank">http://lvp.iteye.com</a>下载
						&nbsp;&nbsp;&nbsp;	<a href="javascript:close()">退出</a></td>
					</tr>
				</table>
			</form>
		</div>
	</body>
</html>



注意，在login.jsp里面有一个函数 
//发送请求函数
			function sendRequest(url){
				createXMLHttpRequest(); //创建对象
				url=encodeURI(url); 
				url=encodeURI(url); 
				xmlRequest.open("GET",url,true);
				xmlRequest.onreadystatechange = checkResponse; //响应的函数
				xmlRequest.send(null);
			}


出现两次，为什么一定要加上两次，我也没有深究，在传递中文参数之前这样编码一下，
url=encodeURI(url);
url=encodeURI(url);
然后在请求到的处理页面做一些解码动作
name = URLDecoder.decode(name,"UTF-8");
中文问题就不存在，所以也没有为什么，只是这样做了，问题就解决了。
并且一定要注意，在ajax里操作的字符编码格式都是 UTF-8,所以统一起来就没有什么问题.
与login.jsp紧密相关的checkUser.jsp页面 
<%@ page language="java" pageEncoding="UTF-8"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.net.URLDecoder"%>
<%
	//获得参数 用户名
	String name = request.getParameter("user");
	//name = new String(name.getBytes("ISO-8859-1"),"UTF-8");
	name = URLDecoder.decode(name,"UTF-8");
	//System.out.print("检查用户输入的是:"+name);
	String responseText = "可以使用"; //响应字符串 
	//从application中取出所有已登录者的信息
	ArrayList<String> list = (ArrayList<String>)application.getAttribute("users");
	
	if(list!=null){
		for(String string:list){
			if(string.equals(name)){
				responseText = "这个名称已经被占用！";
				break;
			}
		}
	}
	
	//设置输出信息的格式及字符集 
	response.setContentType("text/xml; charset=UTF-8");
	response.setHeader("Cache-Control", "no-cache");
	out.print("<response>");
	out.print("<userinfo>");
	out.print(responseText);
	out.print("</userinfo>");
	out.print("</response>");
%>



流程:index.jsp 转到 login.jsp
login.jsp 中 
checkUser.jsp是用来查看用户是否存在的。
dologin.jsp 是用来处理登陆的。

dologin.jsp 有这几部分逻辑:
1.得到用户，放入到 session中
2.放入到 application中 
ArrayList<String> messageList = (ArrayList<String>)application.getAttribute("messages");
	
		if(messageList==null){
			messageList = new ArrayList<String>();
		}
		
		messageList.add("\n欢迎，欢迎，大家热列欢迎！"+name+" , 进入聊天室了.....\n");
		application.setAttribute("messages",messageList);


3.转向 
<script language="javascript">
			//显示新窗口
			function newchat(){
				location.href="main.jsp";
			}
		</script>
	</head>
	<body onload="newchat()">



聊天主页面 main.jsp 
<div id="contentDiv">
			<div id="titleDiv">
				<marquee direction="left" scrolldelay="200"><%=name%>..欢迎来到蝈蝈岛聊天室..o(∩_∩)o..
				</marquee>
			</div>
			<div id="chatDiv">
				<iframe src="chat.jsp" name="chat" frameborder="1" scrolling="auto"
					height="350px" width="470px">
				</iframe>
				<span id="divMess" style="width:240px;">请输入内容(100字以内)! </span>
				<div style="display:inline; text-align: right;width:200px"><a
					href="javascript:setAuto()">自动滚动</a>&nbsp;<a
					href="javascript:clearAuto()">取消滚动</a>
					&nbsp;<a href="dolayout.jsp">退出</a></div>
				<div>
					<textarea rows="3" cols="56" id="message" onclick="clearTxt()"></textarea>
				</div>
				<div style="text-align: right; padding-right: 0px;">
					<input type="button" value="确定" class="longBtn"
						onclick="sendMessage()">
				</div>
			</div>
			<div id="userDiv">
				<iframe src="user.jsp" name="userframe" frameborder="1" scrolling="auto"
					height="440px" width="110px">
				</iframe>
			</div>
		</div>


main.jsp的构成部分，是由 user.jsp和chat.jsp为主的页面构建起来的。
user.jsp是显示用户页面，chat.jsp是显示聊天信息显示页面，它们都是通过 iframe插入到 main.jsp中，但是在数据显示的处理方式上，我特意使用了两种方式。对于chat.jsp 中几乎没有什么内容 
<%@ page language="java" pageEncoding="GBK"%>

<html>
	<head>
		<style type="text/css">
			body{
				font-size:12px;
				margin:0px;
				line-height:18px;
				padding-left:5px;
				border:2px inset #eeebbb;
			}
		</style>
	</head>
	<body >
	</body>
</html>


但是 user.jsp中就不一样 
<%@ page language="java" pageEncoding="GBK"%>

<html>
	<head>
		<style type="text/css">
			body{
				font-size:12px;
				margin:0px;
				line-height:18px;
				padding-left:5px;
			}
		</style>
		<script language="javascript">
				//用户请求数据
			var xmlRequestUser;
			
			//创建对象
			function createXMLHttpRequest(){
				if(window.XMLHttpRequest) { //Mozilla 浏览器
					return new XMLHttpRequest();
				}else if (window.ActiveXObject) { // IE浏览器
					try {
						return new ActiveXObject("Msxml2.XMLHTTP");
					} catch (e) {
						try {
							return new ActiveXObject("Microsoft.XMLHTTP");
						} catch (e) {}
					}
				}
			}
			function sendGetUserRequest(){
				var url = "getUser.jsp";
				xmlRequestUser = createXMLHttpRequest();
				xmlRequestUser.open("GET",url,true);
				xmlRequestUser.onreadystatechange = getUserResponse;
				xmlRequestUser.send(null);
			}
			
			function getUserResponse(){
				if(xmlRequestUser.readyState==4){
					if(xmlRequestUser.status ==200) {
						//信息已经成功返回
						showUserInfo();
					}else{
						showMess("您所请求的页面有异常！");
					}
				}
			}
			
			function showUserInfo(){
				var message = xmlRequestUser.responseXML.getElementsByTagName("userinfo")[0].firstChild.nodeValue;
				document.body.innerText = message;
			}
			//每隔10秒读取一次新用户
			window.setInterval("sendGetUserRequest()",1000);
		</script>
	</head>
	<body onload="sendGetUserRequest()">
		
	</body>
</html>


这两者的区别在于:
1.user.jsp中自己发送请求,去请求 getUser.jsp 页面，自己显示。
2.chat.jsp只负责显示,请求部分是 main.jsp页面完成的，在main.jsp中调用chat.jsp页面来显示异步请求后返回的数据。

main.jsp中调用chat.jsp显示聊天信息的数据时，有这一部分代码 
	function showChatMessage(){
				var message = xmlRequest.responseXML.getElementsByTagName("message")[0].firstChild.nodeValue;
				document.frames("chat").document.body.innerText = message;
			}


document.frames("chat").document.body  就是来显示数据的。 


//每隔三秒钟查询一次
			window.setInterval("sendRequest('doinput.jsp')",1000);
			var id ;
			function setAuto(){
				id = setInterval("document.frames('chat').document.body.scrollTop=document.frames('chat').document.body.scrollHeight",1000);
			}
			function clearAuto(){
				clearInterval(id);
			}


后面两个方法，就是用来解决聊天室信息总显示最后一行的，可以让滚动条自动滚动，也可以取消自动滚动,这个解决方法，很多人都在找，希望能看到这里。

以上是一部分关键代码，具体内容还是下载附件，功能的实现都不难，就是要细心的做一件事情比较困难。

源码环境 jdk1.6 + myeclipse ,tomcat 即可,无数据库，代码自写亲测，放心下载！



注意：IE版本不同，打开的效果可能有不一样，例如首页一打开，在有的IE浏览器上一闪就马上关闭了，不能看到登陆页面，如果是这种情况，请查看 index.jsp页面的代码

  
function openlogin(){   
                window.open("login.jsp","","width=600px,height=460px");   
               //window.opener=null;//注释掉这句话就可以了 ,但是会冒出一个提示让你关闭index.jsp页面 
                this.close();   
            }


关于用户不是点击退出关闭连接退出聊天室，而是关闭窗体而退出聊天室，即时退出的效果已经解决，这个例子中没有写，但是之后就把这个功能实现了，给大家一个提示，实现起来也非常简单。

我下次可以在重新传一个上来。

提示就是：在关闭窗体 窗体卸载事件之前，使用xmlhttprequest对象发送一个请求到服务器端，清掉会话状态，且从application中清除此用户即可。


--- 关于上面的提示，我简单补充一下：关于窗体关闭的流程，不是单击关闭超级链接关闭，而是用户关闭浏览器时，触发事件，事件中请求服务器端清空用户即可。 
//事件
	window.onunload = closeWindow;
			
			function closeWindow(){
				if(confirm("确认要退出聊天室吗?")){
					//发送请求到客户端删除此用户
					clearUser();
				}else{
                                              //已经点击了关闭浏览器操作 ，如果不退出就重新打开一次就可以了
					window.open("main.jsp","","width=600px,height=460px");
				}
			}
			
			function clearUser(){
				var url = "dolayout.jsp";
				xmlRequest = createXMLHttpRequest(); //创建对象
				//状态改变
				xmlRequest.onreadystatechange = clearStatus;
				xmlRequest.open("GET",url,true);
				xmlRequest.send(null);  // 发送请求
			}



清空登录信息 清空用户 
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
	String user = (String)session.getAttribute("sessionuser");
	if(user==null){
		response.sendRedirect("index.jsp");
		return;
	}
	
	ArrayList<String> list = (ArrayList<String>)application.getAttribute("users");
	
	if(list!=null){
		for(String string:list){
			if(string.equals(user)){
				list.remove(string);
				application.setAttribute("users",list);
				break;
			}
		}
	}
	ArrayList<String> messageList = (ArrayList<String>)application.getAttribute("messages");
	
		if(messageList==null){
			messageList = new ArrayList<String>();
		}
		
	messageList.add("\n"+user+" , 离开聊天室了.....\n");
	application.setAttribute("messages",messageList);
		
	response.sendRedirect("index.jsp");
%>


例子重新上传一个吧！
大家如果要下载的话，就再去下载 20090412-ajax 无刷新聊天室-补充.rar
41
顶
2
踩
分享到：
| Ajax无刷新表格行内编辑源码带数据库
评论
5 楼 qsrock 2009-04-14  
不错！支持下！
4 楼 flyfan 2009-04-14  
不错，只要ui更漂亮就更讨人喜欢了
3 楼 arienya 2009-04-14  
挺好,继续努力.
2 楼 lvp 2009-04-13  
whaosoft 写道

呃 点错了进来的 不过支持你下吧啊


来的都是客！
1 楼 whaosoft 2009-04-13  
呃 点错了进来的 不过支持你下吧啊
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    php_ajax无刷新聊天室源码

    在网页应用中，实时交互性是提升用户体验的关键要素之一，而PHP_AJAX无刷新聊天室正是实现这一目标的典型技术组合。这里的“PHP”指的是服务器端的脚本语言，用于处理数据和业务逻辑；“AJAX”（Asynchronous ...

    jsp+ajax 无刷新聊天室

    【jsp+ajax 无刷新聊天室】是一种基于JavaServer Pages（JSP）技术和Ajax（Asynchronous JavaScript and XML）技术实现的在线实时交流平台。在这个聊天室中，用户无需手动刷新页面即可实时查看新消息，提高了用户...

    基于AJAX的无刷新聊天室

    【基于AJAX的无刷新聊天室】是一种利用Ajax技术实现的实时交互聊天系统，它无需用户手动刷新页面就能即时更新聊天内容，提升了用户体验。在Web 2.0时代，AJAX（Asynchronous JavaScript and XML）成为了构建动态、...

    基于Ajax的无刷新聊天室.zip

    **Ajax无刷新聊天室概述** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术通过在后台与服务器进行少量数据交换，实现了页面的异步更新，大大...

    Asp.Net基于Ajax的无刷新聊天室

    本项目将会实现以个基于Ajax的无刷新聊天室，其功能比较完善，主要特点如下： ·采用数据库记录在线用户及聊天信息； ·登录与注册融合，新用户无需专门注册，只要首次登录时所使用的用户名没有被别人注册可自动注册...

    ajax无刷新简单聊天室

    **Ajax无刷新简单聊天室详解** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，实现了页面的异步更新，大大提升...

    ajax无刷新聊天室源码--jsp版

    【Ajax无刷新聊天室源码解析】 Ajax（Asynchronous JavaScript and XML）无刷新技术是一种在不重新加载整个网页的情况下更新部分网页内容的技术。在本项目中，它被用于实现一个基于JSP（JavaServer Pages）的聊天室...

    asp.net+ajax实现无刷新聊天室

    无刷新聊天室的核心理念是利用Ajax（Asynchronous JavaScript and XML）技术，实现在不重新加载整个网页的情况下更新部分页面内容。AJAX允许前端和服务器进行异步通信，这使得用户在发送或接收消息时，无需等待整个...

    Ajax无刷新聊天室

    **Ajax无刷新聊天室**是一种...总结来说，"Ajax无刷新聊天室"的实现涉及前端的Ajax技术、JavaScript交互以及后端的数据库操作。通过这样的组合，能够创建出一个实时、高效的在线聊天环境，为用户提供流畅的沟通体验。

    AJAX无刷新聊天室

    【AJAX无刷新聊天室】是一种利用Ajax技术实现的在线实时交流平台，它允许用户在不刷新整个网页的情况下发送和接收消息，提升了用户体验。Ajax，全称Asynchronous JavaScript and XML，是通过JavaScript与服务器进行...

    Asp.Net Ajax无刷新聊天室

    【Asp.Net Ajax无刷新聊天室】是一种基于Asp.Net技术构建的实时交流平台，它利用Ajax（异步JavaScript和XML）技术实现了页面的无刷新更新，为用户提供流畅的交互体验。这种聊天室的设计旨在提高用户体验，使得用户在...

    ajax即时聊天程序,无刷新聊天室程序

    总结来说，"ajax即时聊天程序,无刷新聊天室程序"是运用Ajax技术和相关即时通信策略实现的一个高效、互动的在线聊天平台，它利用JavaScript、XMLHttpRequest对象以及可能的WebSocket或Server-Sent Events技术，确保...

    ajax无刷新多人聊天室下载

    【标题】：“Ajax无刷新多人聊天室下载” Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使得网页实现异步更新，...

    ASP+AJAX 无刷新聊天室

    ASP+AJAX 无刷新聊天室是一种利用Active Server Pages (ASP) 和Asynchronous JavaScript and XML (AJAX) 技术实现的实时交互式聊天应用程序。在这个系统中，用户无需手动刷新页面就能接收到新消息，提高了用户体验。...

    AJAX无刷新聊天室技术

    传统的聊天室基于客户端网页的自动刷新技术而实现，它的主要缺点是不断刷新页面造成屏幕的闪动，而经过了Ajax改造后的聊天室，每次只获取最新的发言信息，并将获取结果动态写入页面，不会有以上的缺点 ………………...

    一个优秀的基于ASP.NET+ajax实现的无刷新版本聊天室系统源码

    这是一个基于ASP.NET技术框架，并利用AJAX无刷新技术构建的聊天室系统源码。这个系统的核心特点是提供了一个实时通信的平台，用户可以在不刷新整个页面的情况下进行互动交流，提升了用户体验。 首先，我们来分析...

    基于Ajax的无刷新聊天室.rar

    在这个"基于Ajax的无刷新聊天室"项目中，我们将深入探讨如何利用Ajax实现这一功能。 首先，我们需要一个后台系统来处理用户信息和聊天记录。这里可以采用Java或PHP作为后端开发语言。Java提供了强大的Servlet和JSP...

    ASP+AJAX实现聊天室(无刷新)

    【ASP+AJAX实现聊天室(无刷新)】 在互联网应用中，实时交互性是提升用户体验的关键因素之一。"ASP+AJAX实现聊天室(无刷新)"是一个利用这两种技术构建的实时在线聊天平台，它允许用户在不刷新页面的情况下进行即时...

    ajax+asp无刷新聊天室

    **Ajax+ASP无刷新聊天室**是Web开发中一种实现实时通信的技术应用，它结合了Ajax（Asynchronous JavaScript and XML）和ASP（Active Server Pages）技术，为用户提供了一个无需刷新页面即可更新信息的聊天环境，类似...

    AJAX无刷新聊天室 带实例数据库

    实现了以下的功能。...5.信息显示，发表消息，上线与下线，都感觉不到页面的刷新，ajax实现 6.滚动条的控制，有时需要看上面的消息，有时需要自动滚动，由你控制 7.点击退出时，关闭页面，其它窗体显示下线信息.

Magicbox
Global site tag (gtag.js) - Google Analytics