通过 AJAX 在 HTML 中刷新时间答案

【问题标题】：Time refreshment in the HTML via AJAX通过 AJAX 在 HTML 中刷新时间
【发布时间】：2009-06-16 11:38:47
【问题描述】：

每当我刷新图表刷新的 HTML 页面时，我都有一个带有图表链接的 html 页面。

我从朋友那里听说，在 AJAX 的帮助下，图表将在给定的时间间隔内自动刷新，而无需刷新该 html 页面。

请帮助我提供相同的 html 代码。

问候，拉杰

【问题讨论】：

标签： javascript html ajax

【解决方案1】：

您可以在 javascript 中使用 setInterval() 方法，以及用于 AJAX 的简单框架（如 jQuery）。

看起来像这样：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
  <head>
    <title>My AJAX Chart</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">

      $(document).ready(function(){
        setInterval("refreshChart", 5000); // Refresh every 5 seconds
      });

      function refreshChart() {
        $.get("myChart.php", function(data) {
          $("div.chartHolder").html(data);
        });
      }

    </script>
  </head>
  <body>

    <h1>My Chart</h1>
    <div class="chartHolder"></div>

  </body>
</html>

【讨论】：

【解决方案2】：

因为听起来你是 JavaScript 新手，所以我建议你看看 jQuery 库，它可以以最少的复杂性做你想做的事：

这样的事情会起作用：

function updateChart() {
  $('#someTable tbody').load('updateChart.html');
}

$(function() {
  setInterval(updateChart, 20000);
});

【讨论】：

【解决方案3】：

如果你结合类似的东西，例如这; http://ra-ajax.org/Docs.aspx?class=Ra.Extensions.Widgets.Timer 用这个； http://ra-ajax.org/samples/Chart-Sample.aspx你会很容易到达那里。

以上示例适用于 .Net，但其他平台也存在类似的构造（和框架）...

【讨论】：