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

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



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

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



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

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

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：一个一般处理程序，用来加载文章内容，源代码如下：

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：也是一个一般处理程序，用于加载评论，源代码如下：

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代码

<!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>