Ajax动态滚动加载数据（第一版）

看新浪微博，人人网都有这样的效果：滚动条滚动到最下面的时候，新的数据就被自动加载出来了，今天亲自尝试了一下这个效果的实现。

核心代码更新：

首先，准备一个分页的存储过程：

CREATEPROCEDUREproctest
1. @pagesizeINT,
2. @pagenumberINT
3. AS
5. SELECT*
6. FROM(SELECTROW_NUMBER()OVER(ORDERBYuserid)ASROWNUM,c_name,user_emailFROMehrusersWHEREc_name<>''
7. )ASproducts
8. WHEREROWNUMBETWEEN@pagesize*(@pagenumber-1)+1and@pagesize*@pagenumber
10. EXECdbo.proctest20,1

//Test
1. publicstaticDataTableGetTable(intpagesize,intpagenum)
2. {
3. stringsql=string.Format(@"EXECdbo.proctest{0},{1}",pagesize,pagenum);
4. DataSetds=SqlHelper.ExecuteDataset(ConnString.GetConString,CommandType.Text,sql);
5. if(ds.Tables.Count>0&&ds.Tables[0].Rows.Count>0)
6. returnds.Tables[0];
7. else
8. returnnull;
9. }

copy

protectedvoidPage_Load(objectsender,EventArgse)
1. {
2. if(Request.QueryString["pagesize"]!=null&&Request.QueryString["pagenumber"]!=null)
3. intpagesize=int.Parse(Request.QueryString["pagesize"].ToString());
4. intpagenumber=int.Parse(Request.QueryString["pagenumber"].ToString());
5. System.Data.DataTabledt=DB.GetTable(pagesize,pagenumber);
6. stringjson=Tools.CreateJsonParameters(dt);
7. Response.Write(json);
8. }
9. 其中用到了一个aspx页面作为controller。

   接下来，就是比较重要的页面和js代码了：

   页面：

   [html] copy
   <!DOCTYPEhtml>
   1. <htmlxmlns="http://www.w3.org/1999/xhtml">
   2. headmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
   3. title>滚动测试</style .mainDiv{
   4. width:800px;
   5. border:solid1px#f00;
   6. padding:10px;
   7. .item{
   8. width:600px;
   9. height:50px;
   10. border:solid1px#00ff90;
   11. font-size:12px;
   12. margin:10px;
   13. .title{
   14. font-size:16px;
   15. line-height:20px;
   16. .content{
   17. line-height:14px;
   18. scriptsrc="Scripts/jquery-1.7.1.js">scriptbodyh1divclass="mainDiv" <!--divclass="item"divclass="title">titledivdivclass="content">contentcontentcontentcontentcontentcontentcontent --html>
   
   JS：

   copy

   <scripttype="text/javascript">
   1. vargPageSize=10;
   2. vari=1;//设置当前页数，全局变量
   3. $(function(){
   4. //根据页数读取数据
   5. functiongetData(pagenumber){
   6. i++;//页码自动增加，保证下次调用时为新的一页。
   7. $.get("Ajax.aspx",{pagesize:gPageSize,pagenumber:pagenumber},153); font-weight:bold; background-color:inherit">function(data){
   8. if(data.length>0){
   9. varjsonObj=JSON.parse(data);
   10. insertDiv(jsonObj.Head);
   11. });
   12. //初始化加载第一页数据
   13. getData(1);
   14. //生成数据html，append到div中
   15. functioninsertDiv(json){
   16. var$mainDiv=$(".mainDiv");
   17. varhtml='';
   18. for(vari=0;i<json.length;i++){
   19. html+='<divclass="item">';
   20. html+='<divclass="title">'+json[i].ROWNUM+''+json[i].c_name+'</div>';
   21. html+='<divclass="content">'+json[i].user_email+'</div>';
   22. html+='</div>';
   23. $mainDiv.append(html);
   24. //==============核心代码=============
   25. varwinH=$(window).height();//页面可视区域高度
   26. //定义鼠标滚动事件
   27. $(window).scroll(varpageH=$(document.body).height();
   28. varscrollT=$(window).scrollTop();//滚动条top
   29. varaa=(pageH-winH-scrollT)/winH;
   30. if(aa<0.02){//0.02是个参数
   31. getData(i);
   32. //==============核心代码=============
   33. </script>
   
   最终效果：

   滚动前：

   滚动自动刷新：

   后来又对这一版本进行了一些改进，详见：

   http://www.cnblogs.com/dannywang/p/3337473.html

   （编辑：李大同）

   【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!