php+ajax实现拖动滚动条分批加载请求加载数据
HTML:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
img{border:0;}
</style>
<script language="javascript" src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script language="javascript">
var PageNo = 1;
var PageSize = 50;
$(document).ready(function(){
$.get("ajax.php",function(data){
$("#mypage").html(data);
})
})
iIntervalId = setInterval("test();",2000);
function show(){
PageNo++;
pageOffset = (PageNo-1)*PageSize+1;
$.get("ajax.php?act=get_more&LimitStart="+pageOffset+"&PageNo="+PageNo+‘&r=‘+Math.random(),function(data){
if(‘failure‘ != data){
$("#mypage").append(data);
//$("#showmore").html(‘<a class="handle" href="javascript:show()">显示更多结果</a>‘);
}
})
}
//当前滚动条位置高度
function getScrollTop(){
var scrollTop=0;
if(document.documentElement&&document.documentElement.scrollTop){
scrollTop=document.documentElement.scrollTop;
} else if(document.body)
{
scrollTop=document.body.scrollTop;
}
return scrollTop;
}
//取窗口可视范围的高度
function getClientHeight(){
var clientHeight=0;
if(document.body.clientHeight&&document.documentElement.clientHeight)
{
var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
} else
{
var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
}
return clientHeight;
}
//显示状态加载图片
function showLoadingImg() {
$(‘#showmore‘).html(‘<a class="handle" href="javascript:show()"><img src="loading.gif" height="32px" />显示更多结果</a>‘);
}
//取得当前页面显示所占用的高度
function getScrollHeight()
{
return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
function test()
{
if (getScrollTop()+getClientHeight()==getScrollHeight())
{
//此处还要做判断，判断数据是否已经加载完，若加载完就不在显示加载图片
$.get("ajax.php?act=GetPageTotal",function(data){
//var string = PageNo + ‘----‘ + data;
//alert(string);
if(PageNo >= data){
clearInterval(iIntervalId);
$("#showmore").hide();
return;
}
})
showLoadingImg();
show();
}
}
</script>
</head>
<body>
<div id="mypage">
</div>
<div class="showmore" id="showmore"><a class="handle" href="javasrcipt:show();">显示更多结果</a></div>
</body>
</html>PHP:
<?php
$conn = mysql_connect(‘localhost‘,‘root‘,‘123456‘);
mysql_select_db(‘sx‘);
mysql_query("SET NAMES UTF8");
$act = empty($_GET[‘act‘]) ? ‘‘ : $_GET[‘act‘];
if(‘GetPageTotal‘ == $act){
$sql = "SELECT COUNT(*) AS c FROM `shuxiang_archives`";
$result =mysql_query($sql);
$row = mysql_fetch_array($result);
$Total = $row[‘c‘];
$PageSize = 50;
echo $PageTotal = ceil($Total/$PageSize);
}
if (‘‘ == $act) {
$sql = "SELECT id,title FROM `shuxiang_archives` ORDER BY id DESC LIMIT 0,50";
$result = mysql_query($sql);
$arrAll = array();
while ($arr = mysql_fetch_object($result))
{
echo ‘<p>‘.$arr->id.‘---‘.$arr->title.‘</p>‘;
}
}
if (‘get_more‘ == $act) {
$sql = "SELECT COUNT(*) AS c FROM `shuxiang_archives`";
$result =mysql_query($sql);
$row = mysql_fetch_array($result);
$Total = $row[‘c‘];
$PageSize = 50;
$PageTotal = ceil($Total/$PageSize);
$LimitStart = (int)$_GET[‘LimitStart‘];
$PageNo = (int)$_GET[‘PageNo‘];
if ($PageNo <= $PageTotal) {
$sql = "SELECT id,title FROM `shuxiang_archives` ORDER BY id DESC LIMIT $LimitStart,50";
$result = mysql_query($sql);
$arrAll = array();
while ($arr = mysql_fetch_object($result))
{
echo ‘<p>‘.$arr->id.‘---‘.$arr->title.‘</p>‘;
}
}else {
echo ‘failure‘;
}
}