AJAX(五)--聊天室

ajax聊天室

1 消息的接收

ajax/talk
1.获取服务器消息

 window.onload = function() {
   
     //每隔2秒获取消息
     setInterval(GetMsg, 2000);
 };
 //获取信息
 function GetMsg() {
   
     var xhr = new XMLHttpRequest();
     var msg = document.getElementById('show_msg');
     xhr.onreadystatechange = function() {
   

         if (xhr.readyState == 4) {
             var s = '';
             s = xhr.responseText;
            //将json转换为对象
             s = eval('var info = ' + s);
             s = '';
            //拼接
            for(var i=0;i < info.length;i++)
{
    s += "<p style=color:"+info[i].color+">"+info[i].sender+' 对 ';
                 s += info[i].receiver;
                 s += info[i].biaoqing + ' 说： ';
                 s += info[i].msg + '(' + info[i].add_time + ')' + '<br>';
             }
             msg.innerHTML += s;
         }
     };
     xhr.open('get', 'index.php');
     xhr.send(null);
 }

• PHP文件获取消息内容并转换为json格式

<?php 
    //echo '响应成功'; 
    //读取数据库信息 
    //这里连接数据库 
    $Mysqli = mysqli_connect('localhost','root','','test'); //设置字符集 
    $Mysqli->query('SET NAMES utf8'); 
    //sql语句 
    $sql = 'SELECT * FROM message'; 
    $res = $Mysqli->query($sql); 
    $arr = []; 
    while ($row = $res->fetch_assoc())
    {
        $arr[] = $row; 
    }
    $rows = json_encode($arr); 
    echo $rows;

2.获取新消息

每隔两秒获取后会获得同样的消息附加，所以需要获取每次获取的最大id，并做为下一次获取的条件。
- 1.在函数外定义一个全局变量MaxId接收消息的最大Id

    //获取信息 
    var MaxId = 0;

• 2.在循环中获取最大id

    //获取最大id 
    MaxId = info[i].id;

• 3.将id作为参数传递到服务器

    //将其作为参数传递出去 
    xhr.open('get','index.php?MaxId='+MaxId);

3.无刷新发送消息

• 1.利用FormData收集表单中的信息
• 2.将发送结果显示到发送按键之后，并在两秒后消失

<script>
    //找到表单
  var fm = document.getElementById('send_msg');    fm.onsubmit = function(event)
    {
    
        //收集信息
  var fd = new FormData(fm);
  //ajax请求
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function()
        {
    
            if(xhr.readyState==4)
            {
                if(xhr.responseText)
                {
                    var send_res = document.getElementById('send_res');
  send_res.innerHTML = '发送成功';
  setTimeout(set,2000);
  function set()
                    {
    
                        send_res.innerHTML='';
  }

                }
                else
  {
                    var send_res = document.getElementById('send_res');
  send_res.innerHTML = '发送失败';
  setTimeout(set,2000);
  function set()
                    {
    
                        send_res.innerHTML='';
  }
                }
            }
        };
  xhr.open('post','insert.php');
  xhr.send(fd);
  //阻止原来的动作
 //主流浏览器  if(event.preventDefault)
  {
            event.preventDefault();
  }
        //非主流
  else
  {
            event.returnValue = 'false';
  }
    };   </script>

• 3.服务器端接收消息并插入数据

<?php 
//这里连接数据库 
$Mysqli = mysqli_connect('localhost','root','','test'); 
//设置字符集 
$Mysqli->query('SET NAMES utf8'); 
//获取接收到的信息 
//var_dump($_POST); 
$sender = $_POST['sender']; 
$receiver = $_POST['receiver']; 
$biaoqing = $_POST['biaoqing']; 
$color = $_POST['color']; 
$msg = $_POST['msg']; 
//插入语句 
$i_sql = "INSERT INTO message VALUES(default,'".$msg."','".$sender."','".$receiver."','".$color."','".$biaoqing."',now());"; 
if($Mysqli->query($i_sql))
{
    echo true; 
}
else 
{
    echo false; 
}

• 4.消息增多，给消息展示区增加滚动条展示消息

<style type="text/css">
    #show_msg{
    height:328px;overflow: auto;}
</style>

4.优化完善

• 1.将发送区域置空
  即发送消息后，将所有选项还原

<script>
    function