jQuery AJAX检测slideUp/Down运动中的数据更改显示

Question

jQuery AJAX检测slideUp/Down运动中的数据更改显示

Has*_*aca 0 javascript asp.net ajax jquery

我想为新闻门户建立一个评论系统.

我希望jQuery AJAX检测是否有人添加了评论数据,它会自动更新slideDown动作中添加的评论.

我怎样才能做到这一点？谢谢.

(注意:我使用ASP.NET作为服务器)

在此输入图像描述

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $.ajax({
                url: 'WebForm1.aspx',
                success: function (data) {
                    $("#Urunler").html(data);
                }
            });
        });
    </script>
    <style>
        li
        {
            width: 100px;
            height: 30px;
            background: yellow;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>


        <ul id="Urunler" runat="server">

        </ul>


    </div>
    </form>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

这是背后的代码,

using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;

namespace WebApplication2
{
    public partial class WebForm1 : System.Web.UI.Page
    {

        SqlConnection cnn = new SqlConnection("Initial Catalog=Northwind;Data Source=localhost;Integrated Security=SSPI;");

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                cnn.Open();
                SqlCommand cmd = new SqlCommand("SELECT FirstName FROM Employees", cnn);
                SqlDataReader dr = cmd.ExecuteReader();
                if (dr.HasRows)
                {
                    while (dr.Read())
                    {
                        Urunler.InnerHtml += "<li>" + dr.GetString(0) + "</li>";
                    }
                }
                cnn.Close();
            }
        }
    }
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

MD.*_*oob 8

如果我做得对,你正在寻找类似facebook/gmail的实时通知.

您可以通过实现多个架构来实现它:

Ajax池:在每N(asuume 5)秒后向服务器和服务器执行ajax请求将为您提供最新的注释.这是最简单,最重的方式.有了一点流量,即使没有任何反应,也不会花费大量时间在服务器上充斥着如此多的不必要的请求.
Web套接字:您可以使用socket.io并打开套接字以将更新中继到所有客户端.这是解决此问题的常用方法.一个漂亮的.您可以使用此答案来应对此方法.
反向Ajax/Comet:最后一个是最难的.Facebook使用这种架构,因为他们正在处理一些高流量(:p)我们可以假设这个具有扩展能力.您可以通过此视频了解反向ajax或彗星方法.此所以回答帮助你得到它的想法.

更新: 此文章似乎给位不同的技术的触摸来实现自己的目标.它可能有所帮助.

Answer 2

ade*_*neo 5

我来试一试！

这应该每五秒从服务器获取 LI，并将它们与任何现有评论进行比较，如果它们不同，请将新评论插入 DOM 并将它们向下滑动：

var comments = {
    get: function () {
        return $.ajax({ 
            url   : 'WebForm1.aspx',
            cache : false
        });
    },
    check: function (coll1, coll2, UL_ID) {
        var diff = [];
        $.each(coll2, function (_, li2) {
            var same = false;
            $.each(coll1, function (_, li1) {
                if ($(li1).text() == $(li2).text()) same = true;
            });
            if (!same) diff.push(li2);
        });
        this.output(diff, UL_ID);
    },
    poll: function (UL_ID) {
        var self = this;
        self.get().done(function (data) {
            self.check($(UL_ID).find('li'), $('<ul />').append(data).find('li'), UL_ID);
        });
    },
    output: function (elems, UL_ID) {
        $.each(elems, function (i, elem) {
            $(elem).hide().delay(i * 300).slideDown(350).appendTo($(UL_ID));
        });
    },
    init: function (UL, interval) {
        var self = this;
        setInterval(function () {
            self.poll(UL);
        }, interval);
        this.poll(UL);
    }
}

$(document).ready(function () {
    comments.init('#Urunler', 5000);
// ^^ starts plugin   ^^ ID     ^^ polling speed (5 seconds)
});

Run Code Online (Sandbox Code Playgroud)

我强烈建议在数据库中给每个评论一个 UUID，然后使用它来比较以找到新的评论。
上面的代码现在只比较评论的内容，所以如果完全相同的评论被发布两次，可能会有问题。

似乎您的数据库输出的唯一内容是评论本身，没有唯一标识符，因此如果您为 UUID 添加一行，则需要更改数据库结构，这有点超出了范围在我看来的问题。

这是一个快速演示，其中数据库已替换为 localStorage

示范

归档时间：	12 年，6 月前
查看次数：	2355 次
最近记录：	12 年，6 月前