怎么实现滚屏无刷新动态加载内容

Ajax技术的应用，让web开发更加绚丽多彩，毫无疑问，这个效果的实现是借助ajax动态获取服务器端数据。

滚屏无刷新动态加载内容原理：

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

滚屏动态加载内容的实现方法：

本文将结合ajax、js代码，为您讲解如何应用滚屏加载技术到您的项目中去。当然，阅读本文的前提是您需要有js相关基础。

如果我们页面初始要显示20条数据，那么先将这20条数据取出显示到页面上，后面每触发一次ajax就取一定数量的数据加载到页面上，具体每次显示多少数据，是在服务器端程序控制的。

JS程序结束

在这个案例中，js需要做的工作有获取浏览器高度、计算页面总高度、计算滚动条位置、发送请求到服务器、接受返回的数据解析并追加到页面中。

首先，获取浏览器可视区域高度。

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

获取浏览器信息

$(window).scroll(function () {     
  var pageH = $(document.body).height(); //页面总高度     
  var scrollT = $(window).scrollTop(); //滚动条距离顶部高度     
  var aa = (pageH-winH-scrollT)/winH;  //滚动条移动距离触发ajax
});

当浏览器滚动条到页底时就触发ajax加载，在本例中我们使用jQuery的getJSON方法，向服务端result.asp发送请求，请求的参数为page，即页数。

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

如果请求响应成功返回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;
} 

完整的js代码：

$(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.asp",{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;                
     }            
    });        
   }    
  });
}); 

服务器端介绍

本案例中向服务器端请求的参数时page，服务端程序根据参数返回相应的数据。

服务器端程序可以根据实际需求，灵活返回相应的数据。

本案例中返回的数据格式是：

[{"content":"内容","author":"www.webym.net","date":"时间"}]

好了，关于滚屏无刷新动态加载内容就介绍到这里，另外还有一种用户评论的效果，用户提交评论，页面不用刷新，发表的评论直接显示在评论区。感兴趣的童鞋可以看看无刷新评论