Что не так с этой функцией jQuery / Ajax?

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, скорее всего, не отформатировано идеально. Отсюда и разница.

Однако, если вас беспокоит неэффективность, этот метод будет все же довольно неэффективным. Я имею в виду, да, вы больше не обновляете пользовательский интерфейс, но вы все еще загружаете список сообщений с сервера, не так ли?

Чтобы сэкономить здесь пару байтов, вам лучше использовать технику «если модифицировано». То есть вместе со списком сообщений возвращаются какие-то временные метки. Скажем, просто целое число. Когда что-то меняется на сервере, увеличьте это число на единицу. При запросе обновления с сервера ваш AJAX-код должен передать предыдущую полученную временную метку, а затем сервер должен ответить «ничего не изменилось», если временная метка является текущей. В противном случае сервер должен передать новый список сообщений. Это, примерно, идея.

Answer 2

Я бы просто использовал функции JJuery 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);
}

Answer 3

попробуйте использовать ajax-функции jquery