如何使网页只显示最近的更新,而不是重新加载使用AJAX


How to make web page display only recent update rather than reload using AJAX

我在我的网页上做了一个表格,它每十秒钟重新加载一次,以获取用户输入的新信息(如果有的话)。问题是,我不希望整个表每10秒重新加载一次,我只希望表只显示不在表上的新更新。下面是我用来重新加载页面的代码。

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);
    } */
}

txtResponse返回被重新加载到div = body的整个表,我想知道如何去做这个,我也希望它是原生JavaScript("我不介意XML,改变信息返回的方式")

我认为你可以在你的url中添加限制。像这样的代码应该可以正常工作。

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

您还可以向对象添加日期时间,例如创建日期和最后修改日期。然后做一些检查,看看是否有新的东西。

如果你想做一些非常复杂的更改跟踪,可以看看javascript框架KnockoutJS,它为你做了很多,但它有一个相对较高的学习曲线。