連載:Ajaxで作るインタラクティブWebアプリケーション
(3)
JSONによるデータ通信でAjaxアルバムを完成させる
田中 孝太郎
dotimpac.to
2006/3/17
PrototypeのAjaxオブジェクト |
続いて、JavaScript側の通信処理を見ていこう。今回はphotoalbum.jsの一部のみを変更しており、大部分は前回のスクリプトと同様である。
if(item) { |
XMLHTTPの通信処理のための機能は、PrototypeでAjaxオブジェクトとして用意されている。XMLHTTPRequestはブラウザによって実装が異なり、処理を切り替えなければならないのだが、Prototypeの機能を使えば、互換性を意識せずに簡単に非同期通信を行うことができる。今回は通常のリクエストである「Ajax.Request」を使用するが、データを部分更新するような場合には、更新要素のidを指定すれば通信後自動的にデータを更新してくれる「Ajax.Updater」を使用すると便利だ。
Ajax.Requestに、urlとオプションを渡してやることで通信を行う。オプションにリクエストのパラメータ、成功時、エラー時などの処理を関数オブジェクトで渡すことで、取得したデータの処理やエラー処理をすることができる。この辺りの書式は、これまでのscript.aculo.usのエフェクトなどでの処理とほぼ同じである。
「onComplete」がリクエスト成功時の処理だ。引数にXMLHTTPのリクエストオブジェクトが格納されている。「responseText」プロパティに応答内容のJSONが含まれているため、この文字列をオブジェクトに変換し、配列に格納している。evalには式を渡す必要があるため、リテラルであるJSONをカッコでくくって
var items = eval( '(' + response.responseText + ')' ); |
とし、JSONをオブジェクトに変換している(ちなみに、JSONのプロパティの末尾などに余計なカンマが入っていると、このevalでIEにのみエラーが発生する。このバグはよく発生する割に見付けにくいので注意しよう)。
cgiで出力するJSONは、前回まででJavaScriptで用意していたダミーデータと同じ形式にしておいたので、JSONをオブジェクトにしてからの処理は前回までとまったく同様である。このように、Prototypeのようなライブラリを使えば、Ajaxの非同期通信自体はまったくなんの苦労もなく実現できることが分かるだろう。
AjaxPhtoAlbumの完成 |
前回までのように、今回のサンプルの動作デモも、通信もふくめてここでご覧いただければよかったのだが、諸事情でそれができなかった。Rubyのサーバ環境があればサンプルをアップロードして実行してみてほしい。前回までと違い、アルバム名をクリックすると通信中のスピナーが表示され、データを取得してからアルバム画像が表示されるのが分かるはずだ。データディレクトリに画像ファイルの入ったディレクトリを追加すればアルバムを追加することができるので、ここまで来れば十分実用的なWebアプリケーションといえるのではないだろうか。
サンプルでは扱わなかったが、筆者の開発しているPhtoAlbumアプリpiccyでは、タグウィンドウへのドラッグ&ドロップ機能、タイトルやコメントの編集機能なども盛り込まれている。これらの機能もPrototypeやscript.aculo.usを利用して実装されている。JavaScriptライブラリを使用して処理を追加し、Ajax.requestなどの通信処理も追加した上でサーバ側でのデータ格納処理を書けば、サンプルと同様に機能追加できるはずだ。もし実現してみたい機能やデザインがあれば、これをベースに改良してみてほしい。
最後に |
AjaxPhtoAlbumが完成したところで、本連載は終了となる。基本的に本連載では「有用なJavaScriptライブラリを使えば、Ajaxはさほど大変ではない」ということをいいたいと思っていたが、JavaScript自体になじみがないと難しかったかもしれない。しかし、現在のAjaxの流行は、JavaScriptの言語としての生産性の高さも証明しているのではないだろうか。個人的には、去年まで誰もが忘れていたというのが信じられないほど、便利な言語だと思っている。
JavaScriptの勉強として、ライブラリを使ってAjaxに手を付けてみるというのは、かなり良い選択肢のはずだ。興味があればぜひチャレンジしてみてほしい。
3/3 | ご愛読ありがとうございました |
INDEX |
||
Ajaxフォトアルバムのフェードイン画像フレームを作ろう | ||
Page1<PhtoAlbumを完成させよう> Ajaxの「非同期」とは非同期通信ではない/JavaScriptライブラリの最新状況 |
||
Page2<通信機能を搭載したPhtoAlbumサンプル>
JSONによるデータ通信/指定要素の位置まで画面をスクロールするエフェクト |
||
Page3<PrototypeのAjaxオブジェクト> |
古くて新しいAjaxの真実を見極める 「Webインターフェイスの新しい手法」「画期的なWebアプリケーションの仕組み」であるとして開発者たちの人気を集めるAjaxとは何なのか、その真実を見極めてみよう 最終更新 2005/8/2
|
- GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 (2017/7/12)
資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する - GET/POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 (2017/7/10)
HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】 - PHPのfor文&ループ脱出のbreak/スキップのcontinue【更新】 (2017/6/26)
素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】 - Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート (2017/6/12)
Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
|
|