Ajaxではサーバーとの通信をしながらさまざまな処理を行うことができます。問題は、どうやってサーバーと通信するか、データのやりとりを行うかです。Ajaxと言っても処理を行わせるプログラムはJavaScriptですので、JavaScriptで可能な範囲でしかできないことになります。ソケット通信を行うオブジェクトなどは用意されていません（ちなみにAdobe AfterEffectsにはソケット通信を行うオブジェクトが用意されておりメール送受信や簡易サーバーを作ることが可能です）。
JavaScriptではソケット通信はできませんが、HTTPサーバーとやりとりするためのオブジェクトが用意されています。そのオブジェクトが、Internet Explorerとそれ以外のブラウザで異なっています。Internet ExplorerではActive Xを使って行い、他のブラウザではXMLHttpRequestオブジェクトを使って通信を行います。また、Internet Explorerで用意されているXMLHTTPオブジェクトには2種類あります。
それでは実際に体験してみましょう。ここでは多くの環境で体験してもらうためにFirefoxを使います。FirefoxはWindows、Macintosh、UNIX上で動作します。これがInternet ExplorerだとWindowsのみ（Mac版Internet Explorer 5はActive Xをサポートしていないため動きません）、SafariではMacOS Xのみになってしまいます。Firefox以外ではOperaという選択肢もあります。Opera でも動作しますが、少なくとも8.01以降のバージョンを利用してください。
以下の
プログラムを実行するとボタンとテキストエリアが表示されます。ボタンをクリックするとサーバーからdata.txtファイルを読み込みテキストエリアにファイルの内容を表示します。非常にシンプルなAjaxのプログラムです。(このプログラムはFirefox, Safari, Opera で動作します)
<html>
<head>
<title>XMLHttpRequest()の基本</title>
<script type="text/javascript"><!--
function loadTextFile()
{
httpObj = new XMLHttpRequest();
httpObj.onload = displayData;
httpObj.open("GET","data.txt",true);
httpObj.send(null);
}
function displayData()
{
document.ajaxForm.result.value = httpObj.responseText;
}
// --></script>
</head>
<body>
<h1>XMLHttpRequest()の基本 (IE以外)</h1>
<form name="ajaxForm">
<input type="button" value="読み込み" onClick="loadTextFile()"><br>
<textarea name="result" cols="40" rows="5"></textarea>
</form>
</body>
</html>
基本的なAjaxの通信の流れは以下のようになります。
- 通信用オブジェクトを作成する
- 取得したいデータ、送信したいデータをサーバーに送る
- サーバーからの応答に応じて処理を行う
これだと従来のCGIによるデータ送信と変わらないように見えます。従来と異なるのがAjaxの名前の由来でもある非同期通信という点です。フォームを使ってサーバーにデータを送信するCGIの場合には、(3)でサーバーからデータが送信されてくるまで、プログラムは何もできません。サーバーからの応答があるまでユーザーは、ずっと待つ事になります。これに対してAjaxでは非同期なので、サーバーからの応答を待たずに、他の処理を行うことができます。このため、サーバーからの応答に応じてどのようにするかをプログラムしておく必要があります。サーバーからの応答コード (HTTPサーバーのレスポンスコード) を受け取る事ができるため、状況に合わせて処理を変える事ができます。
Ajaxを使った通信の流れは、こんな感じです。基本的にデータを受信／送信するサーバー側は、従来のCGIプログラムなどが、そのまま利用できます。サーバー側は従来のプログラムが利用／流用できても、クライアント側はいくつもの障害を乗り越えなければなりません。これは次の項にて説明します。
[
2:ブラウザとOSの違いへ]
[
目次へ]
(2005.12.16)