【问题标题】:How to make web page display only recent update rather than reload using AJAX如何使网页仅显示最近的更新而不是使用 AJAX 重新加载
【发布时间】:2013-04-29 12:30:25
【问题描述】:

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

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,改变返回信息的方式")

【问题讨论】:

  • 在 php 中,您只返回更新的行并使用 append 方法将该行附加到现有表中。
  • 是的,但我怎么知道那条记录是新的
  • 让 ajax 请求发送它知道的最新记录 id,然后 php 检查是否有新的可用 .. 等等。
  • 您是从服务器发送整个表格(带有数据的 html 结构)吗?
  • @SujeshArukil,是的,这就是我正在做的事情

标签: php javascript html xml


【解决方案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");
  }
}

【讨论】:

    【解决方案2】:

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

    如果您想进行一些非常复杂的变更跟踪,请查看 javascript 框架 KnockoutJS,它对您有很大帮助,但学习曲线相对较高。

    【讨论】:

      猜你喜欢
      • 2010-12-28
      • 1970-01-01
      • 2017-03-16
      • 2021-11-19
      • 2020-01-25
      • 1970-01-01
      • 2014-09-06
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多