javascript - 如何停止跳转来自 Ajax.load 方法的内容？

Question

我的页面有聊天功能。当两个用户互相聊天时，我找不到一种方法可以在用户 A 的聊天窗口上自动加载用户 B 的新消息。这就是为什么我使用

<script type="text/javascript">

    $(document).ready(function(){

        $("#getBuddieContacts").load("ajax_getContactsList.php");
        $("#getFriendsRequestList").load("ajax_getMessages.php");

    });

    setInterval(function() {$("#getBuddieContacts").load("ajax_getContactsList.php");}, 5000);
    setInterval(function() {$("#getFriendsRequestList").load("ajax_getMessages.php");}, 5000);

</script>

每次加载脚本时，PHP 脚本都会返回完整的聊天内容(从 0 到最新)。 (我不知道如何在用户A的聊天屏幕上立即显示用户B发送的消息)。 :(

代码工作正常，但每当我们尝试复制/粘贴或选择来自 ajax 加载文件的任何文本时，内容都会重新加载，并且看起来像是在屏幕上跳跃(不是在显示方面跳跃，而是在行为方面跳跃)。

所以，我的问题是，如何进行更改，以便用户 B 的新消息可以显示在用户 A 屏幕上，或者我应该使用什么技术？

Answer 1

不幸的是，我没有适合您的复制粘贴解决方案。问题的核心似乎是，当用户在窗口中选择文本时，下一次更新会删除他选择的 DOM 元素，并将其替换为新元素。

鉴于您当前的方案，我会执行以下操作:

1. 更改文本加载方案以返回增量更新而不是整个对话。您可以通过让它随每组更新传回时间戳来实现此目的。客户端存储时间戳，并在请求下一次更新时将其传递给服务器。服务器使用新的时间戳和任何新的聊天文本进行响应。

2. 更改您的客户端，将每个新添加的内容添加到其自己的 div 中。这样，您就不会删除用户从 DOM 中选择的对话部分。

或者，在处理 .php 脚本响应的 javascript 函数中，您可以执行如下操作:

var newConversationText = "new conversation text here - get it from...  however you're getting it now";
var oldConversationText = $("#div-containing-conversation-text").html();

var diff =newConversationText.substring(oldConversationText.length);

var newDiv = $("<div>" + diff + "</div>");

$("#div-containing-conversation-text").append(newDiv);