這裡tity主要給大家講兩個問題：
一是載入中動畫，二是關於“沒有更多了”的判斷。

一、載入中動畫，可以增強使用者體驗度，給使用者一種當前頁面正在處理的感覺，而不是沒有任何反應，讓使用者感覺摸不著頭腦。
實現方法：在ajax請求中新增beforeSend方法。
示例程式碼：

<script type="text/javascript">
    $('#getMore').click(function(){
        $.ajax({
            type: 'get',
            url: 'https://www.demo.com',
            data: data,
            dataType: 'json'
 
,
            beforeSend: function(){
                $('#loadingMask').show();
                $('#getMore').hide();
            },
            success: function(data) {
                $('#loadingMask').hide();
                $('#getMore').show();
            },
            error: function(data) {
 

                $('#loadingMask').hide();
                $('#getMore').show();
            }
        });            
    });
</script>

這裡的#getMore代表的就是載入更多的按鈕，而#loadingMask表示的就是載入中的動畫，這裡的動畫可以用gif來實現，也可以通過CSS3載入中動畫來實現。

二、關於沒有更多了的功能的判斷，主要是判斷來自伺服器的返回的資料的長度，假定我們與服務端約定好，每次請求返回20條資料，那麼如果返回的資料少於20的時候，我們就認為沒有更多了。
示例程式碼：

<script type="text/javascript">
    $(function(){ 
        $('#getMore').click(function(){
            $.ajax({
                type: 'get',
                url: 'https://www.demo.com',
                data: data,
                dataType: 'json',
                beforeSend:function(){
                    $('#loadingMask').show();
                    $('#getMore').hide();
                },
                success: function(data) {
                    $('#loadingMask').hide();
                    $('#getMore').show();
                    if(data.length > 0){
                        for(var i = 0; i < data.length; i++){
                           // 這裡是插入資料的操作
                        }
                        if(data.length < 20){
                            $('#getMore').hide();
                            $('#noMore').show();
                        }                       
                    } 
                },
                error: function(data) {
                    $('#loadingMask').hide();
                    $('#getMore').show();
                }
            });            
        });
    })
</script>

這部分功能的實現主要在success函式裡面，#noMore代表的就是沒有更多了的div。
在這裡特別注意一點，就是success中的插入資料的迴圈操作中，i每次應該與返回的data的長度相比，而不能與我們預設的20相比，否則會報錯。