背景

業務でXMLHttpRequestを使用したが、コードの内容を理解できておらず非常に苦戦したので、改めて深堀。

参考記事

『JavaScript本格入門』 サーバー連携でリッチなUIを実装する
P389〜

メモ

XMLHttpRequestのメンバー
プロパティ
readyState HTTP通信の状態を取得
status HTTPステータスコードを取得
onreadystatechange 通信状態が変化した時、呼び出されるイベントハンドラー

メソッド
open() HTTPリクエストを初期化
send() HTTPリクエストを送信

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('btn').addEventListener('click', function() {
    var result = document.getElementById('result');
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          result.textContent = xhr.responseText;
          console.log()
        } else {
          result.textContent = 'サーバーエラーが発生しました。';
        }
      } else {
        result.textContent = '通信中...';
      }
    };
    xhr.open('GET', 'hello_ajax.php?name=' +
      encodeURIComponent(document.getElementById('name').value), true);
    xhr.send(null);
  }, false);
}, false);

一言

responseText response についてさらに深堀する
xhr.send(null) 引数（null）の意味は?