クジラ机ブログ

jQueryを使わずにAjaxでgetをする

JavaScriptのライブラリ「jQuery」を使えば、非同期でAjax通信するのが楽なのですが、jQueryを使わずに、非同期通新する方法をメモっておきます。

// Ajaxを手軽に行なう関数を定義したもの
function httpGet(url, onsuccess, onerror) {
  // XMLHttpRequestのオブジェクトを作成
  var xhr = new XMLHttpRequest();
  // 非同期通信でURLをセット
  xhr.open('GET', url, true);
  // 通信状態が変化したときのイベント
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) { //通信完了
      if (xhr.status == 200) { //HTTPステータス200
        onsuccess(xhr, xhr.responseText);
      } else {
        onerror(xhr, xhr.status);
      }
    }
  };
  xhr.send(''); // 通信を開始
  return xhr;
}

function $(id){ return document.getElementById(id); }