聊天室主页面

最新推荐文章于 2022-12-14 10:20:53 发布

zyuanq

最新推荐文章于 2022-12-14 10:20:53 发布

阅读量214

点赞数

分类专栏： Java基础文章标签： .net JSP prototype Ajax 浏览器

本文链接：https://blog.csdn.net/zyuanq/article/details/83643452

版权

Java基础专栏收录该内容

66 篇文章 0 订阅

订阅专栏

<%@ page contentType="text/html; charset=gbk" language="java" import="java.sql.*" %>
<%@ include file="safe.jsp"%>
<% request.setCharacterEncoding("gbk"); 
int maxTime=50*60*1000;		//设置5分钟不说话，将其踢出聊天室
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>聊天室</title>
<link href="CSS/style.css" rel="stylesheet">
<script language="javascript" src="JS/AjaxRequest.js"></script>
<script language="javascript">
window.setInterval("showContent();",1000); 
window.setInterval("showOnline();",10000); 
var sysBBS="<span style='font-size:14px; line-height:30px;'>欢迎光临y元元世界，请遵守聊天室规则，不要使用不文明用语。</span><br><span style='line-height:22px;'>";
//此处需要加?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("MessagesAction?action=getMessages&nocache="+new Date().getTime(),deal_content,onerror,"GET");
}
function onerror(){
	alert("很抱歉，服务器出现错误，当前窗口将关闭！");
	window.opener=null;
	window.close();
}
function deal_online(){
	online.innerHTML=this.req.responseText;
}
function deal_content(){
	var returnValue=this.req.responseText;		//获取Ajax处理页的返回值
	var h=returnValue.replace(/\s/g,"");	//去除字符串中的Unicode空白符
	if(h=="error"){
		//alert("您的账户已经过期，请重新登录！");
		Exit();
	}else{
		content.innerHTML=sysBBS+returnValue+"</span>";
	}
}
//控制是否滚屏
function checkScrollScreen(){
	if(!form1.scrollScreen.checked){
		document.getElementById("content").style.overflow='scroll';
		//document.getElementById('content').scrollTop = document.getElementById('content').scrollHeight*2;
		//setTimeout('checkScrollScreen()',500);
	}else{
		document.getElementById("content").style.overflow='hidden';
		document.getElementById('content').scrollTop = document.getElementById('content').scrollHeight*2;	//当聊天信息超过一屏时，设置最先发送的聊天信息不显示
	}
	setTimeout('checkScrollScreen()',500);
}
window.onload=function(){
	checkScrollScreen();				//当页面载入后控制是否滚屏
	showContent();						//当页面载入后显示聊天内容
	showOnline();						//当页面载入后显示在线人员列表
}
</script>
<script language="javascript">
<!--
	function send(){	//验证聊天信息并发送
		if(form1.to.value==""){
			alert("请选择聊天对象！");return false;
		}
		if(form1.content1.value==""){
			alert("发送信息不可以为空！");form1.content1.focus();return false;
		}
		if(form1.isPrivate.checked){
			isPrivate="true";
		}else{
			isPrivate="false";
		}
		var param="from="+form1.from.value+"&face="+form1.face.value+"&color="+form1.color.value+"&to="+form1.to.value+"&content="+	form1.content1.value+"&isPrivate="+isPrivate; 
		var loader=new net.AjaxRequest("MessagesAction?action=sendMessage",deal_send,onerror,"POST",param);

	}
function deal_send(){
content.innerHTML=sysBBS+this.req.responseText+"</span>";
	if(form1.scrollScreen.checked){
		document.getElementById('content').scrollTop = document.getElementById('content').scrollHeight*2;	//当聊天信息超过一屏时，设置最先发送的聊天信息不显示
	}
	//重新计时
	clearTimeout(timer);
	timer = window.setTimeout("Exit()",<%=maxTime%>); 
	form1.content1.value="";
}	
	function Exit(){
		window.location.href="leave.jsp";
		alert("欢迎您下次光临！");
	}
-->
</script>
<script language="javascript">
function set(selectPerson){	//自动添加聊天对象
	if(selectPerson!="<%=session.getAttribute("username")%>"){
		if(form1.isPrivate.checked && selectPerson=="所有人"){
			alert("请选择私聊对象！");
		}else{
			form1.to.value=selectPerson;
		}
	}else{
		alert("请重新选择聊天对象！");
	}
}
function checkIsPrivate(){
	if(form1.isPrivate.checked){
		if(form1.to.value=="所有人"){	
			alert("请选择私聊对象！");
			form1.to.value="";
		}

	}	
}
</script>
<script language="jscript"> 
timer = window.setTimeout("Exit()",<%=maxTime%>); 		//用于当用户长时间不说话时，将其踢出聊天室

