HTTPサーバーとWeb開発

63. Ajax の JavaScript の基本を学ぶ

Ajax は XML を JavaScript で非同期通信する技術であると既に説明したがもう少し具体的に言えば

  1. Ajax でサーバーへ GET/POST で要求を送信する
  2. CGI は XMLを応答データとして Ajax に戻す
  3. Ajax は受け取ったXML の項目を抽出して HTMLタグの ID に値を埋め込む

という連続処理が Ajax 動作のシナリオとなる。
HTML の各タグにはタグの識別を示す「ID」を定義することができ、この ID を指定して XML の値を埋め込むことが Ajax による基本的な動作となる。
例えば最初に表示されている HTML のあるタグ :

<div id="SHCODE"></div>

というタグがあったとしよう。
この ID="SHCODE に Ajax によって値「NV-CF1」を埋め込むと、

<div id="SHCODE">NV-CF1</div>

のようになる。Ajax を起動するトリガーとなるイベントは JavaScript で検出可能なイベントで
あれば何でもよい。
あるボタンを押したときや、ページが最初に表示されるときのイベントを取得して上記の 1 〜 3 を実行するには、

new Ajax.Request("要求URL", "投入メソッド", onComplete:"通信が完了したとき実行する関数名");

の形式の JavaScript を記述すればよい。例えば

new Ajax.Request("http://192.168.1.1/cgi-bin/MYCGI.PGM", "GET",onComplete:SET_CODE);

のような具合である。
ただし、これらの前には 「ライブラリー」と呼ばれている外部記述の JavaScript をどこかで挿入
するようにしておく。
この「ライブラリー」を使わなくても原理的には自作で 「ライブラリー」の代わりの JavaScript を
記述してもよいが、ライブラリーではブラウザの違いなどの例外も考慮されているのでライブラリー
を使うことが一般的である。
最も普及しているライブラリーは「PROTOTYPE.JS」というもので配布サイトからダウンロードしてご自分のサーバー(i5) に導入して使用する。
PROTOTYPE.JS の挿入を指示するには、

<script type="text/javascript" src="PROTOTYPE.JS"></script>

のように指示する。
ところで、サーバーから送られてくる XML とは次のようなものである。

<?xml version="1.0" encoding="Shift_JIS"?>
<result>
<SHCODE>NV-BS30S</SHCODE>
<SHNAME>目次ビデオ</SHNAME>
<SHTANK>0165000</SHTANK>
<SHSCOD>0002</SHSCOD>
</result>

つまり、XML とは <MYTAG> 〜 </MYTAG> をひとつの項目とする多層構造のデータベース
である。XML がまだ初めてであっても、これだけの知識でほぼ十分である。
ただし、この XML で注意して欲しいのは Shift_JIS が指定されていることである。
Ajax の市販書籍の大半が、Ajax と言えば、すべて Unicode (ユニコード) が必須であるかの
ように解説されているが、何も Unicode である必要はない。
省略値の Ajax のコードは確かに UTF-8 と呼ばれる Unicode であるが System i の場合はUTF-8 に変換するのはかなり困難である。
従って変換が容易な Shift_JIS 、つまり単なる ASCII であれば従来の HTTP構成で、そのまま変更することなく動作する。
すなわち ASCII : Shift_JIS として従来の HTML や JavaScript と同様に扱うことができる
ようになる。
参考までに System i では RPG で %UCS2 という UTF-16 への変換のための命令は用意
されているがUTF-8 への変換命令はない。
このあたりについても雑誌「アイマガジン vol.3」(2007年7月27日号) でさらに詳細を解説して
いるので参照されたい。