jQueryではじめるAjax

第2回 jQueryによるAjax実装

この記事を読むのに必要な時間:およそ 7 分

実装してみよう(1)

それでは,jQueryによるAjax実装をしてみましょう。 今回は,第1回で実装した機能と同じものを,jQueryを使って実装して見たいと思います。

機能としては,次のものを実装します。

  • テキストボックスに文字列を入力して「検索」ボタンを押すと,検索結果のサムネイル画像を10件表示する
  • サムネイル画像をクリックすると,ビデオの再生ページに遷移する

jQueryの読み込み

まずは,Javascriptコードの先頭でjQueryを読み込みます。ソースコードと同じディレクトリに配置したとすれば,次のように指定になります。

リスト5

<script type="text/javascript" src="jquery-1.2.1.js"></script>

キーワード入力,検索結果表示部分

検索キーワードを入力するためのテキストボックスを作ります。また,検索を実行する「検索」ボタンを作りますリスト6)⁠

リスト6

<form id="frmSearch">
  <input type="text" id="keyword">
  <input type="submit" value="検索">

</form>
<div id="videos"></div>

id=frmSearchとしてform要素を生成します。検索を実行する「検索」ボタン,また,検索結果の表示領域としてid=videosで定義されるdiv要素を生成します。

第1回では,formタグに,submit時のイベントハンドラを定義しましたが,今回はjQueryを使ってイベント処理を局所化するため,ここには記述しません。

初期化処理

jQueryでページ読み込み時に初期化処理を行うには次のように定義します。

$(function(){
    // 初期化処理...
})

このメソッドはページが読み込まれ,DOM要素の準備ができた段階で画像などの読み込みを待たずに,即座に実行されます。初期化処理,イベントハンドラなどを実装するときに使用します。ここでは,検索フォームのsubmitイベントハンドラを定義します。

リスト7

$(function(){
    // submitイベントハンドラ
    $("#frmSearch").submit(function(){
        search($("#keyword").val());
        return false;
    });
});

submitイベントハンドラ

id=frmSearchで定義される検索フォームのjQueryオブジェクトを生成します。

$("#frmSearch")

そのフォームオブジェクトに対してjQueryのsubmit(fn)メソッドを呼び出すと,引数のfnをコールバック関数としてsubmitイベントハンドラを定義することができます。

$("#frmSearch").submit(function(){
    // イベント処理
});

ここでは,入力されたキーワードを取得し引数として,searchメソッドを呼び出します。id=keywordで定義されるテキストボックスの値を取得するには,次のようにjQueryのval()メソッドを呼び出します。

$("#keyword").val()

この値を引数としてsearchメソッドを呼び出します。

search($("#keyword").val());

また,このform要素がリクエストを送るわけではないので,searchメソッドを実行後,submitイベントハンドラにfalseを返し,action処理をキャンセルします。

return false;

著者プロフィール

池田正一(いけだまさかず)

仕事ではもっぱらJavaを使い,たまにC/C++を書かされ,WebサービスをRubyで開発するプログラマ。ドラえもん好きでドラえもんSuperDatabaseの管理人。stacktrace.jpにて頭の中のStackを出力中。