Open Source Web Development Tutorials - Dev Shed

拡張Ajax手法によるActive Client Page
（2009/02/17公開）

拡張Ajax手法によるActive Client Page

　今回は、4回連載記事の最終回として、Ajax手法によるActive Client Pageに筆者が加えた拡張点を紹介します。また記事の最後に、2つの別の手法も紹介します。いずれも、Webページをより速くロードする方法の1つです。

ストア

　Active Client Pageテクノロジーには、ストアが必要です。Ajax手法では、ストアはマスターページのHEAD要素のJavaScriptに含まれています。データはJavaScript変数、JavaScript配列、JavaScriptオブジェクトプロパティのいずれかに格納されます。ストアは、これらの要素で構成されます。この点は、以前に解説したとおりです。表示されるページは入れ替わりますが、各ページのデータはHEAD要素のスクリプト内のストアに保持されます。

データを格納する別の方法：JavaScript 2D配列

　前もって必要な情報も含めて、データ（おそらくデータベースからの）がテーブルの形式であれば、JavaScript 2D配列にそのデータを格納できます。2D配列を作成するときは、forループを使います。次のコードは、6×4の2D配列を作成します。

a = new Array(6)
for (i=0; i < 6; i++)
{
a[i] = new Array(4)
}

表示値を「none」に設定したHTMLテーブル

　前もって必要な情報も含めて、データ（おそらくデータベースからの）がテーブルの形式であれば、そのデータをHTMLテーブルに格納し、表示プロパティを「none」に設定しておくことができます。マスターページの主要なHTML要素はDIV要素です。DIV要素には、ページのHTML要素と、テキスト（ページ）を前もってダウンロードするためのAjaxスクリプトが含まれています。テーブルやHTML要素の表示プロパティの値が「none」に設定されている場合、そのテーブルはWebページ上に表示されません。

　DIV要素と、それに付随する1つ以上のHTMLテーブルを用意して、各テーブルの表示プロパティを「none」に設定しておくことができます。これらのテーブルのセルに、データを保持しておきます。CSSの通常のフローでは、マスターページのDIV要素の直前に、これらのテーブルを作るのが適切です。このテーブルを作るには、次のように入力します。

<table id=“T1” style=“display:none”></table>

　ここで「T1」は、上のテーブルタグのIDです。DOM機能を使用して、行、セル、セルのコンテンツを追加できます。必要なDOM機能については、次ページで説明します。