如何使網頁僅顯示最近更新，而不使用AJAX重新加載

Question

我在網頁上創建了一個表格，該表格每十秒鍾重新加載一次，以獲取用戶輸入的新信息（如果有）。 問題是，我不希望整個表每十秒鍾重新加載一次，我只希望表僅顯示尚未在表上的新更新。 以下是我用於重新加載頁面的代碼。

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，以更改信息返回”）

Answer 1

我認為您可以在網址中添加限制。 這樣的事情應該可以正常工作。

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

Answer 2

您還可以向對象添加日期時間，例如創建日期和上次修改日期。 然后做一些檢查，看看是否有新東西。

如果您想進行一些非常復雜的變更跟蹤，請查看javascript框架KnockoutJS，它可以為您帶來很多幫助，但是學習曲線相對較高。