TOP＞書籍連動＞ スクロールするテーブル
JPSpanを使ってAJAXをしよう！
JPSpanを使ってAJAXをしよう！

第２回：サーバ用のスクリプトの例
著者：Joshua Eichorn   2005/11/9
前のページ  1  2  3
スクロールするテーブル

   ここまでは単純なサンプルを見てみましたが、より多くのデータを扱うAJAXの例を見ていきましょう。

   データの扱う量が多くなった場合、Webサイトの操作性はどんどん悪くなってきます。

   たとえば、一般的なWebアプリケーションで一覧画面を出す場合には、ページング機能をつけることになります。このやり方が広く使われていますが、次の画面に遷移するときに1、2秒待たされることになります。それに対し、AJAXを使うとサーバに必要なデータだけを問い合わせ、ページに関するそれ以外の情報を無視することができます。そのため、通常のページング機能と比べてページの遷移が軽くなります。

   今回はこのスクロールするテーブルを作ってみましょう。そのためには、以下の5点を実装する必要があります。

  1. データベースと通信するクラスを作成する
  2. JavaScriptにあるテーブルからデータを追加したり、削除したりする
  3. スクロールバーを作成する
  4. AJAXを使って一覧表を読み込む
  5. 各部分を1つに組み合わせる

表2：スクロールテーブル作成時に実装する点
データベースのインターフェース

   今回のサンプルでは、6000行のデータが入ったMySQLテーブルをデータとして使います。

   データベースとやり取りをする部分は従来と同じPHPコードです。データベースに接続して検索を行い、結果を返します。おそらく、あなたのサイトで行っているやり方と変わらないでしょう。

   しかし、いくつか注意が必要な点があります。まず従来よりも高い頻度でクエリーが行われるため、実行が遅い場合はセッションをキャッシュする必要があります。そしてJavaScriptから呼び出すための簡単に使えるAPIを用意する必要があります。

   リスト6にサーバ側のクラスを掲載します。ここでは、全体の行数を取得するためのメソッドと行データを取り出すためのメソッドを用意しています。
1 <?php
2 ⁄⁄ example データベースにあるnails テーブルから、データを取り出す
3 class NailData {
4      var $_conn;
5
6      function NailData() {
7           $this->connect();
8      }
9
10      function connect() {
11           $this->_conn = mysql_connect();
12           mysql_select_db('example');
13      }
14
15      ⁄**
16           * データを必要な部分だけ取り出す
17           *⁄
18      function data($start,$numRows) {
19           $sql = "select * from nails order by nail_id "
20                . "limit $start, $numRows";
21           $res = mysql_query($sql);
22
23           $ret = array();
24
25           $i = $start;
26           while($row = mysql_fetch_object($res)) {
27           $ret[$i++] = $row;
28      }
29      return $ret;
30 }
31
32      ⁄**
33           * テーブルから行数を取り出す
34           *⁄
35      function numRows() {
36           $sql = "select count(*) from nails";
37           $res = mysql_query($sql);
38           $row = mysql_fetch_row($res);
39           return $row[0];
40      }
41 }
42 ?>
リスト6：サーバ側のクラス
   データを返すときは深くネストされた多次元配列ではなく、オブジェクトの配列にする方が便利です。なぜなら、JavaScriptではオブジェクト形式でデータを扱うことになるため、直接変換部分を制御することができるからです。
前のページ  1  2  3

Joshua Eichorn
 著者プロフィール
Joshua Eichorn
Joshua Eichornは、PHPを使ったWebサイトを7年間制作してきました。彼は、非常に有名なPHPのドキュメーションツールであるphpDocumentorの制作者です。また彼は、アリゾナ州立大学のScience in Computer InformationSystems学部の学士号をとっています。
彼はUversa社のシニア設計者として、AJAXをUversa社のアプリケーションに追加する作業を行っています。現在、アリゾナ州フェニックスに住んでいます。


INDEX
第2回：サーバ用のスクリプトの例
  JPSpanサーバ
  画面に出力する例
スクロールするテーブル