Roll-screen loading--application of non-flush dynamic loading data technology

Index.html

<?php

Require_once (' connect.php '); Connect database $user = Array (' Demo1 ', ' Demo2 ', ' Demo3 ', ' Demo3 ', ' <de></de>mo4 '); Simulated a few users?> <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><meta http-equiv= "Content-type" content= "Text/html;charset=utf-8"/><title> Scrolling Loading--application of non-flush dynamic loading Data technology </title><style type= "Text/css" >#container {margin:10px auto;width:660px; border:1px solid #999;}. single_item{padding:20px; border-bottom:1px dotted #d3d3d3;}. author{position:absolute; left:0px; font-weight:bold; color: #39f}. date{position:absolute; right:0px; color: #999}. content{line-height:20px; word-break:break-all;}. element_head{width:100%; position:relative; height:20px;}Nodata{display:none; height:32px; line-height:32px; text-align:center; color: #999; font-size:14px}</style><script type= "Text/javascript" src= "jquery-1.8.3.min.js" ></script>//need to introduce jquery<p class= "One" style= "margin:20px" > Tip: Use the scroll or pull scroll bar to look down. </p><div id= "Container" ><?php$query =mysqli_query ($link, "SELECT * Say ORDER BY id DESC limit 0,15");while ($row =mysqli_fetch_array ($query, Mysqli_assoc)) {?><div class= "Single_item" ><div class= "Element_head" ><div class= "Date" ><?php echo date (' m-d h:i ', $row [' addtime ']);? ></div><div class= "Author" ><?php echo $user [$row [' UserID '];? ></div></div><div class= "Content" ><?php echo $row [' content '];? ></div></div><?php}?></div><div class= "NoData" ></div> </body><script type= "text/javascript" >$ (function () {var Winh = $ (window). Height (); Page Viewable area heightvar i = 1;//Setting the current page$ (window). Scroll (function () {var Pageh = $ (document.body). Height ();var scrollt = $ (window). scrolltop (); scroll bar Topvar AA = (pageh-winh-scrollt)/winh;if (aa<0.02) {$.getjson ("result.php", {page:i},function (JSON) {if (JSON) {var str = "";$.each (Json,function (Index,array) {var str = "<div class=\" single_item\ "><div class=\" element_head\ ">";var str = str + "<div class=\" date\ ">" +array[' Date ']+ "</div>";var str = str + "<div class=\" author\ ">" +array[' Author ']+ "</div>"; var str = str + "</div><div class=\" content\ ">" +array[' content ']+ "</div></div>";$ ("#container"). Append (str);});i++;}else{$ (". NoData"). Show (). HTML ("Don't scroll, it's over ... ");return false;}});}});}); </script>

connect.php

<?php$host= "localhost";$db _user= "root";$db _pass= "admin"; $db _name= "Ajax_demo"; $timezone = "Asia/shanghai"; $link =mysqli_connect ($host, $db _user, $db _pass); mysqli_select_db ($link, $db _name); Mysqli_query ($link, "SET names UTF8"); header ("content-type:text/html; Charset=utf-8 ");? >

result.php

