Asp.net使用JQuery实现评论的无刷新分页及分段延迟加载效果

首先建立数据库，数据关系图如下：

本文要实现的效果就是在评论别人文章时，如果文章内容过长或者评论内容过长，实现的一个评论分段延迟加载的效果，即每页可显示30条评论，可每隔10条延迟加载一次以提高网页传输显示效率。

 

我所实现的页面延迟的原理如下图，就是求出X的距离小于100时进行加载延迟的评论，然后又设置了一个标记位，用来判断延迟加载了多少次，每页仅能加载30条评论记录。

 

 

然后再评论末端加载上页码实现无刷新进行分页的效果。

分页的方法也是比较简单的，这里自己实现了一个存储过程，使用到row_number()函数：

 

1
2
3
4
5
6
7
8
9
10
11
12
ALTER PROCEDURE ps_getpageandload
    @aid int,
    @startindex int,
    @endindex int
AS
    select  * from
    (
        select Row_Number() over(order by CID) as rownum,Username,Comment
        from T_Comments where AID=@aid
    ) as T
    where T.rownum>=@startindex and T.rownum<=@endindex
    RETURN

 

就是输入一个起始位置的参数和结束位置的参数，取出中间的数据。

这样，在程序中就好取出数据了，比如：我第一页就是要1-30的数据，就让startindex=1,endindex=30就行了；第二页就是31-60的数据，同理。

 

LoadArticle.ashx：一个一般处理程序，用来加载文章内容，源代码如下：

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Configuration;
using System.Data.SqlClient;
using Microsoft.ApplicationBlocks.Data;
using System.Data;
using System.Text;
 
namespace AJAXPagingTest
{
    /// <summary>
    /// Summary description for LoadArticle
    /// </summary>
    public class LoadArticle : IHttpHandler
    {
 
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
 
            //获取连接字符串
            String connString = ConfigurationManager.ConnectionStrings["MyConnectionString"].ConnectionString;
             
            //获取所要读取的文章编号
            String aid = context.Request["article"];
            SqlParameter[] sp=new SqlParameter[1];
            sp[0]=new SqlParameter("@aid",aid);
 
            SqlDataReader dr = SqlHelper.ExecuteReader(connString,
                CommandType.Text,
                "select Title,Article from T_Articles where AID=@aid",
                sp);
 
            StringBuilder sb = new StringBuilder();
 
            while (dr.Read())
            {
                sb.Append(dr.GetString(dr.GetOrdinal("Title")));
                sb.Append("|");
                sb.Append(dr.GetString(dr.GetOrdinal("Article")));
            }
 
            context.Response.Write(sb.ToString());
 
        }
 
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

 

LoadCommentAndPaging.ashx：也是一个一般处理程序，用于加载评论，源代码如下：

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using Microsoft.ApplicationBlocks.Data;
using System.Configuration;
using System.Web.Script.Serialization;
 
 
namespace AJAXPagingTest
{
    /// <summary>
    /// Summary description for LoadCommentAndPaging
    /// </summary>
    public class LoadCommentAndPaging : IHttpHandler
    {
 
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
 
            String connStr = ConfigurationManager.ConnectionStrings["MyConnectionString"].ConnectionString;
            List<Comment> Comments = new List<Comment>();
            String result = String.Empty;
 
            //获取页面的动作
            String action = context.Request["action"];
             
            //页面第一加载的时候
            if (action=="load")
            {
                DataTable dt = SqlHelper.ExecuteDataset(connStr,
                    CommandType.Text,
                    "select top(10) * from T_Comments where AID=1").Tables[0];
 
                foreach (DataRow dr in dt.Rows)
                {
                    Comment comment = new Comment();
                    comment.Username = dr["Username"].ToString();
                    comment.Commentz = dr["Comment"].ToString();
                    Comments.Add(comment);
                }
                JavaScriptSerializer jss = new JavaScriptSerializer();
                result = jss.Serialize(Comments);
                context.Response.Write(result);
                return;
            }
 
            //获取当前页码
            String pageString = context.Request["page"];
 
            //处理延时或分页加载评论
            if (action=="pageOrlazy")
            {
                //获取当前延时加载的次数
                String countString = context.Request["count"];
 
                int page, count;
 
                //判断参数是否正确
                if (int.TryParse(pageString, out page) && int.TryParse(countString, out count))
                {
                    //计算需要加载评论的起始索引
                    int startindex = (page - 1) * 30 + count * 10 + 1;
 
                    //计算需要加载评论结束索引
                    int endindex = startindex + 9;
 
                    SqlParameter[] sp = new SqlParameter[3];
                    sp[0] = new SqlParameter("@aid", 1);
                    sp[1] = new SqlParameter("@startindex", startindex);
                    sp[2] = new SqlParameter("@endindex", endindex);
 
                    DataTable dt = SqlHelper.ExecuteDataset(connStr,
                        CommandType.StoredProcedure,
                        "ps_getpageandload",
                        sp).Tables[0];
 
                    foreach (DataRow dr in dt.Rows)
                    {
                        Comment comment = new Comment();
                        comment.Username = dr["Username"].ToString();
                        comment.Commentz = dr["Comment"].ToString();
                        Comments.Add(comment);
                    }
 
                    JavaScriptSerializer jss = new JavaScriptSerializer();
                    result = jss.Serialize(Comments);
                    context.Response.Write(result);
                    return;
 
                }
                else
                {
                    throw new Exception("参数传递错误");
                }
 
            }
 
