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”）; 因为它只会在成功函数中替换给定元素的内容，这意味着当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标头等的细粒度控制。您还可以使用此方法直接访问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/ 希望这会对你有所帮助。

使用AJAX重新加载html页面

1 个答案: