jquery_jqueryをベースにページが最後までスクロールした際に自動でデータをロードする機能を実装する

現在、私たちがよく使うWeiboやWeChatなどのアプリケーションには非同期読み込み機能があり、つまり、WeiboやWeChatを閲覧するときに、インターフェースの上部または下部に移動した後、プログラムは非同期読み込みを通過するこの方法により高速化されます。データのロードは、毎回データの一部のみをロードするため、大量のデータがあってもすべてを表示できない場合は、非同期メソッドを使用してデータをロードすることを検討できます。

ユーザーが「もっと見る」ボタンをクリックするか、スクロールバーがウィンドウの一番下までスクロールすると、データの非同期ロードが自動的に行われます。次のブログ投稿では、さらに自動的にロードする機能を実装する方法を紹介します。 。

図 1 Weibo が追加の機能をロードする

テキスト

ユーザーのメッセージ データがデータベースに保存されているとします。ここで、クライアントが呼び出すために API インターフェイスを開く必要があります。もちろん、一般的なハンドラー (ASHX ファイル) を使用することもできます。クライアントに電話をかけさせます（詳細については、こちらを参照してください）。

データシート
まず、データベースにデータ テーブル T_Paginate を作成します。このテーブルには、ID、名前、メッセージの 3 つのフィールドが含まれます。ID は自動インクリメント値です。

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 の 3 つのフィールドが含まれています。具体的な定義は次のとおりです。

/// <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 サービスメソッド
次に、メソッド GetListMessages() を実装する必要があります。このメソッドは、GetListMessages() を実装する前に、クライアントから渡されたページングの数に基づいて対応するページング データを取得し、それを JSON 形式でクライアントに返します。方法 まず、データ ページング クエリの方法を紹介します。

Mysql データベースでは、limit 関数を使用してデータ ページング クエリを実装できますが、SQL Server には同様の関数が提供されていないため、主観的なイニシアチブを使用して、独自に実装することができます。具体的な実装は次のとおりです。 :

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

上記では、簡単にするために、データベース操作を Web サービスに直接記述しました。最後に、Results_CTE を呼び出してページング データを取得します。 create JavaScriptSerializer オブジェクトは、データを JSON 形式にシリアル化し、クライアントに返します。

JavaScript
ローカル Web サービス API を呼び出しているため、API インターフェイスを呼び出すための同一オリジン リクエストを送信します (クロスオリジン リクエストの例)。具体的な実装は次のとおりです。

$.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>' + ' —&#63;' + '<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());
    }
  });
};

上記では、jQuery.ajax() メソッドを使用して同一生成元リクエストを送信し、データが正常にロードされ、結果 div に表示されると、ページングされる getData() メソッドを定義しました。番号 (groupNumber) が 1 つ増加します。

これで、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);
    }
  }
});

上記では、スクロール バーが一番下までスクロールすると、getData() メソッドが呼び出され、サーバー内のデータを取得します。

CSS スタイル 次に、CSS スタイルをプログラムに追加します。具体的には次のように定義されます。

図 3 他のプログラムをロードする

上記では、スクロール バーが一番下に達するたびに、より多くのプログラムを自動的にロードし、サーバーからデータを取得する非同期リクエストを送信するために jQuery を実装しました。

デモ プログラムでは、jQuery によるデータの非同期読み込みを導入しました。もちろん、これにはデータのページ クエリも含まれます。ここでは、カスタムの共通テーブル式 Results_CTE を使用して、$.ajax( を使用します)。 ) メソッドは、Web サービス API を呼び出すための同一オリジン リクエストを送信します。データが正常に取得されると、データが JSON 形式で返されます。最後に、データをページに表示します。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。