jQueryではじめるAjax

第2回 jQueryによるAjax実装

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

まとめ

今回は,JSON,JSONPを説明しました。JSONとは何か,JSONPはどのような仕組みで実現されているかイメージはつかめたでしょうか。

また,jQueryを使ったAjax実装のサンプルを解説しました。jQueryを使わない第1回の実装と見比べてみると,次のことが分かると思います。

script要素を生成しなくてもよい

script要素の生成は,WebクライアントでJSONPを実現するための実装方法であり,実現したい機能自体とは関係がありません。jQueryがこれを隠蔽してくれるおかげで,ビジネスロジックの実装に集中できます。

コールバック関数を指定しなくてもよい

コールバック関数を指定しなくても,jQueryがcallbackというパラメータとして内部で自動的に生成してくれます。そして,レスポンスデータを引数として処理結果に応じたメソッドに渡してくれます。

Youtube APIのコールバック関数のパラメータはcallbackなので,何も指定しなくてもよいというわけです。

もし,コールバック関数のパラメータがcallbackではない場合は,$.ajaxにjsonpオプションを引数として指定することで上書きすることができます。たとえば,コールバック関数のパラメータがjsonpCallBackの場合は,{"jsonp":"jsonpCallBack"}とします。

HTMLとイベントハンドラが分離されている

フォームのsubmitイベントハンドラを,第1回は次のようにHTMLに埋め込んで記述していました。

<form onsubmit="search(); return false;">

しかし,jQueryを使った今回は,次のようにHTMLにイベントハンドラを記述しませんでした。

<form id="frmSearch">

submitイベントハンドラは,$(function(){ ... }) 内で,jQueryのsubmitメソッドを使って定義しました。このように,HTMLとイベントハンドラが分離されていると,HTMLがシンプルになり,イベント処理が局所化できるため,ソースがとても見やすくなります。

送信クエリを組み立ててくれる

送信クエリの文字列を組み立てる時には,細かい注意が必要です。 パラメータが多くなると,パラメータ文字列とリテラルや変数のペアを作るときにミスがおきやすくなります。また,encodeURIComponentエンコードも忘れがちです。もちろんこれらの処理を扱うライブラリなどを作ればよいのですが,jQueryを使うと,dataオプションにオブジェクトの形式で渡すだけで内部で自動的に生成してくれます。

DOMプログラミングが簡潔に記述できる

jQueryには強力なセレクタがあるため,目的の要素に少ない記述で簡単にアクセスすることができます。また, Chainabilityの仕組みが記述をより簡潔にします。

今回のサンプルくらいの簡単な実装ですと,jQueryの威力が少し分かりにくいかと思いますが,AjaxでDOMをグリグリいじるようなアプリケーションではとても威力を発揮します。

次回は,Youtube APIを詳しく掘り下げ,jQueryをより使った実装を紹介します。

著者プロフィール

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

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

コメント

コメントの記入