XML)とは、JavaScriptを活用したWEBアプリケーション作成手法です。レスポンスとして受け取ったHTMLをブラウザ画面に反映することで実現してきました。これには以下のような問題があります。項目に入力された値によって別の項目の内容を変化させるなどができない。(フォームの内容をすべて入力しないとリクエストできない。変化させたい部分だけを更新することができない。(サーバへのリクエスト発行時はブラウザで表示しているすべてのHTMLを置き換えなければならない。そのレスポンスをJavaScriptが解釈して画面に表示している内容を変更することで画面遷移をおこないます。これまでの作成方法と比べより対話的なWEBアプリケーションを作成することができるようになります。Ajaxに使用される技術リクエストの発行・レスポンスの受け取りリクエストの発行とレスポンスの受け取りにはXMLHttpRequestを利用します。XMLHttpRequestとは、JavaScriptから利用可能なオブジェクトで、多くのブラウザで提供されています。このオブジェクトを利用することで、任意のHTTPリクエストを発行し、そのレスポンスを取得することができます。XMLと名前がついていますが、XML以外のデータのやり取りも可能です。XMLHttpRequestをはじめとするJavaScriptオブジェクト、関数にはブラウザ間の互換性の問題があるため、注意が必要です。これは、ブラウザ、JavaScriptオブジェクトの実装がばらばらにおこなわれ、単一の明確な仕様に基づいて実装されてこなかったことに起因しています。今回は、ライブラリprototype.jsを利用し演習をおこないます。XMLHttpRequestなどのブラウザ間の互換性の問題を気にすることなく処理を実装することができます。レスポンスの解析JavaScriptがレスポンスを解析する場合には、以下の2つの方法がよく利用されます。)によりツリー形式のデータを表現する方法です。XMLによって表現されたデータの構造をJavaScriptで解析し、処理をおこないます。今回はXMLは使わず、以下のJSONを使用します。Notation)とは、JavaScriptの値定義記述(配列、ハッシュなど)によって構造をもったデータを表現する方法です。JSONによって表現されたデータをJavaScript式として評価することでレスポンスの内容を変数に取り込み、処理をおこないます。...]データnには任意の値、配列、ハッシュを設定可能です。配列に対して「.length」を指定することで配列の長さを取得することができます。「[インデックス]」を指定することで配列の要素を取得することができます。...}値nには任意の値、配列、ハッシュを設定可能です。「.名前」を指定することで値を取得することが可能です。...}画面の更新レスポンスから処理された情報を画面に反映するには、DOMを利用します。Model)とは、JavaScriptから表示中のHTMLのオブジェクト構造を操作するための規格です。HTML文書はNodeオブジェクトのツリーとして表現され、タグ(DOMにおいては要素と呼びます)はElementオブジェクト、テキストはTextオブジェクトとして表現されます。いずれもNodeオブジェクトのサブクラスです。文書のルートはdocumentグローバル変数で取得することができ、HTML文書の内容に応じて以下のような構造となります。Ajaxでは、レスポンスの内容に応じて、DOMを通じてHTML文書の構造を操作します。Ajaxを利用し、一覧画面において、表のみを更新する機能を実装する。「項目名」-「完了」の各カラム右側に昇順ソート、降順ソートボタンを追加する。これらのボタンが押されたときにlist_jsonアクションを実行する。この際、order_byパラメータとしてキー名を設定する。JSON形式でレスポンスを返す。ブラウザ側JavaScriptは、list_jsonアクションのレスポンスにしたがってtableタグの内容を更新する。ソート機能の実装ソート機能の実装をおこなってみましょう。Ajax化をおこなってみましょう。