Question

我有一个在线聊天室，它使用jQuery / Ajax从服务器请求数据。但是，我使用的方法是非常低效的，我试图通过仅加载服务器数据来改进它，如果聊天内容已被更改（新消息等）该方法似乎在逻辑上是正确的，虽然它以某种方式从未评估为真。我已经附上了下面的代码，请告诉我我做错了什么，因为这给了我一个非常艰难的时间。我希望只有当来自服务器的数据不同时才能更改聊天div。

function loadMsgs()
{
var v_loadMsgs = new XMLHttpRequest();

v_loadMsgs.open("GET", "msgs.php");

v_loadMsgs.onreadystatechange = function()
{
    var old_content = $("#msgs").html();
    var new_content = v_loadMsgs.responseText;

    if (old_content != new_content) 
    {
        $("#msgs").html(new_content);
    }

    if (old_content == new_content) 
    {
        $("#msgs").html("EQUAL!"); // only here for testing
    }
};

v_loadMsgs.send(null);
}

Answer 1

当您执行.html()时，浏览器会为您提供整齐格式的HTML。也就是说，所有标签都关闭了，引号中的所有属性都是这样的。你从msgs.php返回的内容很可能不是完美格式化的。因此，差异。

但是，如果您担心效率低下，这种方法仍然非常低效。我的意思是，是的，你不再不必要地更新UI了，但是你仍在加载来自服务器的消息列表，不是吗？

为了在这里节省几个字节，你应该使用“if-modified”技术。也就是说，与消息列表一起，返回某种时间戳。说，只是一个整数。当服务器上的某些内容发生变化时，请将该整数增加一。当从服务器请求更新时，让您的AJAX代码传递先前接收的时间戳，然后如果时间戳是最新的，则让服务器响应“没有改变”。否则，让服务器发送新的消息列表。这大致就是这个想法。

Answer 2

尝试使用jquery's ajax functions

Answer 3

我只是使用jQuery的AJAX函数。他们让一切都变得非常简单：

function loadMsgs()
{
    jQuery.get("msgs.php", function(data)
    {
        if ($("#msgs").html() != data) 
        {
            $("#msgs").html(data);
        } else {
            $("#msgs").html("EQUAL!"); // only here for testing
        }
    });
}

如果您真的想知道为什么您的方法不起作用，那么您不会检查服务器是否实际向您发送了响应（返回readyState 4}：

function loadMsgs()
{
var v_loadMsgs = new XMLHttpRequest();

v_loadMsgs.open("GET", "msgs.php");

v_loadMsgs.onreadystatechange = function()
{
    if (v_loadMsgs.readyState == 4)
    {
        var old_content = $("#msgs").html();
        var new_content = v_loadMsgs.responseText;

        if (old_content != new_content) 
        {
            $("#msgs").html(new_content);
        }

        if (old_content == new_content) 
        {
            $("#msgs").html("EQUAL!"); // only here for testing
        }
    }
};

v_loadMsgs.send(null);
}

这个jQuery / Ajax函数有什么问题？

3 个答案: