JavaScriptの活用(Ajax)

Ajax(Asynchronous JavaScript + XML)とは、JavaScriptを活用したWEBアプリケーション作成手法です。

これまで作成してきた画面は、以下のように画面を遷移するたびにformタグからリクエストし、 レスポンスとして受け取ったHTMLをブラウザ画面に反映することで実現してきました。

Ajax

このやり方はシンプルですが、画面遷移ごとに毎回画面全体のHTMLを書き換えることに なります。これには以下のような問題があります。

そこで、Ajaxでは、JavaScriptからサーバに対してリクエストを発行し、 そのレスポンスをJavaScriptが解釈して画面に表示している内容を変更することで画面遷移をおこないます。

Ajax

JavaScriptを使い、クライアントで動作するロジックを作成することで、 これまでの作成方法と比べより対話的なWEBアプリケーションを作成することができるようになります。

Ajaxに使用される技術

リクエストの発行・レスポンスの受け取り

リクエストの発行とレスポンスの受け取りにはXMLHttpRequestを利用します。
XMLHttpRequestとは、JavaScriptから利用可能なオブジェクトで、多くのブラウザで提供されています。
このオブジェクトを利用することで、任意のHTTPリクエストを発行し、そのレスポンスを取得することができます。
XMLと名前がついていますが、XML以外のデータのやり取りも可能です。

XMLHttpRequestをはじめとするJavaScriptオブジェクト、関数にはブラウザ間の互換性の問題があるため、注意が必要です。
これは、ブラウザ、JavaScriptオブジェクトの実装がばらばらにおこなわれ、単一の明確な仕様に基づいて実装されてこなかったことに起因しています。

今回は、ライブラリprototype.jsを利用し演習をおこないます。
prototype.jsはブラウザ間の互換性を吸収するような実装となっているため、 XMLHttpRequestなどのブラウザ間の互換性の問題を気にすることなく処理を実装することができます。

レスポンスの解析

JavaScriptがレスポンスを解析する場合には、以下の2つの方法がよく利用されます。

XML
XML(Extensible Markup Language)とは、タグ付け(<タグ> ... )によりツリー形式のデータを表現する方法です。
XMLによって表現されたデータの構造をJavaScriptで解析し、処理をおこないます。
今回はXMLは使わず、以下のJSONを使用します。
JSON
JSON(JavaScript Object Notation)とは、JavaScriptの値定義記述(配列、ハッシュなど)によって構造をもったデータを表現する方法です。
JSONによって表現されたデータをJavaScript式として評価することでレスポンスの内容を変数に取り込み、処理をおこないます。

データ 記述 用例
配列 [(データ1), (データ2), ...]
データnには任意の値、配列、ハッシュを設定可能です。
配列に対して「.length」を指定することで配列の長さを取得することができます。
また、「[インデックス]」を指定することで配列の要素を取得することができます。
[1, "Test", ...]
ハッシュ
(連想配列)
{(名前1): (値1), (名前2): (値2), ...}
値nには任意の値、配列、ハッシュを設定可能です。
ハッシュに対して「[名前]」を指定するか、
「.名前」を指定することで値を取得することが可能です。
{name: "名前", "name2": [1, 2, 3], ...}


画面の更新

レスポンスから処理された情報を画面に反映するには、DOMを利用します。
DOM(Document Object Model)とは、JavaScriptから表示中のHTMLのオブジェクト構造を操作するための規格です。
HTML文書はNodeオブジェクトのツリーとして表現され、タグ(DOMにおいては要素と呼びます)はElementオブジェクト、テキストはTextオブジェクトとして表現されます。 いずれもNodeオブジェクトのサブクラスです。
文書のルートはdocumentグローバル変数で取得することができ、HTML文書の内容に応じて以下のような構造となります。
DOM
Ajaxでは、レスポンスの内容に応じて、DOMを通じてHTML文書の構造を操作します。

Ajaxを利用した機能の仕様

ここでは、演習として、以下のような機能を実装してみましょう。

変更対象 機能 変更内容
一覧画面 ソート機能 Ajaxを利用し、一覧画面において、表のみを更新する機能を実装する。
  • 「項目名」-「完了」の各カラム右側に昇順ソート、降順ソートボタンを追加する。
    これらのボタンが押されたときにlist_jsonアクションを実行する。
    この際、order_byパラメータとしてキー名を設定する。(降順の場合は「!キー名」とする)
  • list_jsonアクションは、「order_by」パラメータに指定された順序に従ってデータを取得し、 JSON形式でレスポンスを返す。
  • ブラウザ側JavaScriptは、list_jsonアクションのレスポンスにしたがってtableタグの内容を更新する。 今回は簡単化のため、項目数に変化がある場合は画面全体を更新するものとする。
追加・編集・削除画面 ダイアログ表示機能 Ajaxを利用し、一覧画面を消去することなく、追加・編集・削除画面を開くようにする。


ソート機能の実装

ソート機能の実装をおこなってみましょう。

ソート機能の実装

演習:追加・編集・削除画面のAjax化

追加・編集・削除画面のAjax化をおこなってみましょう。

演習:追加・編集・削除画面のAjax化