jQuery自動加載更多程序

1.1.1 摘要

如今，咱們常常使用的微博、微信或其餘應用都有異步加載功能，簡而言之，就是咱們在刷微博或微信時，移動到界面的頂端或低端後程序經過異步的方式進行加載數據，這種方式加快了數據的加載速度，因爲它每次只加載一部分數據，當咱們有大量的數據，但不能顯示全部，這時咱們能夠考慮使用異步方式加載數據。

數據異步加載能夠發生在用戶點擊「查看更多」按鈕或滾動條滾動到窗口的底部時自動加載；在接下來的博文中，咱們將介紹如何實現自動加載更多的功能。

本文目錄

• 數據表
• 數據對象模型
• Web Service方法
• Javascript
• CSS樣式

圖1 微博加載更多功能

1.1.2 正文

假設，在咱們的數據庫中存放着用戶的消息數據，如今，咱們須要經過Web Service形式開放API接口讓客戶端調用，固然咱們也可使用通常處理程序（ASHX文件）讓客戶端調用（具體請參考這裏）。

數據表

首先，咱們在數據庫中建立數據表T_Paginate，它包含三個字段ID、Name和Message，其中ID是自增值。

-- =============================================
-- Author:        JKhuang
-- Create date:      10/28/2013
-- Description:    A table stores the user information.
-- =============================================
CREATE TABLE [dbo].[T_Paginate](
    [ID] [int] IDENTITY(1,1) NOT NULL,
    [Name] [varchar](60) COLLATE Chinese_PRC_CI_AS NULL,
    [Message] [text] COLLATE Chinese_PRC_CI_AS NULL,
 CONSTRAINT [PK_T_Paginate] PRIMARY KEY CLUSTERED 
(
    [ID] ASC
)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

圖2 數據表T_Paginate

數據對象模型

咱們根據數據表T_Paginate定義數據對象模型Message，它包含三個字段分別是：Id、Name和Comment，具體定義以下：

/// <summary>
/// The message data object.
/// </summary>
[Serializable]
public class Message
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Comment { get; set; }
}

Web Service方法

如今，咱們須要實現方法GetListMessages()，它根據客戶端傳遞來的分頁數來獲取相應的分頁數據而且經過JSON格式返回給客戶端，在實現GetListMessages()方法以前，咱們先介紹數據分頁查詢的方法。

在Mysql數據庫中，咱們可使用limit函數實現數據分頁查詢，但在SQL Server中沒有提供相似的函數，那麼，咱們能夠發揮人的主觀能動——本身實現一個吧，具體實現以下：

-- =============================================
-- Author:        JKhuang
-- Create date:      10/26/2013
-- Description:   Creates a pagination function
-- =============================================
Declare @Start AS INT
Declare @Offset AS INT
;WITH Results_CTE AS (
    SELECT ID, Name, Message, ROW_NUMBER() OVER (ORDER BY ID) AS RowNum 
FROM T_Paginate WITH(NOLOCK))
SELECT * FROM Results_CTE WHERE RowNum BETWEEN @Start AND @Offset

上面咱們定義了公用表表達式Results_CTE，它獲取T_Paginate表中的數據而且根據ID值由小到大排序，而後根據該順序分配ROW_NUMBER值，其中@Start和@Offset是要查詢的數據範圍。

接下來，讓咱們實現方法GetListMessages()，具體實現以下：

/// <summary>
/// Get the user message.
/// </summary>
/// <param name="groupNumber">the pagination number</param>
/// <returns>the pagination data</returns>
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string GetListMessages(int groupNumber)
{
    string query = string.Format("WITH Results_CTE AS (SELECT ID, Name, Message, ROW_NUMBER() OVER (ORDER BY ID) AS RowNum " +
                                 "FROM T_Paginate WITH(NOLOCK)) " +
                                 "SELECT * FROM Results_CTE WHERE RowNum BETWEEN '{0}' AND '{1}';",
(groupNumber - 1) * Offset + 1, Offset * groupNumber);
    var messages = new List<Message>();
    using (var con = new SqlConnection(ConfigurationManager.ConnectionStrings["RadditConn"].ToString()))
    using (var com = new SqlCommand(query, con))
    {
        con.Open();
        using (var reader = com.ExecuteReader(CommandBehavior.CloseConnection))
        {
            while (reader.Read())
            {
                var message = new Message
                    {
                        Id = (int)reader["ID"],
                        Name = (string)reader["Name"],
                        Comment = (string)reader["Message"]
                    };
                messages.Add(message);
            }
        }

        // Returns json data.
        return new JavaScriptSerializer().Serialize(messages);
    }
}

