实时更新程序聊天脚本 - Live updater chat script

Live updater chat script

所以我对php有点陌生，我正在尝试编写一个php实时聊天web应用程序。。。它将聊天数据存储在mysql数据库中。然后，我每隔几秒钟调用我在下面键入的UpdateDb（）函数，刷新它在我有php代码的div中显示的聊天内容。。。但每次它调用UpdateDb（）函数时，如果您将消息键入的文本输入集中（选中），它就会使其模糊，并且您永远无法键入消息，因为它一直在取消选择它。：（…有人有更好的代码来更新某个div中的内容吗？我真的很感激任何人能提供的帮助…（请记住，我不是php专业人士，我对javascript了解不多）。如果我需要发布整个文档代码，我可以，如果你不知道我的意思。。。如果可以的话，我真的很想在php中完成这一切，但我不知道是否有办法。

function UpdateDb()
{
    if (window.XMLHttpRequest){           // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();}else{     // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()  
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("messages").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","chat2.php",true);xmlhttp.send();
}

您可以在这里采取两种方法：

1）您向服务器发出Ajax请求，只获得比某些message_date更新的JSON消息输出。然后为JSON数据创建HTML包装并附加到消息列表（对不起，我使用jQuery）：

$.ajax({
   url: 'ajax/getMessages',
   type: 'post',
   data: {last: $("#lastMessageDate").val()},
   success: function (newMessages) { // newMessages contains JSON of messages
      $.each(newMessages, function(key, message){
         $("#messages").append("<div class='message'>" + message.content + "</div>");
      }); 
   }
});
<div id="messages">
   <div class="message">
       <?php echo $message['content']; ?>
   </div>
   <input type="hidden" value="2014-10-20 12:52" id="lastMessageDate"/>
</div>
<textarea></textarea>

2）使用相同的视图，只需重新加载单个图元。（再次jQuery）

$("#messages").load(window.location.href + " #messages > *");
<div class="messages">
   <?php foreach ($dbMessages as $message) { ?>
       <div class="message"><?php echo $message['content']; ?></div>
   <?php } ?>
</div>
<textarea></textarea>