月別アーカイブ: 2013年1月

XHR2のためにXMLHttpRequestをいじってみる

最近すっかりXHR2ばかりいじってる日々です。
ところがどっこい、JavaScriptの主だったライブラリ(prototype.jsとかjQueryとかjQueryとかjQueryとか)のXHR2実装がなんとも帯に短したすきに長し状態で、思わず自前でXMLHttpRequestをいじるという、我々が何年前に通過したんだろうという所まで舞い戻ってみました。
まあ、コードはあっさりと書け、サーバ側で Access-Control-Allow-Origin:* を返してあげると、さくっとXHR2成功。クロスドメイン通信だよ。やったね。
XHR2だからって特殊なコードはXMLHttpRequestにはほとんど要らないね。
書いたのはこんなコード。クライアント側ね。

function get_xhr_handler() {
    if(window.XMLHttpRequest) {
        return new XMLHttpRequest();
     } else if(window.ActiveXObject) {
        try {
            return new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return null;
}

function xhr_get(url, params, callback) {
    var xhr = get_xhr_handler();
    if (xhr == null) {
        console.log("not support XHR.");
        return false;
    }

    var query_array = new Array();
    for (var key in params) {
        query_array.push(key + "=" + encodeURIComponent(params[key]));
    }
    var query = query_array.join("&");

    xhr.open("GET", url + "?" + query, true);
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200){
            callback(xhr);
        }
    };

    xhr.send();
    return true;
}

var send_param = {"str": "ここであったが三年目",
                  "int": 999};
xhr_get("http://api.sample.co.jp/", send_param,
        function(res) {
            // 通信成功...
        });

文字コードはきっとencodeURIComponent()あたりがいい感じにしてくれているはず。
エラー処理が全然入ってないけど、それは宿題だ。
なお、サーバ側のコードは汚いので見せたげないw