PHP Ajax搭建简易聊天室

本篇文章主要讲解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>

郑重声明:本文版权包含图片归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们(delete@yzlfxy.com)修改或删除,多谢。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

留言与评论(共有 0 条评论)
昵称:
匿名发表
   
验证码: