jQuery自动加载更多程序

分手后的思念是犯贱 2022-01-17 15:23 284阅读 0赞

[为什么80%的码农都做不了架构师？>>> ][80_] ![hot3.png][]

# 1.1.1 摘要 #

现在，我们经常使用的微博、微信或其他应用都有异步加载功能，简而言之，就是我们在刷微博或微信时，移动到界面的顶端或低端后程序通过异步的方式进行加载数据，这种方式加快了数据的加载速度，由于它每次只加载一部分数据，当我们有大量的数据，但不能显示所有，这时我们可以考虑使用异步方式加载数据。

数据异步加载可以发生在用户点击“查看更多”按钮或滚动条滚动到窗口的底部时自动加载；在接下来的博文中，我们将介绍如何实现自动加载更多的功能。

## 本文目录 ##

*  [数据表][Link 1]
 *  [数据对象模型][Link 2]
 *  [Web Service方法][Web Service]
 *  [Javascript][]
 *  [CSS样式][CSS]

[![image][]][image 1]

图1 微博加载更多功能

# 1.1.2 正文 #

假设，在我们的数据库中存放着用户的消息数据，现在，我们需要通过Web Service形式开放API接口让客户端调用，当然我们也可以使用一般处理程序（ASHX文件）让客户端调用（具体请参考[这里][Link 3]）。

## 数据表 ##

首先，我们在数据库中创建数据表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]

[![LoadMore0][]][LoadMore0 1]

图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接口（跨源请求[例子][Link 3]），具体实现如下：

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

[![LoadMore1][]][LoadMore1 1]

图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][http_www.cnblogs.com_icebutterfly_archive_2009_08_05_1539657.html]

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

[Demo][]

转载于:https://my.oschina.net/ohalo/blog/694873

[80_]: https://my.oschina.net/u/2663968/blog/3051541
[hot3.png]: /images/20220117/05c1145d5b854a25bc86995f67351897.png
[Link 1]: http://www.cnblogs.com/rush/p/3397761.html#lb0
[Link 2]: http://www.cnblogs.com/rush/p/3397761.html#lb1
[Web Service]: http://www.cnblogs.com/rush/p/3397761.html#lb2
[Javascript]: http://www.cnblogs.com/rush/p/3397761.html#lb3
[CSS]: http://www.cnblogs.com/rush/p/3397761.html#lb4
[image]: /images/20220117/b5e914ec8cd54e1fa9b3f4e491f71d48.png
[image 1]: http://images.cnitblog.com/blog/183411/201310/30211823-496d8a0360464a2aa682ec9833cd7884.png
[Link 3]: http://www.cnblogs.com/rush/archive/2012/05/15/2502264.html
[LoadMore0]: /images/20220117/4dcf45ea15d44343af5b77b91631bd8b.png
[LoadMore0 1]: http://images.cnitblog.com/blog/183411/201310/30211825-14c87295596444008556c87024a08bb4.png
[LoadMore1]: /images/20220117/cc1192d9018f42dbaf4dbc36d3b6c323.png
[LoadMore1 1]: http://images.cnitblog.com/blog/183411/201310/30211827-2cd65143726f4853ac51b08c6f3fde1c.png
[http_www.cnblogs.com_icebutterfly_archive_2009_08_05_1539657.html]: http://www.cnblogs.com/icebutterfly/archive/2009/08/05/1539657.html
[http_www.saaraan.com_2013_05_auto-load-records-on-page-scroll]: http://www.saaraan.com/2013/05/auto-load-records-on-page-scroll
[Demo]: https://github.com/jkhuang/jkrush.cnblogs.com