生のJavaScript で Ajax

Ajax を 生のJavaScriptで実装する方法をメモします。

まずは、XMLHttpRequest オブジェクトの生成です。

var req;
try {
        // IE7.0 以降とそれ以外のブラウザ
	req = new XMLHttpRequest();
} catch (e) {
	try {
                // IE6.0
		req = new ActiveXObject('Msxml12.XMLHTTP');
	} catch (e) {
                // IE5.5
		req = new ActiveXObject('Microsoft.XMLHTTP');
	}
}

こんな感じでブラウザによってインスタンスの生成を分けます。

次にXMLHttpRequest オブジェクトによる通信の状態が変化したタイミングで
呼び出されるコールバック関数を定義します。

XMLHttpRequest オブジェクト の onreadystatechange プロパティに定義します。

req.onreadystatechange = function() {
	if (req.readyState == 4) {
		if (req.status == 200) {
			// 通信が正常に完了したときの処理を書く

                        // レスポンスをテキストとして取得
                        var resText = req.responseText;

                        // レスポンスをXMLとして取得
                        var resXML = req.responseXML;
		} else {
			// 通信が正常に完了しなかった場合の処理を書く
		}
	} else {
                // 通信中の処理を書く
	}
};

readyState プロパティでは通信の状態を確認できます。
4 は処理の完了です。

status プロパティは応答ステータスが確認できます。
200は処理成功です。

次にGET でサーバにリクエストします。

req.open('GET', '[URL]', true);
req.send(null);

[URL]に、リクエストするURLを入れますが、クエリストリングなどでマルチバイト文字
など使う場合は
encodeURIComponent()
でエンコードしましょう。

POSTの場合はこういう感じになります。

req.open('POST', '[URL]', true);
req.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
req.send('[body]');

コンテントタイプを指定してやる必要があるようなので指定して、
sendの引数に要求本文を渡します。
ここでも必要ならばエンコード処理をしましょう。

以上です。