復習AJAX

javascript AJAX

AJAXとは

javascriptによってブラウザとサーバー間で非同期に通信し、処理する技術。
現在ではprototype.jsやjQueryといった便利ライブラリのおかげで簡単に記述できるが、 下の方では少々面倒くさいことをしており、今回はその復習をします。

データタイプ

AJAXの名前にも含まれているように、以前はXMLと深く関係していたが、現在ではそれ以外のデータにも対応しています。
個人的にはJSONがすごい楽。JSONP素敵。

XMLHttpRequest

AJAXの通信にはjavascriptの組み込みオブジェクトであるXMLHttpRequestが使われています。
しかし記述が少々面倒くさい上、クロスブラウザも考慮しないといけません。
以下に使いそうなプロパティとメソッドを挙げます。

プロパティ

readyState....リクエストの状態（読込完了は4）
status....HTTPステータスコード（404とか200）
onreadystatechange....リクエストの状態が変わったときのcallback
responseText....レスポンスデータ
responseXML....レスポンスデータ

メソッド

abort()....リクエストをキャンセル
open()....リクエストの準備
send()....リクエストを送信

実装

XMLHttpRequestオブジェクトの生成。
var req = null;
if (window.XMLHttpRequest) {
    try {
        req = new XMLHttpRequest();
    } catch(e) {}
// IEに対応
} else if (window.ActiveXObject) {
    try {
        req = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
        try {
            req = new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e) {}
    }
}
通信準備
// 状態がかわったとき呼び出す
req.onreadystatechange = function() {
    // 通信完了したら
    if (this.readyState == 4 && this.status == 200) {
        alert(this.responseText);
    }
};
// typeはget,post、trueは非同期
req.open(type, url, true);
// postの場合
// req.setRequestHeader("Content-Type",
//     "application/x-www-form-urlencoded; charset=UTF-8");
通信開始
req.send(null);
// postの場合
// req.send(data);

サンプル

動かしてみる

jQueryで実装

$.get("hello2.txt", function(data) { alert(data); });

まとめ

これでライブラリを使わずAJAXできるようになったので、ちょっとしたことなら直接記述しても良いですね！