滾屏加載--無刷新動態加載數據技術的應用

咱們瀏覽有些網頁的時候，當拉動瀏覽器的滾動條時到頁底時，頁面會繼續自動加載更多內容供用戶瀏覽。這種技術我暫且稱它爲滾屏加載技術。咱們發現不少網站用到這種技術，必應圖片搜索、新浪微博、QQ空間等將該技術應用得淋漓盡致。

查看演示

滾屏加載技術，就是使用Javascript監視滾動條的位置，每次當滾動條到達瀏覽器窗口底部時，觸發一個Ajax請求後臺PHP程序，返回相應的數據，並將返回的數據追加到頁面底部，從而實現了動態加載，其實就是一個典型的Ajax應用。本文將使用jQuery，結合PHP，mysql以及JSON，爲您講解如何應用滾屏加載技術到您的項目中去。固然，閱讀本文的前提是您須要有jQuery和PHP相關基礎。

index.php

咱們默認要顯示15條數據，所以，咱們先從數據庫取開始的15條數據顯示在頁面。後面新加載的數據，咱們也按每次15條的方式展現。

爲了講解儘可能簡單，我使用原生的PHP和mysql查詢語句。首先，須要鏈接數據庫，包含鏈接信息的connnect.php。這裏我定義了幾個用戶id。

而後查詢數據表，得到結果集，並循環輸出，代碼以下：

<?php 
require_once('connect.php'); 
$user = array('demo1','demo2','demo3','demo3','demo4'); 
?> 
<div id="container"> 
    <?php 
    $query=mysql_query("select * from say order by id desc limit 0,15"); 
    while ($row=mysql_fetch_array($query)) { 
    ?> 
    <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> 

注：本例使用的數據來源於本站文章：PHP+Mysql+jQuery實現發佈微博程序--PHP篇，文中有建立數據表的介紹。

jQuery

一、首先，咱們要獲取瀏覽器可視區域頁面的高度：

var winH = $(window).height(); 

二、而後，當滾動頁面的時候須要作的事情是：計算頁面總高度（當滾動底部時，頁面新加載數據，因此頁面總高度是動態變化的），計算滾動條位置（滾動條位置也是隨着加載頁面的高度動態變化的），而後構造一個公式，計算相對比例。

$(window).scroll(function () { 
    var pageH = $(document.body).height(); //頁面總高度 
    var scrollT = $(window).scrollTop(); //滾動條top 
    var aa = (pageH-winH-scrollT)/winH; 
}); 

三、當滾動條接近頁底時，觸發ajax加載，在本例中咱們使用jQuery的getJSON方法，向服務端result.php發送請求，請求的參數爲page，即頁數。

if(aa<0.02){ 
    $.getJSON("result.php",{page:i},function(json){ 
        ..... 
    }); 
 } 

四、若是請求響應成功返回JSON數據，則解析JSON數據，並將數據追加到頁面DIV#container後，若是沒有JSON數據返回，則說明數據所有顯示完畢。

if(json){ 
    var str = ""; 
    $.each(json,function(index,array){ //遍歷 
        var str = "..."; //獲取的JSON數據 
        $("#container").append(str); //追加 
    }); 
    i++;  //頁數+1 
}else{ 
    $(".nodata").show().html("別滾動了，已經到底了。。。"); 
    return false; 
} 

完整的jQuery代碼以下：

$(function(){ 
    var winH = $(window).height(); //頁面可視區域高度 
    var i = 1; //設置當前頁數 
    $(window).scroll(function () { 
        var pageH = $(document.body).height(); 
        var scrollT = $(window).scrollTop(); //滾動條top 
        var 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 += "<div class=\"date\">"+array['date']+"</div>"; 
                        var str += "<div class=\"author\">"+array['author']+"</div>"; 
                        var str += "</div><div class=\"content\">"+array['content']+"</div></div>"; 
                        $("#container").append(str); 
                    }); 
                    i++; 
                }else{ 
                    $(".nodata").show().html("別滾動了，已經到底了。。。"); 
                    return false; 
                } 
            }); 
        } 
    }); 
}); 

result.php

當滾動到頁面底部時，前端Ajax請求到result.php，該後臺程序將根據請求的數據頁數：page，查詢數據表中對應的記錄，並將記錄集以json的格式輸出返回給前端處理。

require_once('connect.php'); //鏈接數據庫 
 
$user = array('demo1','demo2','demo3','demo3','demo4'); 
$page = intval($_GET['page']);  //獲取請求的頁數 
$start = $page*15; 
$query=mysql_query("select * from say order by id desc limit $start,15"); 
while ($row=mysql_fetch_array($query)) { 
    $arr[] = array( 
        'content'=>$row['content'], 
        'author'=>$user[$row['userid']], 
        'date'=>date('m-d H:i',$row['addtime']) 
    ); 
} 
echo json_encode($arr);  //轉換爲json數據輸出