[JavaScript] XMLHttpRequest で ajax GET

Tadashi Shigeoka ·  Sat, January 25, 2014

JavaScript にて、XMLHttpRequest で ajax GET する方法をメモ。

jQuery.ajax() が使えればカンタンに実装できるのですが、JavaScript縛りのときは下記のように書く必要があります。

var makeXMLHttpRequest = function(url) {
  var httpRequest;

  if (window.XMLHttpRequest) {
    // Mozilla, Safari, Chrome, ...
    httpRequest = new XMLHttpRequest();
    if (httpRequest.overrideMimeType) {
      httpRequest.overrideMimeType('text/xml');
    }
  } else if (window.ActiveXObject) {
    // IE
    try {
      httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
      }
    }
  }

  if (!httpRequest) {
    // console.log('Cannot create XMLHTTP instance');
    return false;
  }

  httpRequest.onreadystatechange = function() {
    processResponse(httpRequest);
  };
  httpRequest.open('GET', url, true);
  httpRequest.send('');
};

var processResponse = function(httpRequest) {
  if (httpRequest.readyState == 4) {
    if (httpRequest.status == 200) {
      doSomething(httpRequest);
    } else {
      // error
    }
  }
};

以上です。


参考情報

Getting Started - AJAX | MDN

XMLHttpRequest の使い方 - WebOS Goodies