0

ニュース ポータルのコメント システムを構築したいと考えています。

誰かがコメント データを追加したかどうかを 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>

これがコードビハインドです。

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();
            }
        }
    }
}
4

6 に答える 6

5

やってみます！

これにより、サーバーから 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)
});

各コメントにデータベース内の UUID を付与し、それを使用して比較して新しいコメントを見つけることを強くお勧めします。
上記のコードは、コメントの内容のみを比較するようになったため、まったく同じコメントが 2 回投稿された場​​合、問題が発生する可能性があります。

データベースが出力しているのはコメント自体だけのようです。一意の識別子はありません。そのため、UUID の行を追加する場合、データベース構造を変更する必要があります。私の意見では質問です。

データベースが localStorage に置き換えられた簡単なデモを次に示します。

デモンストレーション

于 2013-11-17T14:22:12.467 に答える
2

既にロードされたデータをサーバーに渡す必要があります。サーバーは、まだロードされていないデータをチェックして返すことができます。ここでは、setTimeout代わりに を使用することもお勧めしsetIntervalます。setInterval は常に間隔の後に次の呼び出しを起動するため、関数内で ajax も使用しますが、これも不十分です => サーバーの負荷が高く、応答時間が遅い場合、これは面倒になる可能性があります。この関数では、現在の ajax が完了したときにのみ、次の間隔を設定する必要があります。

<script>
        $(document).ready(function () {
            refreshComments(); //trigger the first call
        });

        function refreshComments(){
            var loadedIds = $("#Urunler li").map(function(){
                              return $(this).attr("employeeId");
                          }).get()
                          .join(",")); //get current loaded ids

            $.ajax({
                url: 'WebForm1.aspx?loaded='+loadedIds,
                success: function (data) {
                    if (data){ //append only when there is a newly added comment.
                       var element = $(data);
                       element.hide();
                       $("#Urunler").append(element);//use append instead of html because html will replace the old ones.
                       element.slideDown();
                       setTimeout(refreshComments,5000);
                    }
                }
            });

        }
</script>

サーバー側のコードを更新して、ID を返し、ID を確認する必要があります

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)
            {
                //Check for already loaded Ids, I assume that each record in your database has an Id
                string loadedIds = Request.QueryString["loaded"];
                string sql = "SELECT EmployeeId,FirstName FROM Employees";
                if (!string.IsNullOrEmpty(loadedIds)){
                    sql = "SELECT EmployeeId ,FirstName FROM Employees WHERE EmployeeId NOT IN (" 
                           + loadedIds +")";  
                }// You could query it using a safer method than string concatenation, here I just demonstrate the idea

                cnn.Open();

                SqlCommand cmd = new SqlCommand(sql, cnn);
                SqlDataReader dr = cmd.ExecuteReader();
                if (dr.HasRows)
                {
                    while (dr.Read())
                    {
                        //This should be a Literal Control, embed Id in the response.
                        Urunler.Text += string.Format("<li employeeId='{0}'>{1}</li>",dr.GetString(0),dr.GetString(1));
                    }
                }
                cnn.Close();
            }
        }
    }
}
于 2013-11-16T08:57:27.087 に答える
0

これを試すことができます

        var lastSearchedDate =  new Date();
    var isBusy = false;

    function scrollEvent(e) {
        var body = document.body,
             html = document.documentElement;

        var docHeight = Math.max(body.scrollHeight, body.offsetHeight,
                               html.clientHeight, html.scrollHeight, html.offsetHeight);
        var currentScroll = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
        if (((docHeight * 75) / 100) < currentScroll) {
            if (!isBusy) {
                fetchData()
            }
        }
    }

    function fetchData(){
        isBusy = true;
        $.ajax({
            cache: !1,
            type: "POST",
            data: $.toJSON(dataToPost_with_lastSearchedDate),
            contentType: "application/json; charset=utf-8",
            url: requestUrlToFetch_JSON_Data,
            success: function (response_JSON_data) {
                // Parse this JSON data and Append HTML to any div you want on Your Page 
                doStuff(response_JSON_data);
                lastSearchedDate =  new Date();
                isBusy = false;
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(ajaxOptions);
                alert(thrownError);
                alert(xhr.status);
            }
        });
    }

    function OnFirstLoad() {
        fetchData();
        if (document.attachEvent) {
            document.attachEvent('onscroll', scrollEvent);
        } else if (document.addEventListener) {
            document.addEventListener('scroll', scrollEvent, false);
        }
    }

    window.onload = OnFirstLoad;

リクエストを行ったサーバー Web/ページ メソッドで解析する必要がある JavaScript 日付を使用していることに注意してください (DateTime.ParseExact を使用)。

于 2013-11-12T11:24:59.587 に答える
0

このようなことを試してみてください。実装したことがないので、役に立つかもしれません

いずれの場合も、接続を待機するサーバー ファイル (PHP で記述) を実行するという考え方があります。1 つまたは複数のクライアントに接続すると、データを双方向にプッシュできます。いくつかの PHP WebSocket プロジェクトがあります。これをチェックしてください：

http://code.google.com/p/phpwebsocket

node.js => http://nodejs.org/

http://net.tutsplus.com/tutorials/javascript-ajax/learning-serverside-javascript-with-node-js/

BinaryJS => http://binaryjs.com/

http://ajaxpatterns.org/HTTP_Streaming

于 2013-11-16T13:03:12.047 に答える
0

html5 を使用したサーバー送信イベントについては、 http://www.w3schools.com/html/html5_serversentevents.aspを参照してください。これは、Twitter と Facebook が使用するものです。

于 2013-11-18T00:01:56.650 に答える