<?phprequire_once (' connect.php '); Connect the database $user = Array (' Demo1 ', ' Demo2 ', ' Demo3 ', ' Demo3 ', ' Demo4 ');  $page = intval ($_get[' page '); Gets the number of pages requested $start = $page *15; $query =mysqli_query ($link, "select * from say the ORDER by id DESC limit $start, 15"); /* while ($row =mysqli_fetch_array ($query)) {$arr [] = array (' content ' = = $row [' content '], ' author ' =& gt; $user [$row [' userid '], ' Date ' =>date (' m-d h:i ', $row [' addtime ']); } */if ($query) {while ($row =mysqli_fetch_array ($query)) {$arr [] = Array (' Content ' = $row [' content '],' Author ' = $user [$row [' userid ']],' Date ' =>date (' m-d h:i ', $row [' Addtime ']));}}if (!empty ($arr)) {echo Json_encode ($arr);  Convert to JSON data output}//echo Json_encode ($arr); Convert to JSON data output?>

Ajax_demo.sql

--phpMyAdmin SQL dump--version 3.5.2.2--http://www.phpmyadmin.net----Host: localhost--generated: January 18, 2015 15:56--Service Device version: 5.1.46-community--PHP version: 5.2.13SET sql_mode= "No_auto_value_on_zero"; Set time_zone = "+00:00";/*!40101 set @[email protected] @CHARACTER_SET_CLIENT */;/*!40101 set @[email  Protected] @CHARACTER_SET_RESULTS */;/*!40101 set @[email protected] @COLLATION_CONNECTION */;/*!40101 set NAMES UTF8 */;----Database: ' demo '----------------------------------------------------------------The structure ' say '--create table IF Not EXISTS ' say ' (  ' id ' int (one) not null auto_increment,  ' userid ' int (one) not null DEFAULT ' 0 ',  ' content ' varchar ' not null,  ' addtime ' int (ten) not null,  PRIMARY KEY (' id ')) engine=myisam  default Charset=u Tf8 auto_increment=63;----Dump the data in the table ' say '--insert into ' say ' (' id ', ' userid ', ' content ', ' Addtime ') VALUES (1, 0, ' Love love ', 14 21332482), (2, 1, ' Love love Love ', 1421332482), (3, 0, ' Love love Love ', 1421332482), (4, 1, ' Love love Love ', 1421332482), (5, 0, ' Love love Love ', 1421332482), (6, 0, ' Love love Love ', 1421332482), (7, 0, ' Love love Love ', 1421332482), (8, 2, ' Love love Love ', 1421332482), (9, 0, ' Love love ', 1421332 482), (10, 0, ' Love love Love ', 1421332482), (11, 0, ' Love love Love ', 1421332482), (12, 0, ' Love love Love ', 1421332482), (13, 0, ' Love love Love ', 1421332482), (14, 0, ' Love love love ', 1421332482 ', (15, 0, ' Love love Love ', 1421332482), (16, 0, ' Love love ', 1421332482), (17, 0, ' Love love Love ', 1421332482), (18, 0, ' Love love ', 14213324 82), (19, 0, ' Love love Love ', 1421332482), (20, 0, ' Love love Love ', 1421332482), (21, 0, ' Love love Love ', 1421332482), (22, 0, ' Love love Love ', 1421332482), (23, 0, ' love Love love ', 1421332482 ', (24, 0, ' Love love Love ', 1421332482), (25, 0, ' Love love ', 1421332482), (26, 0, ' 2222 ', 1421333156), (27, 0, ' 2222 ', 1421333 159), (28, 0, ' 2222 ', 1421333161), (29, 0, ' 2222 ', 1421333162), (30, 0, ' 2222 ', 1421333164), (31, 0, ' 2222 ', 1421333165), (32, 0, ' 2222 ', 1421333167), (33, 0, ' 2222 ', 1421333168), (34, 0, ' 2222 ', 1421333169), (35, 0, ' 2222 ', 1421333170), (36, 0, ' 2222 ', 1421333172), (37, 0, ' 2222 ', 1421333173), (38, 0, ' 2222 ', 1421333175), (39, 0, ' 2222 ', 1421333176), (40, 0, ' 2222 ', 142133317 7), (41, 0, ' 2222 ', 1421333178), (42, 0, ' 2222 ', 1421333179), (43, 0, ' 2222 ', 1421333181), (44, 0, ' 2222 ', 1421333182), (45, 0, ' 2222 ', 1421333183), (46 , 0, ' 2222 ', 1421333184), (47, 0, ' 2222 ', 1421333293), (48, 0, ' 2222 ', 1421333295), (49, 0, ' 2222 ', 1421333296), (50, 0, ' 2222 ', 1421333297), (51, 0, ' 2222 ', 1421333298), (52, 0, ' 2222 ', 1421333299), (53, 0, ' 2222 ', 1421333300), (54, 0, ' 2222 ', 1421333 302), (55, 0, ' 2222 ', 1421333303), (56, 0, ' 2222 ', 1421333304), (57, 0, ' 2222 ', 1421333305), (58, 0, ' 2222 ', 1421333306), (59, 0, ' 2222 ', 1421333308), (0, ' 2222 ', 1421333309), (0, ' 2222 ', 1421333310), (0, ' 2222 ', 1421333311);/*!40101 SET [E Mail protected]_character_set_client */;/*!40101 SET [Email protected]_character_set_results */;/*!40101 SET [email protected]_collation_connection */;

Roll-screen loading--application of non-flush dynamic loading data technology