Question

我正在尝试在标签标题中实现像facebook通知'（1）'。下面是我未来网站消息框的简化代码 - 我想要做的是使用AJAX检查是否添加了新消息（新tr），但没有刷新网站，然后在标题标题中显示预期的数字。这是我的代码到目前为止 - 但我必须在添加新的表格行后刷新网站...

<body>
    <div id="container">
        <div id="tab">
            <table id="tabl">
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Message</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>John</td>
                    <td>Hey! What's up!</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Kylie</td>
                    <td>Are you there Kylie?</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Peter</td>
                    <td>Please, buy me a milk</td>
                </tr>                    
            </table>
        </div>
    </div>
    <script>
        var count = document.getElementById('tabl').rows.length - 1;
        var x = new XMLHttpRequest();
        var i = 0;
        x.onreadystatechange = function() {
            if (x.readyState == 4 && x.status == 200) {
                document.title = '(' + count + ')' + ' ' + document.title;
            }
        };
        x.open('GET', 'http://localhost/php13/notif.php', true);
        x.send();
    </script>
</body>

如何在不刷新网站的情况下实现这一目标？

Answer 1

这是因为出于所有实际目的，count变量具有静态值，即使在文档加载事件或任何AJAX调用发生之前也会确定该值。您的AJAX函数不会更改count的值，因此每次执行AJAX时，您都会将document.title值设置为相同的静态值，并且{{1}的数量不断增加}添加强段。

因此，假设count在初始页面加载时为count（就像在您的示例中那样），初始4值为document.title，这里是{{1}每次执行AJAX时值都会改变：

Test

正如你所看到的，你的逻辑完全没错。

Answer 2

你使用什么后端？ PHP的？ ASP？ Node.js的？

无论如何，我认为有人实际打字并发送该消息，处理这种功能的最佳方法是在发送消息时执行它。您必须已经知道邮件的收件人（邮件），因此当收到邮件时，请告知收件人（s）更新其通知。

我知道你列出了ajax，但是使用websockets可能是实现这一目标的最佳技术，你不需要任何常量循环来检查服务器的更新或任何ajax轮询，服务器可以简单地向收件人没有他在客户端做任何事情，收到了一条新邮件。

Answer 3

您需要实施一种技术，允许您从服务器向客户端（浏览器）发送消息。

可能是Websockets，Server Sent Events或something else。

在决定使用哪种技术之前，您需要考虑要支持的旧版浏览器，并检查是否支持此技术。您可以在caniuse.com上查看。

你也可以使用像socket.io这样的库来尝试使用更新的技术（比如Websockets），如果浏览器不支持它会回退到旧的解决方案。

如果你写了更多关于你后端的信息，你就可以给出更准确的答案。

Answer 4

最简单的方法是使用setinterval()

<script>
setInterval(function(){ 
        var count = document.getElementById('tabl').rows.length - 1;
        var x = new XMLHttpRequest();
        var i = 0;
        x.onreadystatechange = function() {
            if (x.readyState == 4 && x.status == 200) {
                document.title = '(' + count + ')' + ' ' + document.title;
            }
        };
        x.open('GET', 'http://localhost/php13/notif.php', true);
        x.send();
}, 1000);
    </script>

它会每1秒检查一次新消息

检查是否添加了新消息AJAX

4 个答案: