カタログページにDojoあり

カタログページに関するサーバ側の風景」のエントリで説明したカタログページの表示のためのサーバ側の処理は,サーブレットとJPA(Java Persistence API)の組み合わせによって実装されていた。CatalogServletサーブレットでは,Webブラウザからの要求情報に含まれるcommandパラメータの内容によって処理分岐し,CatalogFacadeインスタンスの所定の処理を呼び出して,その結果をXMLあるいはJSON形式で返却するという処理が行われていた。 では,CatalogServletサーブレットに要求を出す側の処理はどのようなものだろうか。これを知るためには,カタログページでのイベント処理を担当するcatalog.jsファイルを見ていく必要がある。 ざっくりとcomandという文字列でcatalog.jsファイル内を検索してみる。すると,125行目付近に,以下のようなコードを見つけることができる。

var bindArgs = {   url: “/petstore/catalog?command=categories&format=json”,   mimetype: “text/json”,   load: function(type,json) {     ac.load(json);     processURLParameters();   } }; dojo.io.bind(bindArgs);

「dojo.io.bind(bindArgs);」という文が今回のメインだ。これは,サーバに処理要求を送信するために,Dojoが持つioパッケージのbind()関数を使用している箇所である。これによって,俗に言うAjaxでの非同期通信が行われる。Ajaxというと,XMLHttpRequestオブジェクトなどを利用したコードがまだまだ主流だが,prototype.jsなどと同じように,そのような低レベルAPIを隠蔽したものにDojoも仕上がっている。 通信内容および処理結果に対する処理は,bind()関数の引数として渡しているbindArgs変数の内容に従って決定される。bindArgs変数の内容は,この例では以下のものが定義されている。

  • url - サーバに送信するURL文字列

  • mimetype - 処理結果の形式

  • load - 処理結果を受信した際に呼び出す関数 urlを見ると,commandパラメータにcategoriesという値を指定しているのがわかる。/petstore/catalogというパスはCatalogServletサーブレットにマッピングされているので,ここでは全てのカテゴリ情報の取得をCatalogServletサーブレットに依頼していることになる。 さらにここでは,formatパラメータにjsonという値を指定し,mimetypeとしてtext/jsonとしている。CatalogServletサーブレットのhandleCategories()メソッドでは,formatパラメータの値がjsonだった時は,JSON形式で処理結果を生成する動きになっている。mimetypeにtext/jsonを指定することで,CatalogServletサーブレットからの処理結果文字列を,JavaScriptのオブジェクトに自動的にDojoが変換してくれる。 AjaxというとXMLでの結果取得を真っ先に想像するが,XMLのパース処理やJSON形式の文字列をeval()関数でオブジェクト化する処理とのコストパフォーマンスおよびコードの可読性の比較を考えると,JSON形式の方がJavaScriptがメインの実装方針では優位性があるだろう。 bind()関数は基本的に非同期通信なので,CatalogServletサーブレットからの処理結果を受けとるためのコールバック関数が必要となる。ここでは,loadに直接関数オブジェクトを定義して渡している。第2引数のjsonには,自動的に変換されたCatalogServletサーブレットの処理結果,つまりカテゴリの一覧が渡されるので,それをaccordion.jsファイルに定義されているload()関数に渡して,カタログページの左側にあるペットのカテゴリ一覧のレンダリングなどを行っている。 ここまでの流れを簡単に図にすると,以下のような感じだ。

categories-json.gif 非同期通信とJSON関連の処理をカプセル化してくれているので,非常に使い勝手が良い。dojo.io.bind()関数は,Dojoの中でも非常に多用される機能であり,catalog.jsファイル中でも他の箇所で多く見つけることができる。bind()関数は,他にもいろいろなプロパティを使用できたりするので,「 io.html - dojo manual」を参考にして試してみると良いだろう。

このエントリーをはてなブックマークに追加

関連記事

2023年のRemap

Remapにファームウェアビルド機能を追加しました

Google I/O 2023でのウェブ関連のトピック

2022年を振り返って

現在のRemapと今後のRemapについて