第4回：データの読み込みとデバック (1/3)

TOP＞書籍連動＞データの読み込み

JPSpanを使ってAJAXをしよう！

第４回：データの読み込みとデバック
著者：Joshua Eichorn 2005/11/29

データの読み込み

前回でスクロールするテーブルができあがったので、実際のデータを入れて動かしてみましょう。まずは、JPSpanサーバを設定し、先ほど作成したnail_remoteクラスを出力します。このサーバは、登録する前にオブジェクトを作成する以外は、先ほどのものと同じです。

$remote = new nail_remote();
$remote->dataObject = new NailData();
$S->addHandler($remote)

   HTMLページでは、先ほどの内容も含まれています。ページのヘッダーでは、スクロールバーのウィジェット用クラスと、JPSpanが生成するクライアントをインクルードしています。次に、サーバと接続するための、getDataSync(start,rows)とgetNumRowsSync()の2個の関数を設定しています。

   これらの名前から推測できる通り、今回は同期的にJavaScriptを呼び出しています。これによって、コールバック関数が不要なので、関数の内容がシンプルになり、次のデータを得るまでスクロールをする必要がないことが利点となります。

   リモートのデータ関数は以下のようになります。

var remote = new nail_remote();
remote.Sync();
function getDataSync(start,rows) {
     return remote.data(start,rows);
}
function getNumRowsSync() {
     return remote.num_rows();
}

ページにHTMLが追加された後は、getDataSync関数を呼び出し、テーブルを構築しています。実際には、この部分はHTMLページを生成するPHPコードで行い、余分なAJAXの呼び出しは省略します。しかし、今回は複雑にするようなことをできるだけ排除します。テーブルとスクロールバーの設定も、イベント関係の関数の前に、同じように行います。

異なるのは、getNumRowsSync()関数を使って、テーブルの最大行を取得していることです。onScrollDown()関数は、テーブルのデータ（tableData）に必要な行がセットされていない場合は、getDataSync()関数を呼び出します。

if (!tableData[index])
     {var d = getDataSync(index,5);
     for(var i in d) {
          tableData[i] = d[i];
     }
}

onScrollUp()関数も同じ処理になります。これらの関数を使うと、毎回5行ずつ取ってくるため、取得に時間がかかることがあります。読み込み中のアイコンを表示したり、データを事前に読み込むことで、解決できます。

1 2 3 次のページ

書籍紹介
PHPプログラマーズマガジン

PHPプログラマーズマガジンは、PDF形式で読者の方にお届けするPHP言語（PHP:Hypertext Processor）専門誌です。カナダMTA出版のphp|architect誌を日本語に翻訳し、独自の記事を加えて月刊でお届けしています。

発行：アシアル株式会社　　価格：1,029円

ご購入はコチラ http://www.asial.co.jp/magazine/

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