开发者

How to make update function check if it has loaded same context as there already is?

So I have next update function:

 function update() {
  开发者_JAVA技巧      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?


Something like:

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

EDIT: After patrick's comment in the page, it looks better to store the response somewhere and compare it to the new instead of relying on the innerHTML that can change the original HTML string.


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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