Ajax サンプルページ

 Ajax は Asynchronous JavaScript + XML(非同期な javascript と XML)の略です。従来のアクション毎にページ遷移させる動的コンテンツに比べ、必要な部分のみのデータの受信と書き換えが出来る Ajax はサーバ負荷低減が期待出来ます。
 Ajax による構築には prototype.jsjQuery, mootools などのフレームワークがあります。どちらも様々なプラグインが用意されていますので、必要に応じて使い分けるのが良いです。また、ちょっとした調整にて同一ページ内において複数のフレームワークを同居させる事も可能になります。

1. 候補キーワードリアルタイム検索

入力フォームに検索したいキーワードを入力すると、登録されているキーインデックスから候補を非同期で取り出し、一覧表示する検索機能です。サンプルとして「a」「b」「c」のキーワードで登録されています。

検索結果一覧:

2. タイマーによる自動コンテンツ読み込み (10秒毎)

jQuery のタイマー機能、及び Ajax を用いて一定時間毎にサーバより文字列を取り込み表示エリアに受信した文字列を表示します。

[ 状態 ]
ここに切り替えるコンテンツ

3. リアルタイムカウンタ

ページ遷移せずに、クリックなどのアクションを受け、サーバのカウンタDBの値をカウントアップし、その結果を表示部分に反映させる。

↓ このカウンタが動きます。