在不刷新页面的情况下定期更新页面上的信息

Question

我的网站上有一个 cmets 部分，我需要一种方法让它实时更新（或每 30 秒左右）它使用 PHP 从 mysql 数据库获取 cmets：

    <?php
                $link = mysql_connect('localhost', 'root', '');
                if (!$link) {
                    die('Could not connect: ' . mysql_error());

                }
                mysql_select_db('SJCE');
                $qu1 = mysql_query("SELECT `ID`,`contence`,`from`,`time`,`subject` FROM `***` WHERE `where` = 1 ORDER BY  `time` DESC LIMIT 0 , 30");
                $numr1 = mysql_num_rows($qu1);
                $i = 1;
                while($row=mysql_fetch_array($qu1)) {
                    $i++;
                    echo '
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="panel panel-primary">
                                <div class="panel-heading panel-title h3">
                                    <div class="row">
                                        <div class="col-xs-4">
                                            <i class="fa fa-clock-o"></i> '.$row['3'].'
                                        </div>
                                        <div class="col-xs-4 text-center">
                                            '.$row['4'].'
                                        </div>
                                        <div class="col-xs-4 text-right">
                                            <i class="fa fa-user"></i> '.$row['2'].'
                                        </div>
                                    </div>
                                </div>
                                <div class="panel-body">
                                    '.$row['1'].'
                                </div>
                            </div>
                        </div>
                    </div>
                    ';
                }
            ?>

目前我使用一段 JavaScript 来刷新页面：

    <script type="text/javascript">
    timeout = setTimeout("location.reload(true);",5000);
function disable_ar(){
    clearTimeout(timeout);
}
function enable_ar(){
    timeout = setTimeout("location.reload(true);",5000);
}
</script>

这可行，但会使页面每 5 秒闪烁一次，有时会导致页面无法正常加载。

我需要一种在不刷新整个页面的情况下更新 cmets 的方法。

谢谢。

附：我对javascript、ajax和jquery知之甚少

Answer 1

加载jquery库：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

然后使用这样的 ajax 脚本（必须在加载 jquery 后调用）。

并使用间隔，而不是超时（只运行一次）。

$(function(){

  window.setInterval(function(){
    loadLatestResults();
  }, 5000);

  function loadLatestResults(){

    $.ajax({
      url : '/load/from/this/url.php',
      cache : false,
      success : function(data){
        $('#id-of-element-into-which-results-are-loaded').html(data);
      }
    });
  }

});