首先建立数据库，数据关系图如下：
本文要实现的效果就是在评论别人文章时，如果文章内容过长或者评论内容过长，实现的一个评论分段延迟加载的效果，即每页可显示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">
<
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
>
|
扫一扫
421
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