window.onbeforeunload=function(){   //当用户单击浏览器中的“关闭”按钮时，执行退出操作
	if(event.clientY<0 && event.clientX>document.body.scrollWidth){  
	 	Exit();		//执行退出操作
	}   
}   
</script> 
</head>
<body>
<table width="778" height="152" border="0" align="center" cellpadding="0" cellspacing="0" background="images/top.jpg">
  <tr>
    <td> </td>
  </tr>
</table>
<table width="778" height="276" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="165" valign="top" bgcolor="#F7FDED" id="online" style="padding:5px">在线人员列表</td>
    <td width="613"  height="200px" valign="top" bgcolor="#FFFFFF" style="padding:5px; ">
	<div style="height:290px; overflow:hidden" id="content">聊天内容</div>
	</td>

  </tr>
</table>
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#D6D3CE" bgcolor="#D1E9AA">
<form action="" name="form1" method="post" >
  <tr>
    <td height="30" align="left"> </td>
    <td height="37" align="left"><input name="from" type="hidden" value="<%=session.getAttribute("username")%>">[<%=session.getAttribute("username")%> ]对
      <input name="to" type="text" value="" size="35" readonly="readonly">
表情
<select name="face" class="wenbenkuang">
  <option  value="无表情的">无表情的</option>
  <option value="微笑着" selected>微笑着</option>
  <option value="笑呵呵地">笑呵呵地</option>
  <option value="热情的">热情的</option>
  <option value="温柔的">温柔的</option>
  <option value="红着脸">红着脸</option>
  <option value="幸福的">幸福的</option>
  <option value="嘟着嘴">嘟着嘴</option>
  <option value="热泪盈眶的">热泪盈眶的</option>
  <option value="依依不舍的">依依不舍的</option>
  <option value="得意的">得意的</option>
  <option value="神秘兮兮的">神秘兮兮的</option>
  <option value="恶狠狠的">恶狠狠的</option>
  <option value="大声的">大声的</option>
  <option value="生气的">生气的</option>
  <option value="幸灾乐祸的">幸灾乐祸的</option>
  <option value="同情的">同情的</option>
  <option value="遗憾的">遗憾的</option>
  <option value="正义凛然的">正义凛然的</option>
  <option value="严肃的">严肃的</option>
  <option value="慢条斯理的">慢条斯理的</option>
  <option value="无精打采的">无精打采的</option>
</select>
说： 悄悄话
<input name="isPrivate" type="checkbox" class="noborder" id="isPrivate" value="true" onClick="checkIsPrivate()">
滚屏
<input name="scrollScreen" type="checkbox" class="noborder" id="scrollScreen" onClick="checkScrollScreen()" value="1" checked></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:#ff00ff" value="ff00ff">桃色浪漫</option>
        <option style="color:#009900" value="009900">绿色青春</option>
        <option style="color:#009999" value="009999">青色清爽</option>
        <option style="color:#990099" value="990099">紫色拘谨</option>
        <option style="color:#990000" value="990000">暗夜兴奋</option>
        <option style="color:#000099" value="000099">深蓝忧郁</option>
        <option style="color:#999900" value="999900">卡其制服</option>
        <option style="color:#ff9900" value="ff9900">镏金岁月</option>
        <option style="color:#0099ff" value="0099ff">湖波荡漾</option>
        <option style="color:#9900ff" value="9900ff">发亮蓝紫</option>
        <option style="color:#ff0099" value="ff0099">爱的暗示</option>
        <option style="color:#006600" value="006600">墨绿深沉</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="content1" type="text" size="70" onKeyDown="if(event.keyCode==13 && event.ctrlKey){send();}">
      <input name="Submit2" type="button" class="btn_blank" value="发送" onClick="send()"></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 2008 元元世界</td>
    <td align="center"> </td>
  </tr>
</form>
</table>
</body>
</html>

-------------------------------------------------------------------------------------

var net=new Object();		//定义一个全局变量net
//编写构造函数
net.AjaxRequest=function(url,onload,onerror,method,params){
  this.req=null;
  this.onload=onload;
  this.onerror=(onerror) ? onerror : this.defaultError;
  this.loadDate(url,method,params);
}
//编写用于初始化XMLHttpRequest对象并指定处理函数，最后发送HTTP请求的方法
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);
	  if(method=="POST"){
		this.req.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
	  }
      this.req.send(params);
    }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("错误数据\n\n回调状态:"+this.req.readyState+"\n状态: "+this.req.status);
}

zyuanq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
聊天室主页面

[code="jsp"]聊天室window.setInterval("showContent();",1000); window.setInterval("showOnline();",10000); var sysBBS="欢迎光临y元元世界，请遵守聊天室规则，不要使用不文明用语。";//此处需要加?nocache="+new Date().g...
复制链接

扫一扫