Question

所以我有下一个更新功能：

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

所以我希望它不会更新文档内容，如果它已经加载了相同的东西。怎么做这个？

Answer 1

类似的东西：

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

编辑：在patrick在页面中发表评论之后，将响应存储在某处并将其与新内容进行比较，而不是依赖可以更改原始HTML字符串的innerHTML

Answer 2

首先，您需要先进行下载，以确定首先要比较的文字。我假设buttons.html在某种程度上是动态的，因此当您下载它时，您需要将其与innerHTML userList中已有的内容进行比较。

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

另外，如果你打算做很多ajax，我建议你使用像jQuery这样的库。 Ajax调用就像

一样简单

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

或

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

如何更新功能检查是否已加载相同的上下文？

2 个答案: