php ajax简单的聊天室

来源：互联网发布：蒲慕明知乎编辑：程序博客网时间：2024/05/18 21:11

1.区域一：html中的ajax实时获得数据库内容，定时器更新

2.区域二：FormData获得全部信息，利用ajax插入数据库

3.聊天室展示内容
①建表数据库
②php查询后json信息返回

4.避免发送重复的信息

①ajax始终携带最后一条信息记录的id，到数据库当中查询时，只要信息记录id > ajax携带的id，才查询

5.聊天室设置滚条

①信息模块show_msg 设置高度，overflow:auto;

②运用divnode.scrollTop = divnode.scrollHeight // 滚动条卷起的高度 = div元素高度

html中的ajax内容

<script type="text/javascript">            var maxID = 0;            function showmsg(){               var xhr = new XMLHttpRequest();                               xhr.onreadystatechange = function(){                    if(xhr.readyState == 4){                        eval("var info=" + xhr.responseText);                        var s = "";                        for(var i=0; i<info.length; i++){                            s += "<p style='color:" + info[i].color + "'>";                            s += info[i].sender +" 对 ";                            s += info[i].receiver + " ";                            s += info[i].biaoqing + " 说：";                            s += info[i].msg + "("+info[i].add_time+")</p>";                            maxID = info[i].id;                        }                        var divnode = document.getElementById('show_msg');                        //将拼装好的字符串赋值给页面                        divnode.innerHTML += s;                        //滚动条卷起的高度 = 页面div元素的高度                        divnode.scrollTop = divnode.scrollHeight;                    }                }                xhr.open('get','./data.php?maxID='+maxID);                xhr.send(null);             }            window.onload = function(){                showmsg();                setInterval("showmsg()",2000);//每两秒获得一次内容            }            </script>

<!--处理发送信息--><script type="text/javascript">    function sendmsg(){        //formdata收集数据        var fm = document.getElementsByTagName('form')[0];        var fd = new FormData(fm);        //ajax传递数据        var xhr = new XMLHttpRequest();                       xhr.onreadystatechange = function(){            if(xhr.readyState == 4){                document.getElementById('sendresult').innerHTML = xhr.responseText;                setTimeout('clearAll()',2000);//定时调用clearAll函数            }        }        xhr.open('post','./data2.php');        xhr.send(fd);    }    function clearAll(){        document.getElementById('sendresult').innerHTML = "";        document.getElementById('msg').value = "";//textarea的清空信息要用value不能用innerHTML        document.getElementById('color').value="";        document.getElementById('biaoqing').value="";        document.getElementById('receiver').value="所有的人";    }</script>

阅读全文

0 0