            //获取页码
            if (action=="pagenumber")
            {
                int number = Convert.ToInt32(SqlHelper.ExecuteScalar(connStr,
                    CommandType.Text,
                    "select count(*) from T_Comments"));
 
                context.Response.Write((number/30).ToString());
                return;
            }
 
            
        }
 
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
 
    public class Comment
    {
        public String Username {get;set; }
        public String Commentz {get;set; }
    }
}

CommnetPage.htm：最后是前台页面的JQuery代码

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Style/StyleSheet1.css" rel="stylesheet" type="text/css" />
    <script src="JS/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
 
            //加载文章内容
            $.post("LoadArticle.ashx", { "article": "1" }, function (data, state) {
                if (state == "success") {
 
                    //利用"|"来分隔标题和正文
                    var article = data.split("|");
                    $("#article h3").text(article[0]);
                    $("#article").append(article[1]);
                }
            });
 
            //加载初始的10条评论条数
            $.post("LoadCommentAndPaging.ashx", { "action": "load" }, function (data, state) {
                if (state == "success") {
                    var comments = $.parseJSON(data);
 
                    for (var i = 0; i < comments.length; i++) {
                        var comment = "<tr><td>" + comments[i].Username + "说：</td><td>" + comments[i].Commentz + "</td></tr>";
                        $("#comment").append(comment);
                    }
                }
            });
        });
 
        //标记页面延迟数
        var flag = 1;
 
        //标记当前页面
        var currentpage = 1;
 
        //监测是否需要加载评论
        function check(n) {
 
            //监测浏览器的模式，根据不同的模式获取客户端高度会有不同
            var dom = document.compatMode == "CSS1Compat" ? document.documentElement : document.body;
            var pre = document.getElementById("preload");
 
            //获取滚动条离顶端的高度，用IE测试时是用
            //documentElement.scrollTop获取高度，
            //而在用chrome测试时是body.scrollTop获取高度
            var scrtop = dom.scrollTop || document.body.scrollTop;
 
            //传入的参数为当前页数，保存为全局变量
            currentpage = n;
 
            //当客户端显示窗口离标记的地方小于100距离时开始加载
            if (pre.offsetTop - (dom.clientHeight + scrtop) < 100) {
                $.post("LoadCommentAndPaging.ashx", { "action": "pageOrlazy", "page": currentpage, "count": flag }, function (data, state) {
                    if (state == "success") {
                        var comments = $.parseJSON(data);
                        for (var i = 0; i < comments.length; i++) {
                            var comment = "<tr><td>" + comments[i].Username + "说：</td><td>" + comments[i].Commentz + "</td></tr>";
                            $("#comment").append(comment);
                        }
                    }
                });
 
                flag = flag + 1;
 
                //如果加载多于3次了则不加载评论了，加载页码
                if (flag <= 2) {
                    setTimeout("check(currentpage)", 2000);
                }
                else {
                    //加载页码
                    $.post("LoadCommentAndPaging.ashx", { "action": "pagenumber" }, function (data, state) {
                        if (state == "success") {
                            var count = parseInt(data, 10);
 
                            for (var i = 1; i <= count + 1; i++) {
                                var control;
 
                                //等于当前页时则不显示超链接
                                if (i != currentpage) {
                                    control = "<td><a href=''>" + i + "</a></td>";
                                }
                                else {
                                    control = "<td>" + i + "</td>";
                                }
 
 
                                $("#anchorlink").append(control);
 
 
                            }
                            //加载分页点击时的事件
                            $("#anchorlink td").click(function (e) {
                                e.preventDefault();  //阻止超链接的转向
                                $("#comment").empty();  //将评论区清空
                                $("#anchorlink").empty();  //将页码清空
                                $("#preload").text("评论正在加载中..."); 
                                flag = 0;
                                var page = parseInt($(this).text());
                                check(page);
 
                            });
 
                        }
                    });
                    //去掉“评论加载中”的显示
                    $("#preload").text("");
                }
            }
            else {
                setTimeout("check(currentpage)", 2000);
            }
 
        }
 
        //每隔两秒检查一下页面是否需要加载评论
        setTimeout("check(currentpage)", 2000);
 
    </script>
</head>
<body>
    <div id="main">
        <div id="article">
            <h3>
            </h3>
        </div>
        <div>
            <table id="comment">
            </table>
            <p id="preload">
                评论正在加载中...</p>
            <table>
                <tr id="anchorlink">
                </tr>
            </table>
        </div>
    </div>
</body>
</html>
posted @ 2015-11-27 15:16  燕儿归  阅读(664)  评论(0)    收藏  举报