今日は、 JavaScript の XMLHttpRequest オブジェクトの使い方を調べてみたので、それをご紹介しようと思います。 XMLHttpRequest はサーバーに対して HTTP リクエストを発行するためのオブジェクトで、 Ajax の A (Asynchronous) を司る中核技術です。これにより、Web ページを切り替えることなくサーバーからデータを取得し、ページ内容を更新することができます。

さあ、一緒に Ajax の世界へと足を踏み入れましょう！（＾＾）

使用方法

それでは、XMLHttpRequest オブジェクトの使用方法を順を追ってご紹介します。

XMLHttpRequest オブジェクトの作成

XMLHttpRequest オブジェクトを作成する方法は、 Firefox, Opera と IE で異なります。 Firefox, Opera の場合は単に XMLHttpRequest クラスのオブジェクトを作成するだけですが、 IE6 は ActiveXObject として作成しなければなりません。実際のコードは以下のようになります。

httpRequest = false;
if(window.XMLHttpRequest) {
    // Firefox, Opera など
    httpRequest = new XMLHttpRequest();
    httpRequest.overrideMimeType('text/xml');
} else if(window.ActiveXObject) {
    // IE
    try {
        httpRequest = new ActiveXObject('Msxml2.XMLHTTP');
    } catch (e) {
        httpRequest = new ActiveXObject('Microsoft.XMLHTTP');
    }
}

httpRequest 変数をグローバル変数としていることに注意してください。これは、後述のコールバック関数で httpRequest にアクセスする必要があるからです。Firefox などのコードパスで指定されている overrideMimeType は、古い Mozilla ブラウザの制限への対処です。また、IE のコードパスでは、DLL のバージョンによって作成するオブジェクトを分けています。どちらもおまじないと考えておけば良いでしょう。

GET リクエストの発行

GET メソッドによるリクエストの発行は非常に簡単です。

httpRequest.open('GET', 'http://webos-goodies.jp', true);
httpRequest.onreadystatechange = processResult;
httpRequest.send(null);

open はリクエスト方法を指定するメソッドです。引数は順番に、 HTTP のリクエストメソッドの指定、発行する URL、非同期リクエストを行うかどうかの bool 値（true なら非同期）です。リクエストメソッドは大文字小文字を区別しますので注意してください。 onreadystatechange はレスポンスを処理するコールバック関数を指定するプロパティーです。 send メソッドを呼び出すと実際にリクエストを発行します。引数としてリクエストボディーの文字列を指定しますが、ここでは必要ないので null を渡しています。

POST リクエストの発行

POST メソッドによるリクエストの発行はリクエストヘッダとリクエストボディーをきちんと指定しないといけないため、少々面倒です。コードはだいたい以下のようになります。

httpRequest.open('POST', 'http://webos-goodies.jp/', true);
httpRequest.onreadystatechange = processResult;
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpRequest.send('param1=value1&param2=value2');

open, onreadystatechange は前述のとおりです。 setRequestHeader はリクエストヘッダをカスタマイズする場合に使用します。ここでは Content-Type ヘッダでリクエストボディ（POST するデータ）の MIME タイプを指定しています。リクエストボディそのものは send メソッドに引数として指定します。

ここではフォーム形式のデータを渡していますが、Content-Type を適切に設定すればそれ以外の形式のデータも渡すことができます。

レスポンスの処理

サーバーからのレスポンスの処理は、 onreadystatechange に指定したコールバック関数で行います。このコールバック関数は、通常以下のような実装になります。

function processResponse() {
    if(httpRequest.readyState == 4) {
        if(httpRequest.status == 200 || httpRequest.status == 201) {
            // リクエストの処理
        } else {
            // エラー処理
        }
    }
}

最初の if 文は読み込みが完了したかどうかを判定しています。 readyState は現在の XMLHttpRequest オブジェクトの状態を示すプロパティーで、以下の値をとります。

2 番目の if 文は、レスポンスのステータスを判定しています。通常、 200 もしくは 201 が成功を示すステータスコードなので、それ以外はエラーとして扱っています。

実際のレスポンスデータは、 XMLHttpRequest オブジェクトのプロパティーとして取得できます。主に参照されるプロパティーは以下のとおりです。

また、以下のメソッドでレスポンスヘッダを取得できます。

リクエストの中止

発行済みのリクエストを中止するには、 abort メソッドを使用します。以下のように単純に呼び出せば OK です。

httpRequest.abort();

また、 XMLHttpRequest オブジェクトを再利用する際も、 abort メソッドを呼び出す必要があるようです。

制限

XMLHttpRequest は便利な機能ですが、セキュリティーの関係からそのページと同じドメインからしかドキュメントを取得できません（Same Origin Policy と言います）。別ドメインの URL を指定しても、リクエストは送信されず、エラーが発生します。ローカルにある HTML ファイルからはいかなるドメインにもリクエストを投げられないので注意してください。

なお、 Opera Widgets ならこの制限がかからないので、 XMLHttpRequest を使ったページの作成環境としてけっこう便利に使えます。オススメです。

サンプル

解説だけではあれなので、簡単なサンプルを作ってみました。コンボボックスからページを選択すると、そのページのソースを表示します。

ソースは以下のようになっています。

<script type="text/javascript">
httpRequest = false;
if(window.XMLHttpRequest) {
    // Firefox, Opera など
    httpRequest = new XMLHttpRequest();
    httpRequest.overrideMimeType('text/xml');
} else if(window.ActiveXObject) {
    // IE
    try {
        httpRequest = new ActiveXObject('Msxml2.XMLHTTP');
    } catch (e) {
        httpRequest = new ActiveXObject('Microsoft.XMLHTTP');
    }
}

function request(page) {
    if(page == "") return;
    httpRequest.abort();
    httpRequest.open('GET', 'http://webos-goodies.jp/archives/' + page + '.html', true);
    httpRequest.onreadystatechange = function() {
        if(httpRequest.readyState == 4) {
            if(httpRequest.status == 200) {
                document.getElementById('page_text').value = httpRequest.responseText;
            }
        }
    }
    httpRequest.send(null);
}
</script>

<select onchange="request(this.value);">
<option value=""></option>
<option value="50067950">仮想マシンの作成</option>
<option value="50076580">インストール CD の起動</option>
<option value="50077769">HDD のフォーマット</option>
<option value="50078623">システムファイルのインストール</option>
<option value="50079003">Portage の環境設定</option>
<option value="50080053">カーネルコンパイル</option>
<option value="50089919">環境設定</option>
<option value="50098197">デーモン、ブートローダーのインストール</option>
<option value="50109765">ユーザーの追加</option>
<option value="50123244">VMwareTools のインストール</option>
</select>

<textarea id="page_text" style="width: 100%; height: 200px;"></textarea>

XMLHttpRequest、使ってみるとけっこう簡単ですね。前から試したいと思いつつ漠然と面倒くさそうなイメージがあって敬遠していたのですが、こんなことなら早く調べておけばよかった（＾＾ヾ。使いようによっては、普通の Web ページでも面白いことが出来るかもしれませんね。

ただ、ドメインをまたげないという制限があるので、livedoor blog ではちょっと使いづらいかな・・・。なにか面白い活用方法はないものでしょうかね。