What is wrong with this jQuery/Ajax function?

I have an online chat room that uses jQuery/Ajax for requesting data from the server. However, th开发者_如何学Pythone 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);
}

---

When you do .html(), the browser gives you neatly formatted HTML. That is, all tags closed, all attributes in quotes, that sort of thing. And what you're returning from msgs.php is, most likely, not formatted perfectly. Hence, the difference.

If you're worried about inefficiency, however, this method would still be pretty inefficient. I mean, yes, you don't update the UI needlessly anymore, but you're still loading the list of messages from the server, don't you?

In order to save a couple of bytes here, you should rather have employed the "if-modified" technique. That is, along with the list of messages, return some kind of timestamp. Say, just an integer. When something changes on the server, increase that integer by one. When requesting an update from the server, have your AJAX code pass the previous received timestamp, and then have the server respond "nothing changed" if the timestamp is current. Otherwise, have the server transmit the new list of messages. This is, roughly, the idea.

---

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);
}

---

try using jquery's ajax functions