jQuery自動(dòng)加載更多程序

現(xiàn)在，我們經(jīng)常使用的微博、微信或其他應(yīng)用都有異步加載功能，簡(jiǎn)而言之，就是我們?cè)谒⑽⒉┗蛭⑿艜r(shí)，移動(dòng)到界面的頂端或低端后程序通過(guò)異步的方式進(jìn)行加載數(shù)據(jù)，這種方式加快了數(shù)據(jù)的加載速度，由于它每次只加載一部分?jǐn)?shù)據(jù)，當(dāng)我們有大量的數(shù)據(jù)，但不能顯示所有，這時(shí)我們可以考慮使用異步方式加載數(shù)據(jù)。...

1.1.1 摘要

現(xiàn)在，我們經(jīng)常使用的微博、微信或其他應(yīng)用都有異步加載功能，簡(jiǎn)而言之，就是我們?cè)谒⑽⒉┗蛭⑿艜r(shí)，移動(dòng)到界面的頂端或低端后程序通過(guò)異步的方式進(jìn)行加載數(shù)據(jù)，這種方式加快了數(shù)據(jù)的加載速度，由于它每次只加載一部分?jǐn)?shù)據(jù)，當(dāng)我們有大量的數(shù)據(jù)，但不能顯示所有，這時(shí)我們可以考慮使用異步方式加載數(shù)據(jù)。

數(shù)據(jù)異步加載可以發(fā)生在用戶點(diǎn)擊“查看更多”按鈕或滾動(dòng)條滾動(dòng)到窗口的底部時(shí)自動(dòng)加載；在接下來(lái)的博文中，我們將介紹如何實(shí)現(xiàn)自動(dòng)加載更多的功能。

圖1 微博加載更多功能

1.1.2 正文

假設(shè)，在我們的數(shù)據(jù)庫(kù)中存放著用戶的消息數(shù)據(jù)，現(xiàn)在，我們需要通過(guò)Web Service形式開(kāi)放API接口讓客戶端調(diào)用，當(dāng)然我們也可以使用一般處理程序（ASHX文件）讓客戶端調(diào)用（具體請(qǐng)參考這里）。

數(shù)據(jù)表

首先，我們?cè)跀?shù)據(jù)庫(kù)中創(chuàng)建數(shù)據(jù)表T_Paginate，它包含三個(gè)字段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 數(shù)據(jù)表T_Paginate

數(shù)據(jù)對(duì)象模型

我們根據(jù)數(shù)據(jù)表T_Paginate定義數(shù)據(jù)對(duì)象模型Message，它包含三個(gè)字段分別是：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方法

現(xiàn)在，我們需要實(shí)現(xiàn)方法GetListMessages()，它根據(jù)客戶端傳遞來(lái)的分頁(yè)數(shù)來(lái)獲取相應(yīng)的分頁(yè)數(shù)據(jù)并且通過(guò)JSON格式返回給客戶端，在實(shí)現(xiàn)GetListMessages()方法之前，我們先介紹數(shù)據(jù)分頁(yè)查詢的方法。

在Mysql數(shù)據(jù)庫(kù)中，我們可以使用limit函數(shù)實(shí)現(xiàn)數(shù)據(jù)分頁(yè)查詢，但在SQL Server中沒(méi)有提供類似的函數(shù)，那么，我們可以發(fā)揮人的主觀能動(dòng)——自己實(shí)現(xiàn)一個(gè)吧，具體實(shí)現(xiàn)如下：

-- =============================================
-- 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

上面我們定義了公用表表達(dá)式Results_CTE，它獲取T_Paginate表中的數(shù)據(jù)并且根據(jù)ID值由小到大排序，然后根據(jù)該順序分配ROW_NUMBER值，其中@Start和@Offset是要查詢的數(shù)據(jù)范圍。

接下來(lái)，讓我們實(shí)現(xiàn)方法GetListMessages()，具體實(shí)現(xiàn)如下：

/// <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()方法，為了簡(jiǎn)單起見(jiàn)，我們把數(shù)據(jù)庫(kù)的操作直接寫在Web Service上了請(qǐng)大家見(jiàn)諒，它通過(guò)調(diào)用公用表表達(dá)式Results_CTE來(lái)獲取分頁(yè)數(shù)據(jù)，最后，我們創(chuàng)建一個(gè)JavaScriptSerializer對(duì)象序列化數(shù)據(jù)成JSON格式返回給客戶端。

Javascript

由于，我們調(diào)用的是本地Web Service API，所以，我們發(fā)送同源請(qǐng)求調(diào)用API接口（跨源請(qǐng)求例子），具體實(shí)現(xiàn)如下：

/**
* 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()方法，它通過(guò)使用jQuery.ajax()方法，發(fā)送同源請(qǐng)求調(diào)用GetListMessages接口，當(dāng)數(shù)據(jù)獲取成功加載到result div中顯示并且分頁(yè)數(shù)量（groupNumber）加一。

現(xiàn)在，我們已經(jīng)實(shí)現(xiàn)了getData()方法，每當(dāng)用戶把滾動(dòng)條拖到最底端時(shí)，就調(diào)用getData()方法獲取數(shù)據(jù)，那么，我們需要把getData()方法和滾動(dòng)條事件進(jìn)行綁定，具體實(shí)現(xiàn)如下：

// 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);
        }
    }
});

上面，我們實(shí)現(xiàn)了jQuery的scroll事件，當(dāng)滾動(dòng)條滾動(dòng)到最底部時(shí)，調(diào)用getData()方法獲取服務(wù)器中的數(shù)據(jù)。

CSS樣式

接下來(lái)，我們給程序添加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 加載更多程序

上面，我們實(shí)現(xiàn)了jQuery自動(dòng)加載更多程序，每當(dāng)滾動(dòng)條到底部時(shí)，發(fā)送異步請(qǐng)求獲取服務(wù)器中的數(shù)據(jù)。

1.1.3 總結(jié)

我們通過(guò)一個(gè)Demo程序，介紹了通過(guò)jQuery實(shí)現(xiàn)異步加載數(shù)據(jù)，當(dāng)然這里也涉及到數(shù)據(jù)的頁(yè)面查詢問(wèn)題，這里我們使用了一個(gè)自定義的公用表表達(dá)式Results_CTE來(lái)獲取分頁(yè)數(shù)據(jù)，然后，通過(guò)$.ajax()方法發(fā)送同源請(qǐng)求調(diào)用Web Service API；當(dāng)數(shù)據(jù)獲取成功后，通過(guò)JSON格式返回?cái)?shù)據(jù)，最后，我們把數(shù)據(jù)顯示到頁(yè)面當(dāng)中。

[1]http://www.rzrgm.cn/icebutterfly/archive/2009/08/05/1539657.html

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

Demo

posted @ 2013-10-30 21:18 JK_Rush 閱讀(21129) 評(píng)論(3) 收藏舉報(bào)

刷新頁(yè)面返回頂部