上面，咱們定義了GetListMessages()方法，爲了簡單起見，咱們把數據庫的操做直接寫在Web Service上了請你們見諒，它經過調用公用表表達式Results_CTE來獲取分頁數據，最後，咱們建立一個JavaScriptSerializer對象序列化數據成JSON格式返回給客戶端。

Javascript

因爲，咱們調用的是本地Web Service API，因此，咱們發送同源請求調用API接口（跨源請求例子），具體實現以下：

/**
* Sends same origin request with ajax and json.
* @param options
* The options need to send to server.
* For instance: url and groupNumber.
*/
$.getData = function(options) {

    var opts = $.extend(true, {}, $.fn.loadMore.defaults, options);

    $.ajax({
        url: opts.url,
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: "{groupNumber:" + opts.groupNumber + "}",
        success: function(data, textStatus, xhr) {
            if (data.d) {
                // We need to convert JSON string to object, then
                // iterate thru the JSON object array.
                $.each($.parseJSON(data.d), function() {
                    $("#result").append('<li id="">' +
                            this.Id + ' - ' + '<strong>' +
                            this.Name + '</strong>' + ' —?' + '<span class="page_message">' +
                            this.Comment + '</span></li>');
                });
                $('.animation_image').hide();
                options.groupNumber++;
                options.loading = false;
            }
        },
        error: function(xmlHttpRequest, textStatus, errorThrown) {
            options.loading = true;
            console.log(errorThrown.toString());
        }
    });
};

上面，咱們定義了getData()方法，它經過使用jQuery.ajax()方法，發送同源請求調用GetListMessages接口，當數據獲取成功加載到result div中顯示而且分頁數量（groupNumber）加一。

如今，咱們已經實現了getData()方法，每當用戶把滾動條拖到最底端時，就調用getData()方法獲取數據，那麼，咱們須要把getData()方法和滾動條事件進行綁定，具體實現以下：

// The scroll event.
$(window).scroll(function() {
    // When scroll at bottom, invoked getData() function.
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
        if (trackLoad.groupNumber <= totalGroups && !trackLoad.loading) {
            trackLoad.loading = true;      // Blocks other loading data again.
            $('.animation_image').show();
            $.getData(trackLoad);
        }
    }
});

上面，咱們實現了jQuery的scroll事件，當滾動條滾動到最底部時，調用getData()方法獲取服務器中的數據。

CSS樣式

接下來，咱們給程序添加CSS樣式，具體定義以下：

@import url("reset.css");
body,td,th {font-family: 'Microsoft Yahei', Georgia, Times New Roman, Times, serif;font-size: 15px;}
.animation_image {background: #F9FFFF;border: 1px solid #E1FFFF;padding: 10px;width: 500px;margin-right: auto;margin-left: auto;}
#result{width: 500px;margin-right: auto;margin-left: auto;}
#result ol{margin: 0px;padding: 0px;}
#result li{margin-top: 20px;border-top: 1px dotted #E1FFFF;padding-top: 20px;}

圖3 加載更多程序

上面，咱們實現了jQuery自動加載更多程序，每當滾動條到底部時，發送異步請求獲取服務器中的數據。

1.1.3 總結

咱們經過一個Demo程序，介紹了經過jQuery實現異步加載數據，固然這裏也涉及到數據的頁面查詢問題，這裏咱們使用了一個自定義的公用表表達式Results_CTE來獲取分頁數據，而後，經過$.ajax()方法發送同源請求調用Web Service API；當數據獲取成功後，經過JSON格式返回數據，最後，咱們把數據顯示到頁面當中。

[1]http://www.cnblogs.com/icebutterfly/archive/2009/08/05/1539657.html

[2]http://www.saaraan.com/2013/05/auto-load-records-on-page-scroll

Demo