Question

I have an online chat room that uses jQuery/Ajax for requesting data from the server. However, the method I use is very inefficient and I’m trying to improve it by only loading the server data if the chat content has been changed (new message, etc.) The method seems to be logically correct, although somehow it never evaluates to true. I’ve attached the code below, please tell me what I’m doing wrong as this is giving me a very hard time. I want the chat div to be changed only when the data from the server is different.

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

I’d just use jQuery’s AJAX functions. They make everything really simple:

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

If you really want to know why your method isn’t working, you’re not checking if the server actually sent you a response (which returns a readyState of 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);
}