javascript - 使用 AJAX 重新加载 html 页面

Question

我有一个非常简单的 html 页面，其中包含一个表格，我想每 5 秒在后台重新加载一次。在后台意味着解决方案<meta http-equiv="refresh" content="5">不能接受，因为此时用户可以观察到重新加载的过程。

我尝试了下面的代码，但我发现 RAM 使用率迅速上升，2-3 分钟后 firefox 浏览器消耗了 70-80% 的可用内存:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    function autoRefresh_div()
    {
      $("#employee_table").load("index.html");// a function which will load data from other file after x seconds
    }

    setInterval('autoRefresh_div()', 5000); // refresh div after 5 secs
</script>

你能推荐一些更有效的方法吗？

编辑:我忘了在我的 html 正文中添加:

<div id="employee_table">
<table>
...
</table>
</div>

我不确定我使用的是 load("index.html")所以我正在加载整个页面而不是仅仅加载一个 div...？

Answer 1

您也可以使用 $.ajax 代替 $("").load("url");因为它只会在 success 函数中替换给定元素的内容意味着当 AJAX 请求成功时，所以可以防止闪烁。

function autoReload() {
  setTimeout(function() {
   $.ajax({
     url: '/index.html',
     success: function(data) {       
         document.getElementById("employee_table").innerHTML = data;
      }
    });

    autoReload();  // calling again after 5 seconds
 }, 5000);
}

autoReload(); // calling the function for the first time

或者你也可以使用 $.get

$.get("index.html", function(data, status){
        if(status == "success"){
          document.getElementById("employee_table").innerHTML = data;
       }
 });

$.ajax() 是最可配置的，您可以在其中对 HTTP header 等进行细粒度控制。您还可以使用此方法直接访问 XHR 对象。还提供了更细粒度的错误处理。因此可能会更复杂并且通常是不必要的，但有时非常有用。您必须自己通过回调处理返回的数据。

$.get() 只是 $.ajax() 的简写，但是抽象了一些配置，为它隐藏的内容设置了合理的默认值.将数据返回到回调。它只允许 GET 请求，因此伴随着 $.post() 函数用于类似的抽象，仅用于 POST

.load() 与 $.get() 类似，但增加了允许您定义文档中要插入返回数据的位置的功能。因此真正只有当调用只会产生 HTML 时才可用。它的调用与其他全局调用略有不同，因为它是一种绑定(bind)到特定 jQuery 包装的 DOM 元素的方法。因此，可以这样做:$('#divWantingContent').load(...)

需要注意的是，所有的$.get()、$.post()、.load()都只是wrapper对于 $.ajax() 因为它是在内部调用的。

jQuery 的 Ajax 文档中有更多详细信息:http://api.jquery.com/category/ajax/希望这对您有所帮助。