本篇文章主要讲解php+ajax搭建简易聊天室实践，文中有关php，ajax的内容，有需要的小伙伴参考下。
index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</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">
var maxID = 0;
//获取最新的聊天消息
function showmsg(){
//ajax去获取
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
eval("var jn_info="+xhr.responseText);
//<p style="color:#800080">恶魔 对 大家 微笑 说：好久不见了啊(22:05:35)</p>
var s = "";
for(var i=0; i<jn_info.length; i++){
s += "<p style='color:"+jn_info[i].color+"'>"+jn_info[i].sender+" 对 ";
s += jn_info[i].receiver+" "+jn_info[i].biaoqing+" 说：";
s += jn_info[i].msg+"("+jn_info[i].add_time+")</p>";
//把已经获取的最大id值赋予给maxID
maxID = jn_info[i].id;
}
var hm =document.getElementById('show_msg');
hm.innerHTML += s;
//设置div滚动条卷起高度,该高度要随着内容增多有自适应效果。(设置div有滚动条：css： height:327px; overflow:auto;)
hm.scrollTop = hm.scrollHeight; //滚动条始终在最下方。scrolltop表示滚动条卷起的高度，scrollheight是整个div的高度。
}
}
xhr.open('get','./data.php?maxID='+maxID);
xhr.send(null);
}
//页面加载完毕就要显示最新聊天消息
window.onload = function(){
//每间隔2s就执行一次
setInterval("showmsg()",2000);
}
</script>
<style type="text/css">
</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>
<div id="control">
颜色：
<select id="color" name="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 id="biaoqing" name="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 id="receiver" name="receiver">
<option value="">所有的人</option>
<option value="恶魔">恶魔</option>
<option value="甜甜">甜甜</option>
<option value="诸葛">诸葛</option>
<option value="成就梦想">成就梦想</option>
<option value="郁金香">郁金香</option>
</select>
<br />
<textarea id="msg" name="msg"></textarea>
<input type="button" value="发送" onclick="sendmsg()" />
<span id="result"></span>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
function sendmsg(){
//发表聊天消息 FormData+Ajax合作
var fm = document.getElementsByTagName('form')[0];
var fd = new FormData(fm);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
document.getElementById('result').innerHTML = xhr.responseText;
//表单域信息归位
document.getElementById('color').value="";
document.getElementById('biaoqing').value="";
document.getElementById('receiver').value="";
document.getElementById('msg').value="";
//"留言成功"标志归位,2s后归位
setTimeout("guiflag()",2000);
}
}
xhr.open('post','./send.php');
xhr.send(fd);
}
//"留言成功"标志归位
function guiflag(){
document.getElementById('result').innerHTML = "";
}
</script>data.php（后端，从数据库获取所有聊天信息）:
<?php
//随时获取最新的聊天消息
$link = mysql_connect('localhost','root','123456');
mysql_select_db('shop0811',$link);
mysql_query('set names utf8');
$maxID = $_GET['maxID'];
//获取聊天消息,根据maxID做限制查询获取(避免获取重复消息)
$sql = "select * from message where id>".$maxID;
$qry = mysql_query($sql);
$info = array();
while($rst = mysql_fetch_assoc($qry)){
$info[] = $rst;
}
//把数据组织为二维数组
//把最新的聊天信息通过json格式提供出来
echo json_encode($info);send.php（后端，将发送的聊天记录存入数据库）:
<?php
//发表聊天消息，服务器端
$link = mysql_connect('localhost','root','123456');
mysql_select_db('shop0811',$link);
mysql_query('set names utf8');
$msg = $_POST['msg'];
$receiver = $_POST['receiver'];
$color = $_POST['color'];
$biaoqing = $_POST['biaoqing'];
$sql = "insert into message values (null,'$msg','admin','$receiver','$color','$biaoqing',now())";
if(mysql_query($sql)){
echo "发表留言成功！";
}else{
echo "发表留言失败！";
}talk.css（引入的外部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:327px;
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;}相关推荐：
以上是PHP Ajax搭建简易聊天室的详细内容。更多信息请关注PHP中文网其他相关文章！
声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
超越炒作：评估当今PHP的角色Apr 12, 2025 am 12:17 AMPHP在现代编程中仍然是一个强大且广泛使用的工具，尤其在web开发领域。1)PHP易用且与数据库集成无缝，是许多开发者的首选。2)它支持动态内容生成和面向对象编程，适合快速创建和维护网站。3)PHP的性能可以通过缓存和优化数据库查询来提升，其广泛的社区和丰富生态系统使其在当今技术栈中仍具重要地位。
PHP中的弱参考是什么？什么时候有用？Apr 12, 2025 am 12:13 AM在PHP中，弱引用是通过WeakReference类实现的，不会阻止垃圾回收器回收对象。弱引用适用于缓存系统和事件监听器等场景，需注意其不能保证对象存活，且垃圾回收可能延迟。
解释PHP中的__ Invoke Magic方法。Apr 12, 2025 am 12:07 AM\_\_invoke方法允许对象像函数一样被调用。1.定义\_\_invoke方法使对象可被调用。2.使用$obj(...)语法时，PHP会执行\_\_invoke方法。3.适用于日志记录和计算器等场景，提高代码灵活性和可读性。
解释PHP 8.1中的纤维以进行并发。Apr 12, 2025 am 12:05 AMFibers在PHP8.1中引入，提升了并发处理能力。1)Fibers是一种轻量级的并发模型，类似于协程。2)它们允许开发者手动控制任务的执行流，适合处理I/O密集型任务。3)使用Fibers可以编写更高效、响应性更强的代码。
PHP社区：资源，支持和发展Apr 12, 2025 am 12:04 AMPHP社区提供了丰富的资源和支持，帮助开发者成长。1)资源包括官方文档、教程、博客和开源项目如Laravel和Symfony。2)支持可以通过StackOverflow、Reddit和Slack频道获得。3)开发动态可以通过关注RFC了解。4)融入社区可以通过积极参与、贡献代码和学习分享来实现。
PHP与Python：了解差异Apr 11, 2025 am 12:15 AMPHP和Python各有优势，选择应基于项目需求。1.PHP适合web开发，语法简单，执行效率高。2.Python适用于数据科学和机器学习，语法简洁，库丰富。
php：死亡还是简单地适应？Apr 11, 2025 am 12:13 AMPHP不是在消亡，而是在不断适应和进化。1)PHP从1994年起经历多次版本迭代，适应新技术趋势。2)目前广泛应用于电子商务、内容管理系统等领域。3)PHP8引入JIT编译器等功能，提升性能和现代化。4)使用OPcache和遵循PSR-12标准可优化性能和代码质量。
PHP的未来：改编和创新Apr 11, 2025 am 12:01 AMPHP的未来将通过适应新技术趋势和引入创新特性来实现：1)适应云计算、容器化和微服务架构，支持Docker和Kubernetes；2)引入JIT编译器和枚举类型，提升性能和数据处理效率；3)持续优化性能和推广最佳实践。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
R.E.P.O.能量晶体解释及其做什么（黄色晶体）
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
2 周前ByDDD
R.E.P.O.如果您听不到任何人，如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解锁Myrise中的所有内容
3 周前By尊渡假赌尊渡假赌尊渡假赌
热工具
螳螂BT
Mantis是一个易于部署的基于Web的缺陷跟踪工具，用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。
Dreamweaver Mac版
视觉化网页开发工具
ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境
MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。
SublimeText3汉化版
中文版，非常好用
