Ajax滚动加载页面

<!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> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> * { margin:0; padding:0;} body { font-size:12px;} p{ margin: 5px;} .box{ padding: 10px;} </style>  <script src="jquery-1.11.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $(window).bind('scroll',function(){show()});

function show() {

if($(window).scrollTop()+$(window).height()>=$(document).height()) { ajaxRead(); } } function ajaxRead() {

var html=""; $.ajax({ type:'get', dataType:'jsonp', url:'http://baidu.com', beforeSend:function(){console.log('loading...')}, success:function(data){ $.each(data.items,function(i,item){ html+='<div class="box">'; html+='<h1>'+item.title+'</h1>'; html+='<a hreft="'+item.link+'"><img src="'+item.media.m+'"/></a>' html+='<div>'+item.tags+'</div>'; html+='</div>';

}); $("#resText").append($(html)); }, complete:function(){console.log('mission acomplete.')}

}); } }) </script> </head> <body> 往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉往下拉 <div id="resText" > </div>

</body> </html>

Ajax滚动加载页面

推荐阅读