Open Source Web Development Tutorials - Dev Shed

Active Client Pageの単純な例
（2009/02/10公開）

Ajax手法によるActive Client Page：単純な例

　この記事は、Ajax手法によるActive Client Pageに関する4回連載記事の第3回です。今回は、Ajax手法を示す単純な例を、コード付きで紹介します。この前の2つの記事は必ず読んでください。以前の記事には、今回行う操作を理解するために役立つ説明が書かれています。一応その内容については、今回の記事の冒頭部でも簡単に触れています。

今回の例の説明

　マスターページは、ブラウザから最初のページとして送られます。最初のページには、「This is the first page」というテキストと、「Next Page」というタイトルのボタンが表示されます。「Next Page」ボタンをクリックすると、次のページが表示されます。このページには「This is the second page」と表示されます。

技術的な説明

　マスターページにはDIV要素が含まれています。最初のページのコンテンツはサーバーのDIV要素内にあります。つまり、「This is the first page」というテキストとボタンはDIV要素に含まれます。2ページ目のテキスト（コンテンツ）をダウンロードするJavaScriptコードは、DIV要素の最後にあります。このスクリプトは、マスターページがロードされたときに実行されます。HEAD要素のスクリプトは、Webページのロード時に実行されないのに対して、BODY要素のスクリプトは実行されることに注意してください。

　ストアは、マスターページのHEAD要素に含まれる配列要素です。

　この要素の最後にあるAjaxスクリプトが実行されると、2ページ目のコンテンツはユーザーの気づかないうちに、テキスト形式でダウンロードされます。コンテンツは文字列として送られます。この文字列は、HEAD要素スクリプト内で、インデックスが2の配列要素に割り当てられます。3ページ目の文字列があれば、その文字列はインデックス3の配列要素に割り当てられます。4ページ目はインデックス4に、以下同様に割り当てられます。つまり、インデックス0の配列要素には何も割り当てられません。

　この単純な例では、2ページ目に対応する1ページ分の文字列のみを使い、インデックス2の配列要素に割り当てます。番号付けは、ページ1に対応する文字列はインデックス1の配列要素に、ページ2の文字列はインデックス2に、ページ3の文字列はインデックス3に、以下同様に割り当てられるように選択しています。ただしここに示す例では、インデックス1の配列要素には何も割り当てられません。ほかのページと同様に、ページ1のコンテンツを文字列形式でサーバー上に保持し、Ajaxによって前もってダウンロードして割り当てを行うこともできます。

　最初のページのボタンをクリックすると、DIV要素のコンテンツが、インデックス2の配列要素の値であるテキスト（このテキストにはHTMLタグを含めることができます）で置き換えられます。

　以上が、ここで紹介する単純な例の技術的な説明です。