PHP Ajax,简易聊天室

最新推荐文章于 2022-04-03 00:00:00 发布

houyanhua1

最新推荐文章于 2022-04-03 00:00:00 发布

阅读量712

点赞数

本文链接：https://blog.csdn.net/houyanhua1/article/details/79197532

版权

这篇博客介绍了如何使用PHP、AJAX和JSON技术创建一个简单的在线聊天室。通过在前端使用AJAX发送请求，后端PHP处理数据并返回，实现了无需刷新页面即可实时更新聊天消息的功能。

摘要由CSDN通过智能技术生成

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>帅哥：成就梦想</l