Question

So I have next update function:

 function update() {
        var xmlhttp;
        try {
            xmlhttp = new XMLHttpRequest();
        } catch (e) {
            var success = false;
            var objects = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
            for (var i = 0; i < objects.length && !success; i++) {
                try {
                    xmlhttp = new ActiveXObject(objects[i]);
                    success = true;
                } catch (e) { };
            }
            if (!success) throw new Error("AJAX is unavailabe");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4) {
                document.getElementById('usersList').innerHTML = xmlhttp.responseText;
            };
        }
        xmlhttp.open("get", "buttons.html", true);
        xmlhttp.send(null);
    }
    update();
    setInterval(update, 5000);

so what I want it not to update documents contents if it has loaded same stuff that there is already. How to do such thing?

Answer 1

You’ll need to do the download first to determine what text you’re comparing in the first place. I’m assuming buttons.html is somehow dynamic, so when you download it, you need to compare it to what’s already in the innerHTML of userList.

    ...
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4) {
            if(document.getElementById('usersList').innerHTML != xmlhttp.responseText)
                document.getElementById('usersList').innerHTML = xmlhttp.responseText;
        };
    }
    ...

In addition, if you’re going to do a lot of ajax, I suggest using a library such as jQuery. Ajax calls are as simple as

 $('#userList').load('buttons.html');

or

$.ajax({
    url: 'buttons.html',
    success: function(data) {
        if ($('#userList').html() != data)
            $('#userList').html(data);
    }
});