[JavaScript] jQueryを使わずにAjax通信をしてJSONを取得する方法

この記事は JavaScript Advent Calendar 2015 の23日目です。

#概要

  • JSONを吐き出すAPIのデータを取得する。
  • ただし、jQueryは使用できないものとする。

#想定

レガシーブラウザは念頭にない。(レガシー考慮するなら jQuery 使おう!)

#jQueryを使用した場合

ちなみにjQueryを使用できるのであれば以下のようなコードで良い。

$.getJSON("http://localhost/api/hoge", data, function(json){
    console.log(json);
});

簡潔に記述することができる。

#Vanillaで実装する

jQuery と仕様を合わせるつもりはないが、以下の様な実装で実現可能。

function getJSONData(url, callback) {
  if (!url) {
    return;
  }
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.timeout = 30000;
  xhr.ontimeout = function () {
    console.log('time out');
  }
  xhr.onerror = function () {
    console.log('error');
  }
  xhr.onreadystatechange = function () {
    if (this.readyState !== 4) {
      return;
    }
    if (this.status === 200) {
      if (typeof callback === 'function') {
        try {
          var result = JSON.parse(this.responseText);
          callback(result);
        } catch (e) {
          console.log(e);
        }
        return;
      }
    }
  };
  xhr.send();
}

課題:

  • JSON.parseのラッパーを用意したほうが良いかも
  • ステータスコードを返そう

#使い方

getJSONData("http://localhost/api/hoge", function(json) {
    console.log(json);
});

#おまけ

こういうのもある。

jquery.ajax

twitterfacebookhatenafacebook