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

 更新时间:2013年05月13日 17:14:08   作者:  
滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配合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=car&tagmode=any&format=json&jsoncallback=?',
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>

拉到底部就是实现异步数据加载了,当然了,实际项目还要加上如果没数据了要怎么显示,怎么操作。这些加判断就行了。

相关文章

  • jQuery Ajax 实例详解 ($.ajax、$.post、$.get)

    jQuery Ajax 实例详解 ($.ajax、$.post、$.get)

    本文给大家分享jquery ajax实例文章,由于jquery在异步提交方面封装的非常好,直接用ajax非常麻烦,jquery大大简化了我们的操作,不用考虑浏览器的问题了。对jquery ajax实例相关介绍感兴趣的朋友一起学习吧
    2015-11-11
  • Ajax和跨域问题深入解析

    Ajax和跨域问题深入解析

    这篇文章主要为大家详细介绍了Ajax和跨域问题,告诉大家什么Ajax,什么是跨域?具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • 使用ajax实现分页技术

    使用ajax实现分页技术

    这篇文章主要为大家详细介绍了如何使用ajax实现分页技术,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • Ajax基础教程之封装(三)

    Ajax基础教程之封装(三)

    这篇文章给大家介绍ajax基础教程之封装的知识,本文通过实例给大家详细介绍,非常不错,感兴趣的朋友一起学习吧
    2016-06-06
  • Ajax打开新窗口被浏览器拦截的两种解决办法

    Ajax打开新窗口被浏览器拦截的两种解决办法

    最近在做支付时发现打开支付窗口时被浏览器拦截了,怎么回事呢?下面小编给大家分享Ajax打开新窗口被浏览器拦截的两种解决办法,一起看看吧
    2017-01-01
  • Ajax的内部实现机制、原理与实践小结

    Ajax的内部实现机制、原理与实践小结

    AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),Ajax不是一个技术,它实际上是几种技术,每种技术都有其独特这处,合在一起就成了一个功能强大的新技术。
    2010-06-06
  • $.ajax传JSON数据到后台出现报错问题解决

    $.ajax传JSON数据到后台出现报错问题解决

    $.ajax传JSON数据到后台时总会出现一些错误,本文整理了一些注意事项,感兴趣的朋友可以参考下
    2014-01-01
  • XMLHTTP多浏览器兼容性写法

    XMLHTTP多浏览器兼容性写法

    XMLHTTP多浏览器兼容性写法...
    2007-11-11
  • 关于Ajax技术原理的3点总结

    关于Ajax技术原理的3点总结

    这篇文章主要介绍了关于Ajax技术原理的3点总结,需要的朋友可以参考下
    2014-12-12
  • ASP AJAX 静态分页

    ASP AJAX 静态分页

    这个页面注意是调用来自数据库中的数据。
    2009-01-01

最新评论