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);
}
});
精彩评论