浏览器窗口滚动加载数据采用异步形式从后台加载数据

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

以下滚动效果为在网上查找。

在滚动条距顶部距离(页面超出窗口的高度)时采用异步形式从后台加载数据

 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ScrollLoadData.aspx.cs" Inherits="WebApplication1.ScrollLoadData" %> 

<!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 runat="server"> 
<title>滚动加载数据库数据</title> 
<script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> 
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function () { 

var range = 50; //距下边界长度/单位px 
var elemt = 500; //插入元素高度/单位px 
var maxnum = 20; //设置加载最多次数 
var num = 1; 
var totalheight = 0; 
var main = $("#content"); //主体元素 
$(window).scroll(function(){ 
var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度) 

totalheight = parseFloat($(window).height()) + parseFloat(srollPos); 
if (($(document).height() - range) <= totalheight && num != maxnum) { 
$.ajax({ 
url: "../demo/HandlerDemo.ashx",//显示数据的方法页 
type: "GET", 
data: "name=json", 
dataType: "json", 
//cache: false, 
success: function (data) { 
data = eval(data); 
var varHtml = ""; 
varHtml = "<ul>" 
$(data).each(function (i) { 
varHtml += "<li>" + data[i].ID + ":" + data[i].Event + "</li>"; //ID 和Event为数据库映射的字段 
}); 
varHtml += "</ul>"; 
main.append("<div style='border:0px solid tomato;margin-top:20px;color:#ac" + (num % 20) + (num % 20) + ";height:" + elemt + "' >hello world" + srollPos + "<br />"+varHtml + "---" + num + "</div>"); 
}, 
error: function () { 
alert("error"); 
} 

}); 

num++; 
} 
}); 
}); 
</script> 
<style type="text/css"> 
li 
{ 
list-style-type:none; 
float:left; 
padding-left:20px; 

} 
</style> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div id="content" style="height:960px"> 
<div id="follow">this is a scroll test;<br/> 页面下拉自动加载内容</div> 
<div style='border:1px solid tomato;margin-top:20px;color:#ac1;height:800' >hello world test DIV</div> 
</div> 

</form> 
</body> 
</html> 