Ajaxとは、Asynchronous JAvaScript Xml の略

Webアプリケーションを開発する代表的な技法のひとつである。

ざっくり言えば、HTML（XML）でクライアントを構築する、サーバとは非同期通信（Asynchronous）によりデータのやり取りをする、これらを JavaScriptが提供するライブラリを利用して実現する、ということ。

具体的には、HTMLツリーを編集は DOM APIを使う。HTTPインタフェースの基本的な処理（リクエストの送信とレスポンスの受信）は XMLHttpRequestクラスを利用。

クライアントの実装は、サーバの実装がどのようなものであろうと、それに影響を受けることなく、共通化できる。唯一サーバに依存する点はインタフェース先を示す URLだけである。

例題１. POSTコマンド パラメータなし

例題２. POSTコマンド パラメータあり

例題３. POSTコマンド JSONパラメータを送る

サーバ側の処理

CSSファイル

レスポンスデータはすべて JSON形式とする。

Content-Type : application/json

サーバ側は Apache/PHPと Node.jsの２種類でそれぞれ実装してみた。コードは章末で一括して紹介する。

パラメータなしの POSTコマンドを送信し、データ（JSON文字列）を受け取る。データは、コード（A〜C）がそれぞれ４個の数値を保持する構造である。

インタフェース関連図

JSON形式の文字列が返る。

レスポンスが正常に受信できたときに onloadイベントのコールバック関数から呼ばれる。受信データから、DOM APIを使用してHTML要素を作成し、HTMページに追加する。

初期表示でコードのリストをサーバから取得し、セレクトボックスに設定する。セレクトボックからコードが選択されると、それをパラメータにして POSTコマンドを送信し、レスポンスデータとしてコードに応じた４個の数値の配列（JSON文字列）を受け取り、編集して表示する。

インタフェース関連図

データの送受信は同様な処理が２回発生するため共通関数として定義する。

送受信をカプセル化した sendReq関数は、引数に url、パラメータ、およびを処理を識別するコード受け取る。XMLHttpRequestオブジェクトを作成してサーバに POSTコマンドを送信する。

レスポンスデータを受信したときに起動する onloadイベントのコールバック関数を実装する。受信データはコードのリストまたはコードに応じたデータになるので、処理の識別コードに基づき、それぞれに応じた編集処理を実行する。

コードリストを取得するためのリクエストをサーバに送信する。

JSON形式の文字列が返る。

レスポンスを受信した時点で XMLHttpRequestオブジェクトの onloadイベントが発生しコールバック関数が起動する。 その中で、受信したコードリストを元にセレクトボックスを作成して表示する。

セレクトボックスの値が変わったときのイベントハンドラを定義する。 選択されたコードに対応するデータをサーバから取得するためにリクエストを送信する。

x-www-form-urlencoded形式で指定する。

JSON形式の文字列が返る。

レスポンスが正常に受信できたときに onloadイベントのコールバック関数から呼ばれる。受信データから、DOM APIを使用してHTML要素を作成し、HTMページに追加する。

初期表示で、コードのリストをサーバから取得し、セレクトボックスに設定する。セレクトボックからコードが選択されると、それをパラメータにして POSTコマンドを送信し、レスポンスデータとしてコードに応じた４個の数値の配列（JSON文字列）を受け取り、編集して表示する。（ここまでは例題２と同じ）

値は inputタグに表示し、変更できるようにする。変更したデータは更新ボタンでサーバに送信し、サーバの元データを更新する。データはテキストファイルとして保持する。POSTコマンドのパラメータは JSON形式の文字列とし、Content-Typeは、application/jsonとする。

インタフェース関連図

基本的な動きは例題２の関数と同じ。ここでは、引数の typeによりリクエストヘッダーの Content-Typeを切り替え、JSON形式のパラメータを送れるようにしている。

コードリストを取得するためのリクエストをサーバに送信する。および、更新ボタンの クリックイベントのハンドラ（update関数の呼び出し）を定義する。

JSON形式の文字列が返る。

例題２と同じ

例題２と同じ

JSON形式の文字列が返る。

コードに対応するデータが正常に受信できたときに onloadイベントのコールバック関数から呼ばれる。受信データから、DOM APIを使用してHTML要素を作成し、HTMページに追加する。値は変更ができるように inputタグに代入する。

更新ボタンがクリックされたときに起動する。ブラウザ上で変更された値をリクエストメッセージに編集し、サーバに送信する。サーバは変更データをファイルに更新する。

サーバにおいて、データはテキストファイルに保存する。

data.txt

JSON形式のテキストデータをファイルから読み込みクライアントに返す。

データからコードを抽出し JSON形式の配列としてを返す。

JSON形式のテキストデータをファイルから読み込み、POSTパラメータで受け取ったコードに対応するデータを抽出し JSON形式の配列としてを返す。

myServer.js