滚屏无刷新动态加载数据

我们经常会见到滚动条滑动到底部时会自动加载数据，比如QQ空间的查看动态。下面就用一个简单的Demo来实现

1、首先建一个html文件，代码如下

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6     <style type="text/css">
 7         body { width: 280px; margin: auto; }
 8 
 9         .container { margin: auto; margin-top: 10px; }
10 
11         .single_item { width: 500px; height: 100px; border: 1px solid #ccc; }
12 
13         .nodata { display: none; height: 32px; line-height: 32px; text-align: center; color: #999; font-size: 14px; }
14     </style>
15     <script src="jquery-1.10.2.js"></script>
16     <script type="text/javascript">
17         //loadFlag:防止没有数据了还请求
18         var pi = 1, ps = 10, loadFlag = false;
19         $(function () {
20             loadData();  //加载
21             var winHeight = $(window).height(); //浏览器当前窗口可视区域高度
22             $(window).scroll(function () {
23                 var pageHeight = $(document.body).height(); //浏览器当前窗口文档body的高度
24                 var scrollTop = $(window).scrollTop(); //滚动条top
25                 var res = (pageHeight - winHeight - scrollTop) / winHeight;
26                 if (res < 0) {
27                     loadData();
28                 }
29             });
30         });
31         function loadData() {
32             if (loadFlag)
33                 return;
34             loadFlag = true;
35             $.post("/handler.ashx", { pageIndex: pi, pageSize: ps }, function (dataObj) {
36                 if (dataObj && dataObj.length > 0) {
37                     var htmlStr = '';
38                     for (var i = 0; i < dataObj.length; i++) {
39                         htmlStr += "<div class='single_item'>" + dataObj[i] + "</div>";
40                     }
41                     $("#container").append(htmlStr);
42                     loadFlag = false;
43                 } else {
44                     loadFlag = true;
45                     $(".nodata").show().html("全部数据加载完毕。。。");
46                 }
47                 pi++;
48             }, "json");
49         }
50     </script>
51 </head>
52 <body>
53     <div class="container" id="container">
54         <!--<div class="single_item">
55             第1个数据
56         </div>-->
57     </div>
58     <div class="nodata"></div>
59 </body>
60 </html>

2、后台是使用的一般处理程序(ashx)，代码如下：

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Web.Script.Serialization;
 6 
 7 namespace Demo
 8 {
 9     /// <summary>
10     /// Handler 的摘要说明
11     /// </summary>
12     public class Handler : IHttpHandler
13     {
14         public void ProcessRequest(HttpContext context)
15         {
16             //不做验证了
17             var pi = Convert.ToInt32(context.Request.Form["pageIndex"]);
18             var ps = Convert.ToInt32(context.Request.Form["pageSize"]);
19             List<string> list = new List<string>();
20             //到第4页停止（模拟没有数据）
21             if (pi < 4)
22             {
23                 //模拟数据
24                 for (int i = (pi - 1) * ps + 1; i < pi * ps + 1; i++)
25                 {
26                     list.Add("第" + i + "个数据");
27                 }
28             }
29             context.Response.Write(new JavaScriptSerializer().Serialize(list));
30         }
31 
32         public bool IsReusable
33         {
34             get
35             {
36                 return false;
37             }
38         }
39     }
40 }

还有一种可能情况是等某个元素的滚动条拉到底部去加载数据(一个页面有两个滚动条的时候会用到)，这种情况可以使用这个方法

1         //node:jquery元素【$("#id")】 callback:滚动条滚动到底部的时候触发(这时候请求数据)
2         function nodeScroll(node, callback) {
3             node.scroll(function () {
4                 nodeScrollTotalHeigth = node[0].scrollHeight;
5                 nodeScrollTop = node[0].scrollTop;
6                 nodeHight = node.height();
7                 (nodeScrollTotalHeigth - nodeScrollTop - nodeHight) < 10 && callback();
8             });
9         }

实现就是这样，之前不会的时候感觉这东西好高大上，会了之后觉得其实也没啥，哈哈