技术分享：asp.net+Ajax根据滚动条动态异步加载数据_H5之家

作者：男一号 | 时间：2013-9-28 15:42:23 | [小大] | 来源：asp.net |

阅读：15977 |

： 2 | 收藏技术，分享，asp.net，Ajax，根据，滚动条，动态，异步，加载数据 [摘要]：闲来无事，自己用asp.net编写了一个根据滚动条结合Ajax异步加载页面数据的demo，特此拿出来分享给大家。独乐乐不如众乐乐。哈哈！一、实现原理剖析根据滚动条距离窗体上方或者下方距离值通过ajax异步获取数据的原理其实不是那么难懂。 1、能够通过js准确获取滚动条时时位置，包括距离窗体上方或者下方位置值等； 2、编写ajax提供数据源，返回json数据。 3、前台拿到json数据实现数据的动态追加。二、实现步骤 1、编写提供json数据的方法，这里的动态数据是随机生成的，后期自己可以变成访问数据库得到数据。asp.net编写的方法如下所示： protected void Page_Load(object sender, EventArgs e) { ...

一、实现原理剖析

根据滚动条距离窗体上方或者下方距离值通过ajax异步获取数据的原理其实不是那么难懂。

1、能够通过js准确获取滚动条时时位置，包括距离窗体上方或者下方位置值等；

2、编写ajax提供数据源，返回json数据。

3、前台拿到json数据实现数据的动态追加。

二、实现步骤

1、编写提供json数据的方法，这里的动态数据是随机生成的，后期自己可以变成访问数据库得到数据。asp.net编写的方法如下所示：

protected void Page_Load(object sender, EventArgs e) { string getType = Request["type"]; int startNum = int.Parse(Request["startNum"]); int endNum = int.Parse(Request["endNum"]); switch (getType) { case "getList": GetDataList(startNum, endNum); break; } } /// <summary> /// 获取数据 /// </summary> /// <param>起始脚标值</param> /// <param>结束脚标值</param> protected void GetDataList(int StartNum, int EndNum) { List<string> NumList = new List<string>(); int i = 0; for (i = StartNum; i <= EndNum; i++) { NumList.Add(string.Format("{0}、欢迎来到<a href=\"http://www.stepday.com\" target=\"_blank\">STEP DAY</a>社区，我的屌丝窝地址为：<a href=\"http://www.stepday.com/my.stepday/?Coder\" target=\"_blank\">?Coder</a>!", i.ToString())); } Response.Write(NumList.ToJson()); Response.End(); }

2、创建一个index.aspx页面

<div> </div> <div> 数据正在加载，请稍候 ... </div>

设置相关的css样式

引入jQuery的js文件

<title>根据滚动条动态异步加载数据</title> <script src="/js/jquery-1.8.2.min.js" type="text/javascript"></script>

通过扩展jQuery，编写一个监听滚动条的方法

if (!NeuF) var NeuF = {}; NeuF.ScrollPage = function (obj, options, callback) { var _defaultOptions = { delay: 500, marginBottom: 100 }; //默认配置：延迟时间delay和滚动条距离底部距离marginBottom options = $.extend(_defaultOptions, options); this.isScrolling = false; //是否在滚动 this.oriPos = 0; //原始位置 this.curPos = 0; //当前位置 var me = this; //顶层 var $obj = (typeof obj == "string") ? $("#" + obj) : $(obj); //绑定滚动事件 $obj.scroll(function (ev) { me.curPos = $obj.scrollTop(); if ($(window).height() + $(window).scrollTop() >= $(document.body).height() - options.marginBottom) { if (me.isScrolling == true) return; me.isScrolling = true; setTimeout(function () { me.isScrolling = false; }, options.delay); //重复触发间隔毫秒 if (typeof callback == "function") callback.call(null, me.curPos - me.oriPos); }; me.oriPos = me.curPos; }); };

编写一个jQuery的Ajax方法

//异步获取数据 function AjaxGetData(startNum, endNum) { $.ajax({ type: "Get", url: "/Ajax/GetData_Ajax.aspx", dataType: "json", timeout: 10000, async: false, data: "&type=getList&startNum=" + startNum + "&endNum=" + endNum + "&dateTime=" + (new Date()).toString(), beforeSend: function () { }, success: function (result) { if (result) { var contentObj = $("#divContainer"); var content = '<div>'; for (var i = 0; i < result.length; i++) { content += result[i] + "<br/>"; } content += '</div>'; contentObj.append(content); //内容获取后，隐藏加载提示 $("#Loadding").hide(); } }, error: function (errorMsg) { alert("主人出错啦!"); } }); }