Top

脱jQuery $.ajax()

Ajax 関係の jQuery の命令は全て $.ajax() を元に出来ています。$.get や $.post もこれをベースにした短縮命令です。これをネイティブに書き換えます。

$.ajax は jQuery のバージョンによって書き方が色々ありますが、おそらく一番使われているだろう書き方で対応していきます。

詳しくは 脱jQuery その1 をご覧ください。

without-jquery

$.ajax()(GET)

jQuery

$.ajax({
    url: "test.php",
    type: "GET",
    data: {id: "aaa", id2: "bbb"},
    success: function(data, status, xhr) {
        alert("OK"); //通信成功時
    },
    error: function(xhr, status, error) {
        alert("NO"); //通信失敗時
    },
    complete: function(xhr, status) {
        alert("complete"); //通信完了時
    }
});

書き換え JavaScript

var myXml = new XMLHttpRequest();
myXml.onreadystatechange = function() {
    if (myXml.readyState === 4) {
        if (myXml.status == 200) {
            alert("OK"); //通信成功時
        } else {
            alert("NO"); //通信失敗時
        }
    }
}
myXml.onload = function() {
    alert("complete"); //通信完了時
}
myXml.open("GET", "test.php?id=aaa&id2=bbb", true);
myXml.send(null);

GET の場合と POST の場合で data の値の扱いが変わるのでそこに注意します。GET の場合は open の URL の後ろにクエリとして追加します。

data の値が {id: "aaa",id2: "bbb"} であれば、「?id=aaa&id2=bbb」と言った形に変換します。? で始めて複数データが有る場合は & で続けます。

GET の場合は send の中身が null です。また、status は 200 だと「通信成功」、それ以外だと失敗となります。

通信完了時に呼ばれる complete は、通信が成功しても失敗しても終了時に呼ばれる関数となります。ネイティブな JavaScript では .onload という命令で呼び出します。

$.ajax()(POST)

jQuery

$.ajax({
    url: "test.php",
    type: "POST",
    data: {id: "aaa", id2: "bbb"},
    success: function(data, status, xhr) {
        alert("OK"); //通信成功時
    },
    error: function(xhr, status, error) {
        alert("NO"); //通信失敗時
    },
    complete: function(xhr, status) {
        alert("complete"); //通信完了時
    }
});

書き換え JavaScript

var myXml = new XMLHttpRequest();
myXml.onreadystatechange = function() {
    if (myXml.readyState === 4) {
        if (myXml.status == 200) {
            alert("OK"); //通信成功時
        } else {
            alert("NO"); //通信失敗時
        }
    }
}
myXml.onload = function(){
    alert("complete"); //通信完了時
}
myXml.open("POST", "test.php", true);
myXml.send("id=aaa&id2=bbb");

POST の場合、data の値の変換の仕方自体は GET と変わりませんが、クエリとしてではなく send の中に入れて送ります。クエリではないので最初の ? はいらず、複数データが有る場合は & でつなぎます。それ以外は GET の時と変わりません。

jQuery にも JavaScript にも、この他にも設定できる項目はあるのですが、基本はこのような形となります。