使用AJAX重新加载HTML页面

3
我有一个非常简单的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...?


1
我不知道这是否有任何区别,但是尝试在此之前empty()一下? $("#employee_table").empty().load("index.html") 话虽如此,这会闪烁一下,因为load()是异步的,但至少您可以诊断内存问题。 - Jeremy Thille
1
请注意,性能不仅取决于 JavaScript 所做的事情,您浏览器中运行的其他插件在重新加载期间可能会干扰站点/选项卡,从而导致高内存使用率。 - Thielicious
1
在这种情况下,使用ajax调用加载文件。在回调函数中,清空表格并立即用返回的数据填充它。 - Jeremy Thille
@Amessihel 我不需要 jQuery。我只是看到有人用它来实现那个目的。 - bLAZ
@bLAZ 你可以看一下这个答案 - Amessihel
显示剩余2条评论
1个回答

3

您也可以使用$.ajax而不是$("").load("url");因为它只会在成功函数中替换给定元素的内容,这意味着当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 headers 等进行细粒度控制。使用此方法,您还可以直接访问 XHR 对象。它还提供了稍微更精细的错误处理。因此可能更加复杂且不必要,但有时非常有用。您需要通过回调函数自己处理返回的数据。 $.get() 只是 $.ajax() 的一种简写形式,但抽象了一些配置,为您隐藏了一些合理的默认值。将数据返回给回调函数。它仅允许 GET 请求,因此伴随着 $.post() 函数进行类似的抽象,只适用于 POST。 .load() 类似于 $.get(),但添加了功能,允许您定义返回数据插入文档的位置。因此,只有在调用仅会产生 HTML 时才真正可用。由于它是与特定 jQuery 封装的 DOM 元素相关联的方法,因此其调用方式略有不同于其他全局调用。因此,您需要这样做:$('#divWantingContent').load(...) 应注意所有的 $.get()$.post().load() 都只是 $.ajax() 的包装器,因为它在内部被调用。
更多细节请参阅 jQuery 的 Ajax 文档:http://api.jquery.com/category/ajax/ 希望这能帮助您。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接