脱jQuery $.getJSON()

JSON を jQuery で受け取る時に使う $.getJSON() のネイティブ書き換えです。JSON データを受け取り操作するときのメソッドですね。

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

without-jquery

$.getJSON()

jQuery

$.getJSON("test.php", function(data) {
    alert(data.param);
})

書き換え JavaScript

var myJSON = new XMLHttpRequest();
myJSON.onreadystatechange = function() {
    if ((myJSON.readyState === 4) && (myJSON.status === 200)) {
        var data = JSON.parse(myJSON.responseText);
        alert(data.param);
    }
}
myJSON.open("GET","test.php", true);
myJSON.send(null);

受け取った JSON の param の値をアラートする例です。

基本は前回の .load() の時と変わりません。jQuery の方は受け取ったデータが data に入ります。この data は JSON エンコードされた形のデータですので、ネイティブの方でも JSON.parse を用いて受け取ったデータをエンコードします。

ネイティブも data にエンコードされた形の JSON が入りますので同様に処理することが出来ます。

基本の形のみの紹介になりますが、少し複雑な形は次回の $.ajax で紹介しています。

まとめ

jQueryJavaScript
$.getJSON("B", function(data) {
  //コールバック内容
})		var myJSON = new XMLHttpRequest();
myJSON.onreadystatechange = function() {
  if ((myJSON.readyState === 4) && (myJSON.status === 200)) {
    var data = JSON.parse(myJSON.responseText);
    //コールバック内容
  }
}
myJSON.open("GET", "B", true);
myJSON.send(null);