はじめてのAjaxプログラミング

しかし、実際には、代替になるものがあれば、
JavaScriptやXML、HTMLなどの特定の言語にしばられる必要は無いようです。
Windows であれば、VBなどでも使用出来ます。

しかし、Webで代替出来る言語が無いので、JavaScript、HTML、XMLで解説します。

memo

Ajaxで実現したい事は、
（１）アプリケーションの明示的なインストールが必要ない。
（２）サーバーとの通信を非同期に実行することにより、通信遅延によりＵＩをブロックしない。
（３）サーバーとのやり取りは、ＲＰＣではなく、メッセージで行う。
（４）データ・バインディングはサーバー側ではなく、クライアント側で行う。
（５）ＵＩにインテリジェンスがあり、ある程度はサーバーに戻らずにユーザーとやり取りをする。
っていうこと。
実際には言語は関係ないので、

「非同期JavaScript + XML（Asynchronous JavaScript + XML）」

というよりも、

「非同期メッセージ型ウェブ・アプリケーション（Asynchronous Message-driven Web Application）」

と呼んだほうが明確だとの考えもあるみたい。

それでは前回のサンプルを元に（不要箇所は省いた）、Ajaxの実装について説明してみます。
ソースは、OS:Windows XP, Browser:IE6/FireFox 1.0.4/Netscap 7.1で動作確認済みです。

sample1.htm ソース

<HTML>
<HEAD>
<TITLE>Ajax Sample1</TITLE>
<script language="javascript">

</script>
</HEAD>
<BODY>
<a href="javascript:void(0);" onclick="AjaxSample1();">XMLHTTP読み込み</a>
<div id="disp"></div>
</BODY>
</HTML>

では、"XMLHTTP読み込み" をクリックしたところから説明。

まず、"XMLHTTP読み込み" をクリックすると、

<a href="javascript:void(0);" onclick="AjaxSample1();">XMLHTTP読み込み</a>

の "onclick" イベントっていうのが発生して、
"JavaScript" 内の "AjaxSample1()" が実行されます。

次は、"JavaScript" 内の "AjaxSample1()" を細かく見ていきましょう。

上記で、 "XMLHttpRequest" を使えるようにしています。
いわゆる決まり文句ですので、固定で入れておけばいいんじゃないかな。
"Microsoft.XMLHTTP" はIE用、
"XMLHttpRequest()" はMozilla系ブラウザ用となっていて、
どちらのブラウザでも動作する為にこのような記述となっています。
ここでは、"xmlhttp" っていう変数から "XMLHttpRequest" を操作出来るようにしています。
（"xmlhttp" は任意で変更しても良いけど、その場合は全ての "xmlhttp" を変更するように！）

memo

IEのバージョンによっては、"Microsoft.XMLHTTP" 以外にも
"Msxml2.XMLHTTP" や "Msxml2.XMLHTTP.3.0" なども可能だけど、
どのバージョンでも使用出来る（といわれている）"Microsoft.XMLHTTP" がオススメ。

で、"XMLHttpRequest" が使えるようになったら、以下の部分が実行されます。

  if (xmlhttp) {
    xmlhttp.open('GET', 'ファイル名');
    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var disp = document.getElementById('disp');
        disp.innerHTML=xmlhttp.responseText;
      }
    }
    xmlhttp.send(null);
  }

まず、

if (xmlhttp) {

で、xmlhttp（つまり"XMLHttpRequest"）が使える状態になっているかどうかを確認！
未対応ブラウザだとここより以下の処理は実行されません。

次は、

xmlhttp.open('GET', 'ファイル名');

ここのファイル名の部分に読み込みたいHTMLやCGI、
テキストファイル、XMLファイルの名前を記入します。

memo

ここで、"GET" というのは、データの送受信の方式のことで、
"GET" 以外に "POST", "PUT", "PROPFIND" があります。
データを取得する場合は "GET" にしておきましょう。
データ送信の時には "POST" にして使用することもあります。

その次の行の

xmlhttp.onreadystatechange = function() {

では、ファイルの読み込みが開始されたら、
"function() {" 以降が実行されるようになっています。
なので、ここも特に手を加えずにこのままでいいと思います。

そして、

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

の部分で、読み込み状況をチェックしています。
"readyState" の値は、
0 = uninitialized（読み込みが開始されていない）
1 = loading（読み込み中）
2 = loaded（とりあえず読み込んだ）
3 = interactive（読み込んだデータを解析中）
4 = complete（読み込んだデータの解析完了、または失敗した）
"status" の値は、
200 ：ファイルを見つけた
404(または 0) ：ファイルが見つかりません（"Not Found"）
っていう意味。
インターネットしててたまにリンク切れしてて"404 File Not Found" とか表示されるよね？
あれのこと。

読み込みが成功したら、

var disp = document.getElementById('disp');

が、実行されます。
これでHTML中に用意してある

を操作出来るようにしています。

そして、そこに

disp.innerHTML=xmlhttp.responseText;

で、読み込んだ文字列を追加しているというわけ。
これで完了。

xmlhttp.send(null);

は、今回は受信だけなので、空送信しておく。

読み込むファイルをHTML形式にしておくと、いいかんじになりますよ。