TOP
＞
書籍連動
＞ スクロールバーを追加する
JPSpanを使ってAJAXをしよう！
第４回：データの読み込みとデバック
著者：
Joshua Eichorn
2005/11/29
前のページ
1
2
3
次のページ
スクロールバーを追加する
今回のサンプルでデータを先読みを行う場合は、複雑なアルゴリズムは必要ありません。ユーザがスクロールを開始した時に、スクロールが続くことを想定できるからです。もちろん、6000行のすべてを事前に読み込むのではなく、スクロールする方向に5行分を先読みしてみましょう。これについては、サイトを開設した後に、利用者の行動を調査し、最適な値に設定すればよいでしょう。
データの先読みを行うには、onScrollDown()関数とonScrollUp()関数を修正したあと、getData()関数に非同期処理を記述します。getData()関数はプロキシオブジェクトをプールしており、そのオブジェクトのget_data()メソッドを呼び出します。コールバック関数は、結果をtableDataオブジェクトに保存し、このオブジェクトをハッシュ扱っています。
こうすることで、JavaScriptが使うメモリの消費量を制限しているわけです。これまでは、必ず0行目から始まるため問題にはなりませんでしたが、この最後のページでは任意の行から開始できるためのGET変数を用意しました。そのため、もし4000行から開始されて配列を使った場合、JavaScriptで抜けている部分を埋める必要がでてきます。
onScrollUp()関数とonScrollDown()関数のロジックを修正して、データが必要になった時にprefetchAsNeeded()関数を呼び出すようにしています。それ以外の場合は、通常の同期的な呼び出しを行い、描画の前に必要な行のデータを取得します。リスト11に、JavaScriptとHTMLを含めた最終的なコードを掲載します。
リスト11：JavaScriptとHTMLを含めた最終的なコード
（画像をクリックすると別ウィンドウに拡大図を表示します）
前のページ
1
2
3
次のページ
著者プロフィール
Joshua Eichorn
Joshua Eichornは、PHPを使ったWebサイトを7年間制作してきました。彼は、非常に有名なPHPのドキュメーションツールであるphpDocumentorの制作者です。また彼は、アリゾナ州立大学のScience in Computer InformationSystems学部の学士号をとっています。
彼はUversa社のシニア設計者として、AJAXをUversa社のアプリケーションに追加する作業を行っています。現在、アリゾナ州フェニックスに住んでいます。
INDEX
第4回：データの読み込みとデバック
データの読み込み
データの先読み
スクロールテーブルの最後に
