PHP Ajax搭建簡易聊天室
ajax
php
聊天室
本篇文章主要講解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基於websocket搭建簡易聊天室實作_php實例
以上是PHP Ajax搭建簡易聊天室的詳細內容。更多資訊請關注PHP中文網其他相關文章！
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
如何修復KB5055612無法在Windows 10中安裝？
4 週前
By DDD
<🎜>：種植花園 - 完整的突變指南
3 週前
By DDD
<🎜>：泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
北端：融合系統，解釋
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
Mandragora：巫婆樹的耳語 - 如何解鎖抓鉤
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
PHP：網絡開發的關鍵語言
Apr 13, 2025 am 12:08 AM
PHP是一種廣泛應用於服務器端的腳本語言，特別適合web開發。 1.PHP可以嵌入HTML，處理HTTP請求和響應，支持多種數據庫。 2.PHP用於生成動態網頁內容，處理表單數據，訪問數據庫等，具有強大的社區支持和開源資源。 3.PHP是解釋型語言，執行過程包括詞法分析、語法分析、編譯和執行。 4.PHP可以與MySQL結合用於用戶註冊系統等高級應用。 5.調試PHP時，可使用error_reporting()和var_dump()等函數。 6.優化PHP代碼可通過緩存機制、優化數據庫查詢和使用內置函數。 7
PHP與Python：了解差異
Apr 11, 2025 am 12:15 AM
PHP和Python各有優勢，選擇應基於項目需求。 1.PHP適合web開發，語法簡單，執行效率高。 2.Python適用於數據科學和機器學習，語法簡潔，庫豐富。
PHP和Python：比較兩種流行的編程語言
Apr 14, 2025 am 12:13 AM
PHP和Python各有優勢，選擇依據項目需求。 1.PHP適合web開發，尤其快速開發和維護網站。 2.Python適用於數據科學、機器學習和人工智能，語法簡潔，適合初學者。
PHP行動：現實世界中的示例和應用程序
Apr 14, 2025 am 12:19 AM
PHP在電子商務、內容管理系統和API開發中廣泛應用。 1)電子商務：用於購物車功能和支付處理。 2)內容管理系統：用於動態內容生成和用戶管理。 3)API開發：用於RESTfulAPI開發和API安全性。通過性能優化和最佳實踐，PHP應用的效率和可維護性得以提升。
PHP的持久相關性：它還活著嗎？
Apr 14, 2025 am 12:12 AM
PHP仍然具有活力，其在現代編程領域中依然佔據重要地位。 1)PHP的簡單易學和強大社區支持使其在Web開發中廣泛應用；2)其靈活性和穩定性使其在處理Web表單、數據庫操作和文件處理等方面表現出色；3)PHP不斷進化和優化，適用於初學者和經驗豐富的開發者。
PHP和Python：解釋了不同的範例
Apr 18, 2025 am 12:26 AM
PHP主要是過程式編程，但也支持面向對象編程（OOP）；Python支持多種範式，包括OOP、函數式和過程式編程。 PHP適合web開發，Python適用於多種應用，如數據分析和機器學習。
PHP與其他語言：比較
Apr 13, 2025 am 12:19 AM
PHP適合web開發，特別是在快速開發和處理動態內容方面表現出色，但不擅長數據科學和企業級應用。與Python相比，PHP在web開發中更具優勢，但在數據科學領域不如Python；與Java相比，PHP在企業級應用中表現較差，但在web開發中更靈活；與JavaScript相比，PHP在後端開發中更簡潔，但在前端開發中不如JavaScript。
PHP和Python：代碼示例和比較
Apr 15, 2025 am 12:07 AM
PHP和Python各有優劣，選擇取決於項目需求和個人偏好。 1.PHP適合快速開發和維護大型Web應用。 2.Python在數據科學和機器學習領域佔據主導地位。
