What is the process of rolling the pulley to the bottom of the page to load data with ajax and jsonp 01/19 Update SLTechnology News&Howtos

What is the process of rolling the pulley to the bottom of the page to load data with ajax and jsonp

2025-01-19 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Shulou(Shulou.com)06/03 Report--

This issue of the content of the editor will bring you about the pulley scrolling to the bottom of the page ajax loading data with jsonp implementation process is how, the article is rich in content and professional analysis and description for you, after reading this article, I hope you can get something.

Scrolling down to the bottom of the page to load data is the practice of many waterfall streaming sites, so let's take a look at how to cooperate with jsonp.

Of course, this example uses the jquery library, which will be made into native js later.

The data in this example invokes a json provided by the sharp jquery book.

The first step is to determine how the page scrolls to the bottom, that is, whether the height of scrollTop+window is greater than the height,jquery of document. The code is as follows: $(window). ScrollTop () + $(window). Height () > = $(document). Height ()

Then bind the scroll event to window. So the entire page demo can do this:

The code is as follows:

* {margin:0; padding:0;}

Body {font-size:12px;}

P {margin: 5px;}

.box {padding: 10px;}

$(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 (ither item) {

Html+=''

Html+=''+item.title+''

Html+='

Html+=''+item.tags+''

Html+=''

});

("# resText") .append ($(html))

}

Complete:function () {console.log ('mission acomplete.')}

});

}

})

Pull down

Pull to the bottom is to achieve asynchronous data loading, of course, the actual project also has to add if there is no data how to display, how to operate. These are just fine with judgment.

This is how the pulley scrolled to the bottom of the page to load data with jsonp. If you happen to have similar doubts, please refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.