php ajax简单的聊天室

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>