当前位置：Gxlcms > PHP教程 > PHPAjax搭建简易聊天室

PHPAjax搭建简易聊天室

时间：2021-07-01 10:21:17 帮助过：5人阅读

本篇文章主要讲解php+ajax搭建简易聊天室实践，文中有关php，ajax的内容，有需要的小伙伴参考下。

index.html:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html>  
  3.     <head>  
  4.         <title>新建网页</title>  
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6.         <meta name="description" content="" />  
  7.         <meta name="keywords" content="" />  
  8.   
  9.         <link rel="stylesheet" style="text/css" href="./css/talk.css" />  
  10.   
  11.         <script type="text/javascript">  
  12.   
  13.         var maxID = 0;  
  14.         //获取最新的聊天消息  
  15.         function showmsg(){  
  16.             //ajax去获取  
  17.             var xhr = new XMLHttpRequest();  
  18.             xhr.onreadystatechange = function(){  
  19.                 if(xhr.readyState==4){  
  20.                     eval("var jn_info="+xhr.responseText);  
  21.                     //<p style="color:#800080">恶魔 对 大家 微笑 说：好久不见了啊(22:05:35)</p>  
  22.                     var s = "";  
  23.                     for(var i=0; i<jn_info.length; i++){  
  24.                         s += "<p style='color:"+jn_info[i].color+"'>"+jn_info[i].sender+" 对 ";  
  25.                         s += jn_info[i].receiver+" "+jn_info[i].biaoqing+" 说：";  
  26.                         s += jn_info[i].msg+"("+jn_info[i].add_time+")</p>";  
  27.                         //把已经获取的最大id值赋予给maxID  
  28.                         maxID = jn_info[i].id;  
  29.                     }  
  30.                     var hm =document.getElementById('show_msg');   
  31.                     hm.innerHTML += s;  
  32.   
  33.                     //设置div滚动条卷起高度,该高度要随着内容增多有自适应效果。(设置div有滚动条：css： height:327px; overflow:auto;)  
  34.                     hm.scrollTop = hm.scrollHeight;  //滚动条始终在最下方。scrolltop表示滚动条卷起的高度，scrollheight是整个div的高度。  
  35.                 }  
  36.             }  
  37.             xhr.open('get','./data.php?maxID='+maxID);  
  38.             xhr.send(null);  
  39.         }  
  40.         //页面加载完毕就要显示最新聊天消息  
  41.         window.onload = function(){  
  42.             //每间隔2s就执行一次  
  43.             setInterval("showmsg()",2000);  
  44.         }  
  45.         </script>  
  46.   
  47.         <style type="text/css">  
  48.         </style>  
  49.     </head>  
  50.     <body>  
  51.         <div id="main">  
  52.             <div id="left">  
  53.                 <h2>在线名单：（5人）</h2>  
  54.                 <ul id="user">  
  55.                     <li>帅哥：恶魔</li>  
  56.                     <li>靓妹：甜甜</li>  
  57.                     <li>帅哥：诸葛</li>  
  58.                     <li>帅哥：成就梦想</li>  
  59.                     <li>靓妹：郁金香</li>  
  60.                 </ul>  
  61.                 <ul id="anniu">  
  62.                     <li><input type="button" value="刷新名单" ></li>  
  63.                     <li><input type="button" value="刷新屏幕" ></li>  
  64.                     <li><input type="button" value="退出聊天" ></li>  
  65.                 </ul>  
  66.             </div>  
  67.             <div id="right">  
  68.                 <div id="content">  
  69.                     <h2 id="content-title">有什么意见和建议欢迎大家踊跃提出</h2>  
  70.                     <hr />  
  71.                     <div id="show_msg">  
  72.                         <p style="color:red">PHP爱好者聊天室公告：欢迎恶魔来到聊天室(22:05:35)</p>  
  73.                         <p>恶魔 对 大家 微笑 说：对啊(22:05:35)</p>  
  74.                         <p>恶魔 对 大家 微笑 说：对啊(22:05:35)</p>  
  75.                         <p style="color:#800080">恶魔 对 大家 微笑 说：好久不见了啊(22:05:35)</p>  
  76.                         <p style="color:red">PHP爱好者聊天室公告：欢迎天使来到聊天室(22:05:35)</p>  
  77.                         <p>天使 对 大家 微笑 说：你来了啊(22:05:35)</p>  
  78.                     </div>  
  79.                 </div>  
  80.                 <div id="send">  
  81.                     <form>  
  82.                     <div id="control">  
  83.                     颜色：  
  84.                     <select id="color" name="color">  
  85.                         <option value="">请选择</option>  
  86.                         <option  style="color:#FF8888" value="#FF8888">爱的暗示</option>  
  87.                         <option  style="color:#00BBFF" value="#00BBFF">忧郁的蓝</option>  
  88.                         <option  style="color:#0000FF" value="#0000FF">碧空蓝天</option>  
  89.                         <option  style="color:#9F88FF" value="#9F88FF">灰蓝种族</option>  
  90.                         <option  style="color:#000088" value="#000088 ">蔚蓝海洋</option>  
  91.                         <option  style="color:#77FFEE" value="#77FFEE">清清之蓝</option>  
  92.                         <option  style="color:#4400B3" value="#4400B3">发亮篮紫</option>  
  93.                         <option  style="color:#A500CC" value="#A500CC">紫的拘谨</option>  
  94.                         <option  style="color:#B088FF" value="#B088FF">卡其制服</option>  
  95.                         <option  style="color:#D1BBFF" value="#D1BBFF">伦敦灰雾</option>  
  96.                         <option  style="color:#DC143C" value="#DC143C">卡布其诺</option>  
  97.                         <option  style="color:#A52A2A" value="#A52A2A">苦涩心红</option>  
  98.                         <option  style="color:#FF0000" value="#FF0000">正宗喜红</option>  
  99.                         <option  style="color:#990099" value="#990099">红的发紫</option>  
  100.                         <option style="color:#FF0000" value="#FF0000">红旗飘飘</option>  
  101.                         <option style="color:#D2691E" value="#D2691E ">黄金岁月</option>  
  102.                         <option style="color:#800080" value="#800080">紫金绣贴</option>  
  103.                         <option style="color:#006400" value="#006400">橄榄树绿</option>  
  104.                         <option style="color:#000000" value="#000000">绝对黑色</option>   
  105.                     </select>  
  106.                     表情：  
  107.                     <select id="biaoqing" name="biaoqing">  
  108.                         <option value="">请选择</option>  
  109.                         <option value="笑着">笑着</option>  
  110.                         <option value="高兴地">高兴地</option>  
  111.                         <option value="含情脉脉">含情脉脉</option>  
  112.                         <option value="微笑">微笑</option>  
  113.                         <option value="幸福">幸福</option>  
  114.                         <option value="有点脸红">有点脸红</option>  
  115.                         <option value="使劲安慰">使劲安慰</option>  
  116.                         <option value="自言自语">自言自语</option>  
  117.                         <option value="差点要哭">差点要哭</option>  
  118.                         <option value="嚎啕大哭">嚎啕大哭</option>  
  119.                         <option value="一把鼻涕">一把鼻涕</option>  
  120.                         <option value="很无辜">很无辜</option>  
  121.                         <option value="流口水">流口水</option>  
  122.                         <option value="神秘兮兮">神秘兮兮</option>  
  123.                         <option value="幸灾乐祸">幸灾乐祸</option>  
  124.                         <option value="很不服气">很不服气</option>  
  125.                         <option value="不怀好意">不怀好意</option>  
  126.                         <option value="拳打脚踢">拳打脚踢</option>  
  127.                         <option value="不知所措">不知所措</option>  
  128.                         <option value="翻箱倒柜">翻箱倒柜</option>  
  129.                         <option value="很遗憾">很遗憾</option>  
  130.                         <option value="很严肃">很严肃</option>  
  131.                         <option value="善意警告">善意警告</option>  
  132.                         <option value="正气凛然">正气凛然</option>  
  133.                         <option value="哈欠连天">哈欠连天</option>  
  134.                         <option value="小声的">小声的</option>  
  135.                         <option value="大声的">大声的</option>  
  136.                         <option value="尖叫一声">尖叫一声</option>  
  137.                         <option value="遗憾的">遗憾的</option>  
  138.                         <option value="无精打采">无精打采</option>  
  139.                         <option value="想吐">想吐</option>  
  140.                         <option value="真诚">真诚</option>  
  141.                         <option value="不好意思">不好意思</option>  
  142.                         <option value="扭捏的">扭捏的</option>  
  143.                         <option value="腼腆的">腼腆的</option>  
  144.                         <option value="很诧异">很诧异</option>  
  145.                         <option value="依依不舍">依依不舍</option>  
  146.                     </select>  
  147.                     聊天对象：  
  148.                     <select id="receiver" name="receiver">  
  149.                         <option value="">所有的人</option>   
  150.                         <option value="恶魔">恶魔</option>  
  151.                         <option value="甜甜">甜甜</option>  
  152.                         <option value="诸葛">诸葛</option>  
  153.                         <option value="成就梦想">成就梦想</option>  
  154.                         <option value="郁金香">郁金香</option>  
  155.                     </select>  
  156.                     <br />  
  157.                     <textarea id="msg" name="msg"></textarea>  
  158.                     <input type="button" value="发送" onclick="sendmsg()" />  
  159.                     <span id="result"></span>  
  160.                     </div>  
  161.                     </form>  
  162.                 </div>  
  163.             </div>  
  164.         </div>  
  165.     </body>  
  166. </html>  
  167. <script type="text/javascript">  
  168. function sendmsg(){  
  169.     //发表聊天消息  FormData+Ajax合作  
  170.     var fm = document.getElementsByTagName('form')[0];  
  171.     var fd = new FormData(fm);  
  172.     var xhr = new XMLHttpRequest();  
  173.     xhr.onreadystatechange = function(){  
  174.         if(xhr.readyState==4){  
  175.             document.getElementById('result').innerHTML = xhr.responseText;  
  176.             //表单域信息归位  
  177.             document.getElementById('color').value="";  
  178.             document.getElementById('biaoqing').value="";  
  179.             document.getElementById('receiver').value="";  
  180.             document.getElementById('msg').value="";  
  181.             //"留言成功"标志归位,2s后归位  
  182.             setTimeout("guiflag()",2000);  
  183.         }  
  184.     }  
  185.     xhr.open('post','./send.php');  
  186.     xhr.send(fd);  
  187. }  
  188. //"留言成功"标志归位  
  189. function guiflag(){  
  190.     document.getElementById('result').innerHTML = "";  
  191. }  
  192. </script>

