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