Ajaxについて
Ajaxは、ページをリロード(再読み込み)する事無く、ページの一部を更新したり、ページの一部に他のドキュメントを挿入可能な機能です。
TryCMSは、このAjaxを完全にサポートしています。
各ページでAjaxを使用するには、システムのjavascriptをインクルードします。
このコードをhtmlドキュメントのより上部に貼り付けるだけで、このページではAjaxが利用可能になります。
<script src="/trycms/system.js" type="text/javascript"></script>
- 通常インターネットのページは、メニューやアイコン、バナーなど常に表示されているドキュメントと、
リクエストにより変更されるドキュメントで構成されていますので、必要な部分だけを更新可能なAjaxは非常に便利な機能といえますが、
やはり万能とは言えず、デメリットもあります。
【メリット】
- 必要な部分だけを必要なときに更新可能ですので高速に動作します。
- スクロールされた状態を保ったまま新しい情報を表示できます。
- エレメントやレイヤーを使った合成されたポップアップ領域のみ更新できます。
- ソースに記録されませんのでソースがコンパクトでスッキリします。
また、あまり公開したくないテクニックを隠すことにもなります。 - SSIで読み込まれたテキスト内に、更にSSIを使用して入れ子で他のドキュメント挿入することはできませんが、 Ajaxは、SSIで読み込まれたテキスト内でも、Ajaxで読み込まれたドキュメント内でも入れ子で挿入できます。
- 多少の専門知識が必要です。
- ソースに記事が記録されませんのでSEO的には非常に不利となります。
- 更新履歴が残りませんので、ブラウザの[戻る]ボタンでは1つ前の状態には戻りません。
- 更新後でも再表示すると初期状態に戻ってしまいます。
- SSIがサーバ上でページが合成されるのに対し、Ajaxはjavascriptで合成しますので、 javascriptを利用できないブラウザでは表示できません。
これらを踏まえ、どの場面で使用することが最善かを見極めて使用します。 - 最も簡単な使用法が、ボタンのクリックで他のテキストファイルを指定した位置に表示することです。
ここのドキュメントが更新されます。
いかがですか。ページ全体は何も変わらず、更新領域内のテキストだけが更新されましたね。
このコードは非常に簡単です。それではコードを見て行きましょう。<div id="element01">ここのドキュメントが更新されます。</div> <input onclick="getAjaxText('ajaxsample.txt', 'element01');" type="button" value="Ajaxで挿入" />- 1行目は更新する領域の設定です。 今回は <div>エレメントを使用しています。これは<div>エレメントが最も多くのプロパティをサポートし、 さまざまなデザインを構成することが可能なことから最も利用されているからです。 このエレメントにidを設定しています。 idは、インデックスの略ですので、ページ内でユニーク(重複しない)な半角アルファベットから始まる名前でなければなりません。 スタイルシートのことだけをお考えになり、何度も使用しているサイトが有りますが、世界標準(W3C)でも厳守を謳っています。
- 2行目がAjaxの呼び出しです。
わずか1行だけです。 getAjaxText関数は、最初のパラメータで読み込むテキストファイル、2つ目のパラメータで挿入するエレメントを指定しています。
この例では、ボタンが押されたタイミングでテキストを挿入していますが、このように書くと、ページを読み込むと同時にajaxsample.txtも読み込まれます。<div id="element01">ここのドキュメントが更新されます。</div> <script type="text/javascript">getAjaxText('ajaxsample.txt', 'element01');</script>
それなら「最初からページに書いとく」と思われるかと思いますが、ところがどっこい、いろいろな使い道があるのです。 その点については後ほど...