Native ajax writes pull-on loading instances, ajax loads instances

Native ajax writes pull-on loading instances, ajax loads instances

Idea of pulling and Loading

1. the ajax event request data is triggered when the screen is pulled to the bottom.

2. All the codes below the height and scroll height of the document for obtaining the screen are compatible and can be used directly.

Javascript: alert (document. body. clientWidth); // visible area (body) alert (document. body. clientHeight); // visible area of the webpage (body) alert (document. body. offsetWidth); // The visible area (body) of the webpage, including alert (document. body. offsetHeight); // The visible area (body) of the webpage, including alert (document. body. scrollWidth); // The full text width of the webpage body, including the Area alert (document. body. scrollHeight); // The full text of the webpage, including the Area alert (document. body. scrollTop); // the Top (scroll bar) alert (document. body. scrollLeft); // Left (scroll bar) alert (window. screenTop); // the browser distance from Topalert (window. screenLeft); // The distance from the browser to Leftalert (window. screen. height); // high alert (window. screen. width); // The width of the screen resolution alert (window. screen. availHeight); // high alert (window. screen. availWidth); // The width of the available workspace on the screen. Jqueryalert ($ (window ). height (); // The height of the visible area of the current browser window alert ($ (document ). height (); // The height of the current window document in the browser alert ($ (document. body ). height (); // alert ($ (document. body ). outerHeight (true); // the total height of the current window document body in the browser includes border padding marginalert ($ (window ). width (); // The width of the visible area of the current window in the browser. alert ($ (document ). width (); // The width of the current file object in the browser window alert ($ (document. body ). width (); // The width of the current file body in the browser. alert ($ (document. body ). outerWidth (true); // The total width of the current file body in the browser window includes border padding margin.

// Obtain the current position of the scroll bar function getScrollTop () {var scrollTop = 0; if (document.doc umentElement & document.doc umentElement. scrollTop) {scrollTop = document.doc umentElement. scrollTop;} else if (document. body) {scrollTop = document. body. scrollTop;} return scrollTop;} // gets the height function getClientHeight () {var clientHeight = 0; if (document. body. clientHeight & document.doc umentElement. clientHeight) {clientHeight = Math. min (document. body. clientHeight, document.doc umentElement. clientHeight);} else {clientHeight = Math. max (document. body. clientHeight, document.doc umentElement. clientHeight);} return clientHeight;} // obtain the complete height of the document function getScrollHeight () {return Math. max (document. body. scrollHeight, document.doc umentElement. scrollHeight );}

Var upDown = function (opt) {opt = opt | |{}; var up = opt. up | function () {}; window. onscroll = function () {if (getScrollTop () + getClientHeight () = getScrollHeight ()) {// distance from top + current height> = total document height indicates sliding to bottom if (is_scroll = true) {// call the up method when this parameter is set to true .... is_scroll does not understand how to look down up ();}}}};

3. First, load the first page by default. In window. onload, call the upDown method.

Window. onload = function () {getData (); // The first upDown ({up: getData}) page is displayed after the page is loaded });}

4. When the page is rolled to the bottom, the up () method is triggered. up Calls the getdata method. The following describes how to obtain data.

Define two global variables var is_scroll = true; var count = 0;

Var is_scroll = true; var count = 0; function getAjax () {var el, li; var xhr = new XMLHttpRequest (); xhr. open ('get', 'page' + count + '. json '); xhr. send (); xhr. onreadystatechange = function () {var loadingEnd = document. getElementById ('loadingend'); var dropLoad = document. getElementById ('dropload'); if (xhr. readyState === 4 & xhr. status = 200) {var res = xhr. responseText; var data = JSON. parse (res); allData = allData. concat (data); // a new page is spliced to the back; if (data. length = 0) {// when the obtained data length is 0, no count + indicates that no data is returned. is_scroll = true // It is defined as true loadingEnd. style. display = 'block'; // No data displayed} el = document. querySelector ("# wrapper ul"); for (var k in data) {// traverse each piece of data obtained li = document. createElement ('lil'); // create a node li. innerHTML = "<div class = 'item-top'> <span class = 'item-title'>" + data [k]. name + "</span> <span class = 'item-money'>" + data [k]. money + "</span> </div> <div class = 'item-time'>" + data [k]. time + "</div> <div class = 'bottom-line'> </div>"; el. appendChild (li, el. childNodes [0]);} dropLoad. style. display = 'block'; // display loading} else {// This dispensable or false will have an animation setTimeout (function () loaded regardless of whether the request is not requested () {dropLoad. style. display = 'none' ;}, 500 )}};}

<style>  .drop-load {   text-align: center;   height: 80px;   line-height: 50px;  }  .drop-load .loading {   display: inline-block;   height: 15px;   width: 15px;   border-radius: 100%;   margin: 6px;   border: 2px solid #666;   border-bottom-color: transparent;   vertical-align: middle;   -webkit-animation: rotate 0.75s linear infinite;   animation: rotate 0.75s linear infinite;  }  @-webkit-keyframes rotate {   0% {    -webkit-transform: rotate(0deg);   }   50% {    -webkit-transform: rotate(180deg);   }   100% {    -webkit-transform: rotate(360deg);   }  }  @keyframes rotate {   0% {    transform: rotate(0deg);   }   50% {    transform: rotate(180deg);   }   100% {    transform: rotate(360deg);   }  }  .loadingEnd {   font-size: 0.3rem;   color: black;   width: 100%;   height: 40px;   text-align: center;  } </style>

<Body> <div> <ul> </div> <div id = "dropLoad" class = "drop-load" style = "display: none "> <span class =" loading "> </span> <span> loading </span> </div> <div id =" loadingEnd "class =" loadingEnd" style = "display: none "> final </div> </body>

The above native ajax-written pull-and-load instance is all the content shared by Alibaba Cloud xiaobian. I hope you can give us a reference and support for the help house.