[英]How to make web page display only recent update rather than reload using AJAX
I made a table on my web page, that reloads every ten seconds to get new information inputted by users, if any. 我在网页上创建了一个表格,该表格每十秒钟重新加载一次,以获取用户输入的新信息(如果有)。 The thing is, I don't want the whole table to reload every ten seconds, I just want the table to display only new updates that are not on the table already. 问题是,我不希望整个表每十秒钟重新加载一次,我只希望表仅显示尚未在表上的新更新。 Below is the code I used for reloading the page. 以下是我用于重新加载页面的代码。
function process(xmlHttp, i) {
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {
//value = encodeURIComponent( objRef.value );
xmlHttp.open("GET", "php/AjaxBody.php?value=" + i, true);
xmlHttp.onreadystatechange = handleServerResponse;
xmlHttp.send(null);
} else {
alert("Hold on");
}
}
function handleServerResponse() {
if (test.readyState == 1 || test.readyState == 2 || test.readyState == 3) {}
if (test.readyState == 4) {
if (test.status == 200) {
txtResponse = test.responseText;
bodyDiv = document.getElementById("body");
bodyDiv.innerHTML = txtResponse;
} else {
alert("Error with the xmlHttp status");
}
}
/*
else{
alert("Error with the xmlHttp readystate: " + x.status);
} */
}
The txtResponse
returns the whole table that is reloaded onto the div
= body
, I would like to know how to go about this, and I would also like it to be native JavaScript ("I don't mind XML, to change the way the information is returned") txtResponse
返回整个表,该表将重新加载到div
= body
,我想知道如何进行此操作,并且我还希望它是本机JavaScript(“我不介意XML,以更改信息返回”)
I think you can add the limit in your url. 我认为您可以在网址中添加限制。 Something like this should work fine. 这样的事情应该可以正常工作。
function process(xmlHttp, i, max_id) {
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {
//value = encodeURIComponent( objRef.value );
xmlHttp.open("GET", "php/AjaxBody.php?value=" + i + "&max_id=" + max_id, true);
xmlHttp.onreadystatechange = handleServerResponse;
xmlHttp.send(null);
} else {
alert("Hold on");
}
}
You could also add a datetime to your objects like a created date and a last modified date. 您还可以向对象添加日期时间,例如创建日期和上次修改日期。 Then do some checks and see if something is new. 然后做一些检查,看看是否有新东西。
Have a look at the javascript framework KnockoutJS if you want to some very complex changetracking, it does a lot for you but it has a relatively high learning curve. 如果您想进行一些非常复杂的变更跟踪,请查看javascript框架KnockoutJS,它可以为您带来很多帮助,但是学习曲线相对较高。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.