滑轮滚动到页面底部ajax加载数据配合jsonp实现探讨-巨人网络通讯

滑轮滚动到页面底部ajax加载数据配合jsonp实现探讨

滚动下拉到页面底部加载数据是很多瀑布流网站的做法，那来看看配合jsonp是如何实现的吧，小菜总结记录之用，高手勿喷。

当然本例子采用的是jquery库，后期会做成原生js。
本例的数据调用的是锋利的jquery一书提供的一段json。

首先要先判断页面怎么样才是滚动到底部，也就是scrollTop+window的height是否大于document的height，jquery如下代码: $(window).scrollTop()+$(window).height()>=$(document).height()；
再给window绑定scroll事件。所以整个页面demo可以这样做:

复制代码代码如下:

 
!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> 
!-- 引入jQuery --> 
script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.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://api.flickr.com/services/feeds/photos_public.gne?tags=cartagmode=anyformat=jsonjsoncallback=?', 
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> 
p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p>p>往下拉/p> 
div id="resText" > 
/div> 
/body> 
/html> 