title: How to make web page display only recent update rather than reload using AJAX
body: <p>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.</p>
  
  <pre><code>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);
      } */
  }
  </code></pre>
  
  <p>The <code>txtResponse</code> returns the whole table that is reloaded onto the <code>div</code> = <code>body</code>, 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")</p>