data.php（后端，从数据库获取所有聊天信息）:

  1. <?php  
  2.   
  3. //随时获取最新的聊天消息  
  4. $link = mysql_connect('localhost','root','123456');  
  5. mysql_select_db('shop0811',$link);  
  6. mysql_query('set names utf8');  
  7.   
  8. $maxID = $_GET['maxID'];  
  9. //获取聊天消息,根据maxID做限制查询获取(避免获取重复消息)  
  10. $sql = "select * from message where id>".$maxID;  
  11. $qry = mysql_query($sql);  
  12. $info = array();  
  13. while($rst = mysql_fetch_assoc($qry)){  
  14.     $info[] = $rst;  
  15. }  
  16. //把数据组织为二维数组  
  17. //把最新的聊天信息通过json格式提供出来  
  18. echo json_encode($info);

send.php（后端，将发送的聊天记录存入数据库）:

  1. <?php  
  2.   
  3. //发表聊天消息，服务器端  
  4. $link = mysql_connect('localhost','root','123456');  
  5. mysql_select_db('shop0811',$link);  
  6. mysql_query('set names utf8');  
  7.   
  8. $msg        = $_POST['msg'];  
  9. $receiver   = $_POST['receiver'];  
  10. $color      = $_POST['color'];  
  11. $biaoqing   = $_POST['biaoqing'];  
  12.   
  13. $sql = "insert into message values (null,'$msg','admin','$receiver','$color','$biaoqing',now())";  
  14. if(mysql_query($sql)){  
  15.     echo "发表留言成功！";  
  16. }else{  
  17.     echo "发表留言失败！";  
  18. }

talk.css（引入的外部CSS文件）:

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

相关推荐：

php基于websocket搭建简易聊天室实践

php基于websocket搭建简易聊天室实践_php实例

php+websocket搭建简易聊天室实践

以上就是PHP Ajax搭建简易聊天室的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！