如何使用AJAX自动刷新页面的一部分?

时间:2010-03-16 20:19:08

标签: javascript ajax

$messages = $db->query("SELECT * FROM chatmessages ORDER BY datetime DESC, displayorderid DESC LIMIT 0,10");
while($message = $db->fetch_array($messages)) {
    $oldmessages[] = $message['message'];
}
$oldmessages = array_reverse($oldmessages);
?>
<div id="chat">
<?php
for ($count = 0; $count < 9; $count++) {
    echo $oldmessages[$count];
}
?>
<script language="javascript" type="text/javascript">
<!--
setInterval( "document.getElementById('chat').innerHTML='<NEW CONTENT OF #CHAT>'", 1000 );
-->
</script>
</div>

我正在尝试创建一个PHP聊天室脚本,但是我在使用AutoRefresh时遇到了很多麻烦

内容应该自动更新,你如何做到这一点?我一直在寻找近一个小时

2 个答案:

答案 0 :(得分:1)

我会将您拥有的PHP功能放在一个返回JSON的sperate页面中。从那里你可以使用jQuery和内置的AJAX工具调用该方法。非常简单。从jQuery开始:http://api.jquery.com/category/ajax/

答案 1 :(得分:0)

您需要设置一个服务器端脚本,该脚本仅呈现聊天div的内容并使用ajax来获取它。它很容易用jquery完成:

在你的html文档中:

<head>
...
    <script src="/path/to/jquery.js" type="text/javascript"></script>
    <script>
        var chatUpdateInterval = null;
        function initChat() {
            chatUpdateInterval = window.setInterval(updateChat, 5000); /* every 5 seconds */
        }
        function updateChat() {
            $.ajax({
                url: '/url/path/to/your/script.php'
               ,dataType: 'HTML'
               ,success: function(data, status, xhr){
                   $('#chat').append($(data).html());
               }
            });
        }
        $(document).ready(function(){
             initChat();
        });
    </script>
...
</head>
<body>
    <div id="chat">
      please stand by while we're firing up the coal!
    </div>
</body>

请注意,这不是很好,它只是一个让你入门的样本。你应该看看jquery的$.ajax