ajax无刷新聊天室系统

最新推荐文章于 2021-02-06 22:40:25 发布

BUS375

最新推荐文章于 2021-02-06 22:40:25 发布

阅读量721

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/bbs375/article/details/52414954

版权

Ajax 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
	<title>ajax</title>
	<link rel="stylesheet" href="./css/talk.css" type="text/css"/>
	<style type="text/css">
	</style>
	<script type="text/javascript">
		var maxID = 0;
		 function showmessage(){
				//收集表单信息
				//ajax负责把收集好的信息传递给服务器
				var xhr = new XMLHttpRequest();

				xhr.onreadystatechange = function(){

					if(xhr.readyState==4){
						//alert(xhr.responseText);
						eval("var info="+xhr.responseText);
						//alert("hello");
						//alert(typeof info);
						var s = "";

						for (var i = 0; i < info.length; i++) {
							s += "<p style='color:"+info[i].color+"'>";
							s += info[i].sender+" 对 "+info[i].receiver+" ";
							s += info[i].expression+" "+info[i].msg+"("+info[i].add_time+")</p>";
							//把已经获得记录的id赋值给，maxID
							maxID = info[i].id;
						}
						var showmsg = document.getElementById("show_msg");
						showmsg.innerHTML+=s;
						//设置滚动条卷起的高度,保证滚动条始终在最下边显示
						showmsg.scrollTop=showmsg.scrollHeight;

					}
				}
				xhr.open('get','./data.php?maxID='+maxID);
				//使用FormData无需设置header头
				//xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
				xhr.send();
				//阻止浏览器默认动作 跳转
				return false;
		}
		window.onload = function(){
			showmessage();//获取初始聊天记录
			setInterval("showmessage()", 2000);//获得最新聊天记录
			
		}
	</script>
</head>
<body>
<div id="main">
	<div id="left">
		<h2>在线名单：5人</h2>
		<ul id="user">
			<li>帅哥：恶魔</li>
			<li>靓妹：甜甜</li>
			<li>帅哥：诸葛</li>
			<li>靓妹：红玫瑰</li>
			<li>帅哥：小明</li>
		</ul>
		<ul id="anniu">
			<li><input type="button" value="刷新名单"></input></li>
			<li><input type="button" value="刷新屏幕"></input></li>
			<li><input type="button" value="退出聊天"></input></li>
		</ul>
	</div>
	<div id="right">
		<div id="content">
			<h2 id="content_title">有什么意见和建议欢迎大家踊跃提出</h2>
			<hr/>
			<div id="show_msg">
				<p style="color: red">PHP爱好者聊天室公告：欢迎来到聊天室</p>
			</div>
		</div>
	<div id="send">
		<form>
			<div id="control">
				颜色:<select name="color">
					<option value="">请选择</option>
					<option style="color: #FF8888" value="#FF8888">爱的暗示</option>
					<option style="color: #00BBFF" value="#00BBFF">忧郁的蓝</option>
				</select>
				表情:<select name="expression">
					<option value="">请选择</option>
					<option value="笑着">笑着</option>
					<option value="幸福">幸福</option>
				</select>
				聊天对象:<select name="receiver">
						<option value="">所有的人</option>
						<option value="小明">小明</option>
						<option value="小兰">小兰</option>
				</select>
				<br/>
				<textarea id="msg" name="msg"></textarea>
				<input type="button" value="发送"  οnclick="sendmsg()"></input>
				<span id="sendresult"></span>
			</div>
		</form>
	</div>
</div>
</div>
</body>	
</html>
<script type="text/javascript">
	function sendmsg(){
		var fm = document.getElementsByTagName('form')[0];
		var fd = new FormData(fm);
		var xhr = new XMLHttpRequest();
				xhr.onreadystatechange = function(){
					if(xhr.readyState==4){
						//alert(xhr.responseText);
						document.getElementById("sendresult").innerHTML=xhr.responseText;
						//表单域信息归位
						document.getElementsByTagName("select")[0].value="";
						document.getElementsByTagName("select")[1].value="";
						document.getElementsByTagName("select")[2].value="";
						document.getElementById("msg").value="";
						setTimeout("hideresult()", 2500);
					}
				}
				xhr.open('post','./send.php');
				//使用FormData无需设置header头
				//xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
				xhr.send(fd);
				//阻止浏览器默认动作 跳转
				return false;
		}
		function hideresult(){
			document.getElementById("sendresult").innerHTML="";
		}
</script>

talk.css

*{margin:0;padding: 0;border: 0;}
#main{width: 900px;height: 500px;background: pink;margin: auto;margin-top:10px; }
#left{width: 200px;height: 500px;background: #F5DEB3;float: left;}
#right{width: 700px;height: 500px;background: rgb(206,263,49);float:left;}
#content {height: 379px;padding-top:1px;}
#send{height: 120px;background: rgb(51,175,234);}
#control{position: relative;left: 75px;top: 18px;}
select,textarea{border: 1px solid gray;}
#msg{width: 410px;height: 52px; margin-top: 5px;}
#content_title{color: green;font-size: 14px;width: 245px;margin: 10px auto;}
hr{border: 1px solid gray; width: 600px;margin: auto;}
#show_msg{width: 600px;margin-left: 47px;margin-top: 10px;font-size: 14px;font-weight: bold;height: 326px;overflow: auto;}
#left h2{color:#8B4513;font-size:14px;position: relative;left: 36px;top: 24px;width: 150px;}
#left #user{position: relative;top: 46px;left: 48px;}
ul {font-size: 12px;list-style: none;width: 110px;}
#anniu {margin-top: 280px;margin-left: 50px;}
#anniu input{margin-top: 3px;width: 98px;height: 30px;background: #CD853F;color: white;border: 2px solid white; }

数据库sql语句

CREATE TABLE message (
id INT UNSIGNED NOT NULL AUTO_INCREMENT,
msg VARCHAR(32) NOT NULL,
sender VARCHAR(6) NOT NULL,
receiver VARCHAR(6) NOT NULL,
color VARCHAR(10) NOT NULL,
expression VARCHAR(10) NOT NULL,
add_time date,
PRIMARY KEY(id));

服务器

data.php

<?php
$link = mysql_connect('localhost','root','newpassword');
mysql_select_db('talk',$link);
mysql_query('set names utf8');
//每次请求最新的聊天记录已经获取的不再获取避免重复
//本次请求的记录结果id需要大于上次已经获取记录的最大id
$maxID = $_GET['maxID'];
$sql = "select * from message where id > $maxID";
$qry = mysql_query($sql);

$info = array();

while ($rst = mysql_fetch_assoc($qry)) {
	# code...
	$info[]=$rst;
}

echo json_encode($info);
//接收表单信息并存储
//print_r($_POST);
?>

send.php

<?php
$link = mysql_connect('localhost','root','newpassword');
mysql_select_db('talk',$link);
mysql_query('set names utf8');
//每次请求最新的聊天记录已经获取的不再获取避免重复
//本次请求的记录结果id需要大于上次已经获取记录的最大id

//接收表单信息并存储
//print_r($_POST);
$msg = $_POST['msg'];
$color = $_POST['color'];
$expression = $_POST['expression'];
$receiver = $_POST['receiver'];
$sql = "insert into message values(null,'$msg','admin','$receiver','$color','$expression',now())";
if(mysql_query($sql))
	{
		echo "发表留言成功";
	}else{
		echo "发表留言失败";
	}
?>