滚屏加载--无刷新动态加载数据技术的应用

滚屏加载技术，就是使用Javascript监视滚动条的位置，每次当滚动条到达浏览器窗口底部时，触发一个Ajax请求后台程序，返回相应的数据，并将返回的数据追加到页面底部，从而实现了动态加载，其实就是一个典型的Ajax应用。

1、首先，我们要获取浏览器可视区域页面的高度：

var winH = $(window).height(); 

2、然后，当滚动页面的时候需要做的事情是：计算页面总高度（当滚动底部时，页面新加载数据，所以页面总高度是动态变化的），计算滚动条位置（滚动条位置也是随着加载页面的高度动态变化的），然后构造一个公式，计算相对比例。

$(window).scroll(function () { 
    var pageH = $(document.body).height(); //页面总高度 
    var scrollT = $(window).scrollTop(); //滚动条top 
    var aa = (pageH-winH-scrollT)/winH; 
}); 

3、当滚动条接近页底时，触发ajax加载，在本例中我们使用jQuery的getJSON方法，向服务端result.php发送请求，请求的参数为page，即页数。

if(aa<0.02){ 
    $.getJSON("result.php",{page:i},function(json){ 
        ..... 
    }); 
 } 

4、如果请求响应成功返回JSON数据，则解析JSON数据，并将数据追加到页面DIV#container后，如果没有JSON数据返回，则说明数据全部显示完毕。

if(json){ 
    var str = ""; 
    $.each(json,function(index,array){ //遍历 
        var str = "..."; //获取的JSON数据 
        $("#container").append(str); //追加 
    }); 
    i++;  //页数+1 
}else{ 
    $(".nodata").show().html("别滚动了，已经到底了。。。"); 
    return false; 
} 

完整的jQuery代码如下：

$(function(){ 
    var winH = $(window).height(); //页面可视区域高度 
    var i = 1; //设置当前页数 
    $(window).scroll(function () { 
        var pageH = $(document.body).height(); 
        var scrollT = $(window).scrollTop(); //滚动条top 
        var aa = (pageH-winH-scrollT)/winH; 
        if(aa<0.02){ 
            $.getJSON("result.php",{page:i},function(json){ 
                if(json){ 
                    var str = ""; 
                    $.each(json,function(index,array){ 
                        var str = "<div class=\"single_item\"><div class=\"element_head\">"; 
                        var str += "<div class=\"date\">"+array['date']+"</div>"; 
                        var str += "<div class=\"author\">"+array['author']+"</div>"; 
                        var str += "</div><div class=\"content\">"+array['content']+"</div></div>"; 
                        $("#container").append(str); 
                    }); 
                    i++; 
                }else{ 
                    $(".nodata").show().html("别滚动了，已经到底了。。。"); 
                    return false; 
                } 
            }); 
        } 
    }); 
}); 

我自己也借鉴了上文的方法，成功在java web 应用中实现了滚动加载的需求：
　　var winH = $(window).height(); //浏览器可视区域页面的高度
  
　　$(window).scroll(function(){     
   
　　　　var pageH = $(document.body).height(); //页面总高度     
   
　　　　var scrollT = $(window).scrollTop(); //滚动条top 
   
　　　　var aa = (pageH-winH-scrollT)/winH; //计算相对比例
   
　　　　if(aa<0.05 && _RELATIVE_PAGE<MAX_PAGE){
    
　　　　　　nextPage();
  
　　　  }
  
　　});

原文地址：http://www.helloweba.com/view-blog-152.html