doc drawn up: 2003-12-10 .. 2011-06-06

JavaScript 研究

JavaScript リファレンス | JavaScript ガイド | DOM リファレンス | Form (HTML5)

AJaXAsynchronous JavaScript + XML
AT 仕様のインターネット・ブラウジング

流行語の発生源はこちら（？）。ここの図解を見るとわかるが、イメージ的には「（従来的な意味での）ブラウザとサーバとの間に Ajax エンジンが追加される」というよりも、「ユーザと（従来的な意味での）ブラウザとの間に、さらに Ajax の援用による UI 層が増えた」という感じの方が、より的確な感じがする。要するに、自動車の運転で言うと、MT（マニュアル）車か AT（オートマチック）車かという違いに相当するといえる。非 Ajax（従来のブラウジング）の場合では、ユーザが直接ブラウザを操作して、HTTP 要求を発信し、サーバからの応答を受け取っていたわけで、MT 車でクラッチの On/Off を運転者が直接切り替えながら変速ギアをシフト操作するのに相当する。一方、Ajax の場合、HTTP 通信の要求＆応答ということによる動作制限をユーザが直接意識する必要がなくなり、AT 車でギアシフトを意識せずにハンドル操作とアクセル＆ブレーキ操作だけに集中していればいいケースに相当する。

MT 車の場合、クラッチを切っている時にアクセルを踏んで加速することはできない（エンジンが空吹きするだけ）。つまり、運転者は、クラッチの On/Off に直接アクセル操作の影響を受ける。一方、AT 車の場合クラッチは実質上存在しないので、運転者は好きなときにアクセルを踏んで加速操作することができる。同様に、非 Ajax では、HTTP 要求をサーバに送信してサーバからの応答を待っている間、ユーザは新しい操作ができない。それに対して Ajax では、HTTP 要求をサーバに送信して応答待ちの場合でも、ユーザは気にせずに新しい HTTP 要求を発行するような種類の操作を行うことができる。このあたり、例えば高橋登史朗「Ajax　Sync(同期)とAsync(非同期)」に掲載の 1 番目のサンプルなど体感的にわかりやすい。

まあ、実際のところは、Ajax エンジンとなる「XMLHttpRequest オブジェクト」が、背後でブラウザの再読込みボタンをこまめに押しているような感じで、いわゆるポーリングを行い、サーバからのHTTP 応答に対して、必要があれば JavaScript で定義された動作を行って、ブラウザに表示するページの必要な部分に反映するという形になっているようである。つまり、ユーザから見えない背後の部分では、相変わらず従来と同じく、同期的な HTTP 通信作業が行われているし、HTTP 通信そのものが何か全く従来と違った新しいものに取り替えられたわけでは、決してない。

それでも、例えば Web チャットシステムのようなものを考えてみると、非 Ajax の場合は、ページを定期的にリロードさせるような形で実現するのが普通であった。つまり、ブラウザの右上なんかにあるアイコンが定期的にぐりぐりと読み込み中となってページ全体がリフレッシュされる。新しい書込があるとそのコメントが追加されているし、新しい書込がなかった場合でも、ブラウザは定義された通りに定期的にページをリロード動作することになる。一方、Ajax の Web チャットシステムであれば、Ajax エンジン（XMLHttpRequest オブジェクト）が定期的にポーリングを行い、サーバ上のデータに新しいコメントが書き込まれていない場合は、無視してブラウザに表示したページに変化を与えない。Ajax エンジンが新しいコメントの書込を検知したときのみ、ページ全体をリフレッシュするなり、ページの必要な部分のみに更新を反映するなり、動作させればいいのである。ともかく、新しい書込がないのに定期的に虚しくページリロードを行う動作を抑制させられるだけでも、ユーザ感覚的には、随分とスマートな感じがすることは間違いない。車で言うと、「アイドリング・ストップ！」という感じだろうか？（笑）　非 Ajax では、Web チャットというものは、チャット専用のプロトコルによる IRC (Internet Relay Chat) のクライアントに比べて随分見劣りしたが、Ajax では、IRC に比べてそれほどユーザ感覚的に遜色のないチャットクライアントも実現できそうだ。

サンプル集

表示するアイコン画像とプルダウンオプションの連動

ゲームに応用が効く技。注意点としては、XHTML では、form および img 要素について、「個々の要素を識別するため」には name 属性ではなく id 属性を使わなければならない点（IE 6 と Firefox 2 では既に対応済）である。（※ただし、form でサーバに送信するデータ（name=value の形式）の属性を識別するための name 属性の使用については従来のままなので混同しないこと）

画像タイルのクリックとフォーム入力の連動

ゲームで地図上の座標をフォームで指定入力しなければならないような場合、地図上の画像タイルを直接クリックして指定できれば、ユーザインタフェース的な快適性に抜群に貢献する。

href="javascript: void(0)" という記述は、JavaScript の動作のためにクリック可能なリンクを用いつつも、実際にはどこかリンク先の別の URI へジャンプするわけでもないというような場合に、フェイク的手段としてよく用いられる手である。

もちろん、このテクニックは、画像タイルに対するリンクでなくとも、単なる文字リンクを用いる場合にも応用が利く技である。

（※ onclick 属性だけでも動作するが、W3C の「アクセス指針技術文書」に従い、onkeypress 属性も併記している）

	X=0	X=1
Y=0
Y=1

ラジオボタンの選択クリックによる Submit ボタンへのジャンプ

location.replace(URI) という JavaScript メソッドを使って、URI にページ内のアンカーポイントを指定することによって、フォームの Submit ボタンへ一気にジャンプする。一番上の「Go to Submit」ボタンがそれだが、この技は、例えばその次にある「東京」から「仙台」に至る多数に連なったラジオボタンから一つだけ選択して Submit ボタンを押すような、縦長のフォームページにおいて、ユーザがページをスクロールダウンする手間を省くというようなユーザインタフェースの快適性の実現に応用できる。