[JavaScript] 標準機能のXMLHttpRequestでAjax／HTTP通信（jQuery不使用）

jQueryを使わずに、JavaScriptで標準化された XMLHttpRequest を使ってAjax通信する方法まとめ。（外部サーバーにはアクセスできないのでご注意ください。＝JavaScriptのクロスドメイン制限）

jQueryを使ったAjax通信についてはQiita内にも記事が多数ありますので、検索してみて下さい。（⇒ 検索結果）

同期アクセス

JavaScript

// 同期アクセス
res = ajax("xxx.html");
alert(res);

// Ajax（同期タイプ）
function ajax(url) {
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open("GET", url, false); // true:非同期、false:同期
    xmlHttp.send(null);
    return xmlHttp.responseText;
}

非同期アクセス

JavaScript

// 非同期アクセス
ajax("xxx.html",
    function(res) {
        alert(res);
    }
);

// Ajax（非同期タイプ）
function ajax(url, callback) {
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            callback(xmlHttp.responseText);
        }
    };
    xmlHttp.open("GET", url, true); // true:非同期、false:同期
    xmlHttp.send(null);
}

※ XMLHttpRequest 2 をサポートするブラウザーでは onreadystatechange の代わりに onload を使うこともできます。

▼デモはこちら
XMLHttpRequest Test｜JSFiddle

(･o･ゞ いじょー。