ajax聊天室
1 消息的接收
ajax/talk
1.获取服务器消息
window.onload = function() {
//每隔2秒获取消息
setInterval(GetMsg, 2000);
};
//获取信息
function GetMsg() {
var xhr = new XMLHttpRequest();
var msg = document.getElementById('show_msg');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var s = '';
s = xhr.responseText;
//将json转换为对象
s = eval('var info = ' + s);
s = '';
//拼接
for(var i=0;i < info.length;i++)
{
s += "<p style=color:"+info[i].color+">"+info[i].sender+' 对 ';
s += info[i].receiver;
s += info[i].biaoqing + ' 说： ';
s += info[i].msg + '(' + info[i].add_time + ')' + '<br>';
}
msg.innerHTML += s;
}
};
xhr.open('get', 'index.php');
xhr.send(null);
}- PHP文件获取消息内容并转换为json格式
<?php
//echo '响应成功';
//读取数据库信息
//这里连接数据库
$Mysqli = mysqli_connect('localhost','root','','test'); //设置字符集
$Mysqli->query('SET NAMES utf8');
//sql语句
$sql = 'SELECT * FROM message';
$res = $Mysqli->query($sql);
$arr = [];
while ($row = $res->fetch_assoc())
{
$arr[] = $row;
}
$rows = json_encode($arr);
echo $rows;2.获取新消息
每隔两秒获取后会获得同样的消息附加，所以需要获取每次获取的最大id，并做为下一次获取的条件。
- 1.在函数外定义一个全局变量MaxId接收消息的最大Id
//获取信息
var MaxId = 0;- 2.在循环中获取最大id
//获取最大id
MaxId = info[i].id;- 3.将id作为参数传递到服务器
//将其作为参数传递出去
xhr.open('get','index.php?MaxId='+MaxId);3.无刷新发送消息
- 1.利用FormData收集表单中的信息
- 2.将发送结果显示到发送按键之后，并在两秒后消失
<script>
//找到表单
var fm = document.getElementById('send_msg'); fm.onsubmit = function(event)
{
//收集信息
var fd = new FormData(fm);
//ajax请求
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function()
{
if(xhr.readyState==4)
{
if(xhr.responseText)
{
var send_res = document.getElementById('send_res');
send_res.innerHTML = '发送成功';
setTimeout(set,2000);
function set()
{
send_res.innerHTML='';
}
}
else
{
var send_res = document.getElementById('send_res');
send_res.innerHTML = '发送失败';
setTimeout(set,2000);
function set()
{
send_res.innerHTML='';
}
}
}
};
xhr.open('post','insert.php');
xhr.send(fd);
//阻止原来的动作
//主流浏览器 if(event.preventDefault)
{
event.preventDefault();
}
//非主流
else
{
event.returnValue = 'false';
}
}; </script>- 3.服务器端接收消息并插入数据
<?php
//这里连接数据库
$Mysqli = mysqli_connect('localhost','root','','test');
//设置字符集
$Mysqli->query('SET NAMES utf8');
//获取接收到的信息
//var_dump($_POST);
$sender = $_POST['sender'];
$receiver = $_POST['receiver'];
$biaoqing = $_POST['biaoqing'];
$color = $_POST['color'];
$msg = $_POST['msg'];
//插入语句
$i_sql = "INSERT INTO message VALUES(default,'".$msg."','".$sender."','".$receiver."','".$color."','".$biaoqing."',now());";
if($Mysqli->query($i_sql))
{
echo true;
}
else
{
echo false;
}- 4.消息增多，给消息展示区增加滚动条展示消息
<style type="text/css">
#show_msg{height:328px;overflow: auto;}
</style>4.优化完善
- 1.将发送区域置空
即发送消息后，将所有选项还原
<script>
function reset()
{
var color = document.getElementById('color');
var biaoqing = document.getElementById('biaoqing');
var receiver = document.getElementById('receiver');
var msg = document.getElementById('msg');
color.value = '';
biaoqing.value = '';
receiver.value = '';
msg.value = '';
}
</script>- 已将添加id的过程跳过，如有异议，后边已经给出源码
- 2.将滚动条置底
//更新完消息将滚动条置底
msg.scrollTop = msg.scrollHeight-msg.style.height;- 由于只是简单的聊天室，没有制作用户表。
最后
- 客户端源码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>qk网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" style="text/css" href="./css/talk.css" />
<script type="text/javascript">
</script>
<style type="text/css">
#show_msg{height:328px;overflow: auto;}
</style>
</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="刷新名单" ></li>
<li><input type="button" value="刷新屏幕" ></li>
<li><input type="button" value="退出聊天" ></li>
</ul>
</div>
<div id="right">
<div id="content">
<h2 id="content-title">有什么意见和建议欢迎大家踊跃提出</h2>
<hr />
<div id="show_msg">
<p style="color:red">PHP爱好者聊天室公告：欢迎恶魔来到聊天室(22:05:35)</p>
<p>恶魔 对 大家 微笑 说：对啊(22:05:35)</p>
<p>恶魔 对 大家 微笑 说：对啊(22:05:35)</p>
<p style="color:#800080">恶魔 对 大家 微笑 说：好久不见了啊(22:05:35)</p>
<p style="color:red">PHP爱好者聊天室公告：欢迎天使来到聊天室(22:05:35)</p>
<p>天使 对 大家 微笑 说：你来了啊(22:05:35)</p>
</div>
</div>
<div id="send">
<form id="send_msg">
<div id="control">
颜色：
<select name="color" id="color">
<option value="">请选择</option>
<option style="color:#FF8888" value="#FF8888">爱的暗示</option>
<option style="color:#00BBFF" value="#00BBFF">忧郁的蓝</option>
<option style="color:#0000FF" value="#0000FF">碧空蓝天</option>
<option style="color:#9F88FF" value="#9F88FF">灰蓝种族</option>
<option style="color:#000088" value="#000088 ">蔚蓝海洋</option>
<option style="color:#77FFEE" value="#77FFEE">清清之蓝</option>
<option style="color:#4400B3" value="#4400B3">发亮篮紫</option>
<option style="color:#A500CC" value="#A500CC">紫的拘谨</option>
<option style="color:#B088FF" value="#B088FF">卡其制服</option>
<option style="color:#D1BBFF" value="#D1BBFF">伦敦灰雾</option>
<option style="color:#DC143C" value="#DC143C">卡布其诺</option>
<option style="color:#A52A2A" value="#A52A2A">苦涩心红</option>
<option style="color:#FF0000" value="#FF0000">正宗喜红</option>
<option style="color:#990099" value="#990099">红的发紫</option>
<option style="color:#FF0000" value="#FF0000">红旗飘飘</option>
<option style="color:#D2691E" value="#D2691E ">黄金岁月</option>
<option style="color:#800080" value="#800080">紫金绣贴</option>
<option style="color:#006400" value="#006400">橄榄树绿</option>
<option style="color:#000000" value="#000000">绝对黑色</option>
</select>
表情：
<select name="biaoqing" id="biaoqing">
<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>
<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>
聊天对象：
<select name="receiver" id="receiver">
<option value="">所有的人</option>
<option value="恶魔">恶魔</option>
<option value="甜甜">甜甜</option>
<option value="诸葛">诸葛</option>
<option value="成就梦想">成就梦想</option>
<option value="郁金香">郁金香</option>
</select>
<br />
<input type="hidden" name="sender" value="admin">
<textarea id="msg" name="msg"></textarea>
<input type="submit" value="发送" />
<span id="send_res"></span>
</form>
</div>
</div>
</div>
</div>
</body>
<!--还原表单-->
<script>
function reset()
{
var color = document.getElementById('color');
var biaoqing = document.getElementById('biaoqing');
var receiver = document.getElementById('receiver');
var msg = document.getElementById('msg');
color.value = '';
biaoqing.value = '';
receiver.value = '';
msg.value = '';
}
</script>
<!--发送消息-->
<script>
//找到表单
var fm = document.getElementById('send_msg');
fm.onsubmit = function(event)
{
//收集信息
var fd = new FormData(fm);
//ajax请求
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function()
{
if(xhr.readyState==4)
{
if(xhr.responseText)
{
var send_res = document.getElementById('send_res');
send_res.innerHTML = '发送成功';
reset();
setTimeout(set,2000);
function set()
{
send_res.innerHTML='';
}
}
else
{
var send_res = document.getElementById('send_res');
send_res.innerHTML = '发送失败';
setTimeout(set,2000);
function set()
{
send_res.innerHTML='';
}
}
}
};
xhr.open('post','insert.php');
xhr.send(fd);
//阻止原来的动作
//主流浏览器
if(event.preventDefault)
{
event.preventDefault();
}
//非主流
else
{
event.returnValue = 'false';
}
};
</script>
<!--接收消息-->
<script>
window.onload = function ()
{
//每隔2秒获取消息
GetMsg();
setInterval(GetMsg,2000);
};
//获取信息
var MaxId = 0;
function GetMsg()
{
var xhr = new XMLHttpRequest();
var msg = document.getElementById('show_msg');
xhr.onreadystatechange = function ()
{
if(xhr.readyState==4)
{ var s = '';
s = xhr.responseText;
s = eval('var info = '+s);
s = '';
for(var i=0;i < info.length;i++)
{
s += "<p style=color:"+info[i].color+">"+info[i].sender+' 对 ';
s += info[i].receiver;
s += info[i].biaoqing+' 说： ';
s += info[i].msg+'('+info[i].add_time+')'+'</p>';
//获取最大id
MaxId = info[i].id;
}
msg.innerHTML += s;
//更新完消息将滚动条置底
msg.scrollTop = msg.scrollHeight-msg.style.height;
}
};
//将其作为参数传递出去
xhr.open('get','index.php?MaxId='+MaxId);
xhr.send(null);
}
</script>
</html>- 服务器端
- index.php
<?php
//echo '响应成功';
//读取数据库信息
//这里连接数据库
$Mysqli = mysqli_connect('localhost','root','','test');
//设置字符集
$Mysqli->query('SET NAMES utf8');
//获取最大id
$MaxId = isset($_GET['MaxId'])?$_GET['MaxId']:0;
//sql语句
$sql = 'SELECT * FROM message WHERE id >'.$MaxId;
$res = $Mysqli->query($sql);
$arr = [];
while ($row = $res->fetch_assoc())
{
$arr[] = $row;
}
$rows = json_encode($arr);
echo $rows;- insert.php
<?php
//这里连接数据库
$Mysqli = mysqli_connect('localhost','root','','test');
//设置字符集
$Mysqli->query('SET NAMES utf8');
//获取接收到的信息
//var_dump($_POST);
$sender = $_POST['sender'];
$receiver = $_POST['receiver'];
$biaoqing = $_POST['biaoqing'];
$color = $_POST['color'];
$msg = $_POST['msg'];
//插入语句
$i_sql = "INSERT INTO message VALUES(default,'".$msg."','".$sender."','".$receiver."','".$color."','".$biaoqing."',now());";
if($Mysqli->query($i_sql))
{
echo true;
}
else
{
echo false;
}
- 数据表
2064
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
