Ajax-XMLHttpRequest

XMLHttpRequestオブジェクト

XMLHttpRequestオブジェクトとは

AjaxはXMLHttpRequestオブジェクトを介して、クライアントとサーバが非同期通信を行います。

非同期通信でサーバ上のファイル内容を取得したり、CGIプログラムの処理結果をXMLなどで受け取ることができます。

XMLHttpRequestメソッド

XMLHttpRequestオブジェクトを生成した後は、メソッドを利用してコントロールを行います。

指定	説明
abort()	現在のリクエストを停止する。
getAllResponseHeaders()	すべてのヘッダーを返す（ラベルと値）
getResponseHeader("headerLabel")	指定したヘッダーのラベルの値を返す
open("method", "URL"[, asyncFlag[, "userName"[, "password"]]])	メソッドやURLなどを割り当てる。asyncFlag が true で非同期通信、falseで同期通信となる。
send(content)	リクエストを送信。文字列や DOMオブジェクトを指定可能。
setRequestHeader("label", "value")	ヘッダー(ラベルと値)を送信する。

プロパティ

リクエストを送信後は、プロパティを監視することでサーバー側で実行されたプログラムのレスポンスを確認できます。

指定	説明
onreadystatechange	状態が変更された際のイベントハンドラを指定する。
readyState	サーバからオブジェクトの状態が返る。
responseText	サーバから文字列形式のデータが返る。
responseXML	サーバからDOM形式のデータが返る。
status	サーバからの数値によるリターンコード。
statusText	サーバからの文字列によるリターンメッセージ。

「readyStateプロパティ」はサーバからレスポンスが帰ってきているのかどうかの状態が格納されています。

指定	説明
0	初期化がおこなわれていない
1	sendメソッドでデータが送られていない
2	sendメソッドは実行されているが応答がまだ無い
3	応答を受信している途中
4	全てのデータを受信済み

XMLHttpRequestの利用

XMLHttpRequestオブジェクトの生成

「XMLHttpRequestオブジェクト」はWebブラウザ毎に実装方法が異なります。

IE以外のブラウザの場合には次のように記述します。


var xmlHttp = new XMLHttpRequest();

IE(version6.0以前)の場合には次のように記述します。


var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

クロスブラウザで生成する場合には条件分岐させます。


// XMLHttpRequestオブジェクト生成
function createHttpRequest() {
    // for ie7, Mozilla, FireFox, Opera8
    if (window.XMLHttpRequest) {
        try {
            return new XMLHttpRequest();
        } catch (e) {
            return false;
        }
    }
    // for ie5, ie6
    else if (window.ActiveXObject) {
        try {
            return new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                return new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e2) {
                return false;
            }
        }
    }
    else {
        return false;
    }
}