XMLHttpRequest - Javascript

Ajax とは

Ajax（Asynchronous Javascript + XML）とは、Webサーバーと非同期通信を行い、DOMを利用してWebページを書き換える手法です。

XMLHttpRequestというオブジェクトを利用します。

XMLHttpRequestのイベント

通信中に起こすイベントは次の8個があります。

  • onreadystatechange
  • onloadstart
  • onprogress
  • onloadend
  • onload
  • onerror
  • onabort
  • ontimeout

readystatechangeイベントは、 XMLHttpRequest の readyState プロパティが変化するたびに発生します。

xhr.addEventListener("readystatechange", (event) => {});

xhr.onreadystatechange = (event) => {};

onloadイベントは、受信が成功した時に呼び出されます。次のコードは同じです。

xhr.onload = function() {}

xhr.onreadystatechange = function() {
  if(xhr.readyState === 4 && xhr.status !== 0) {
  }
}

readyState

値 定数 状態
0 UNSENT XHRオブジェクトの作成直後
1 OPENED open() が呼び出し済み。
2 HEADERS_RECEIVED send() が呼び出し済みで、ヘッダーとステータスが利用可能
3 LOADING ダウンロード中。responseText には部分データが入っている。
4 DONE XHR通信の完了後

XMLHttpRequestのメソッド

send() メソッドは、リクエストをサーバーに送信します。

GET通信の場合の書き方

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>sample</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="area"></div>
</body>
</html>

data.json

[
  { "ja" : "日曜日", "en" : "sunday"},
  { "ja" : "月曜日", "en" : "monday"},
  { "ja" : "火曜日", "en" : "tuesday"},
  { "ja" : "水曜日", "en" : "wednesday"},
  { "ja" : "木曜日", "en" : "thursday"},
  { "ja" : "金曜日", "en" : "friday"},
  { "ja" : "土曜日", "en" : "saturday"}
]

script

window.onload = function(){
  let xhr = new XMLHttpRequest();
  xhr.open('GET', './data.json');

  xhr.onload = () => {
    const jsonObj = JSON.parse(xhr.responseText);
    for (let item of jsonObj) {
      document.getElementById("area").innerHTML += `<p>${item.ja}<\p>`;
    }
  }

  xhr.send();
}

POST通信の場合の書き方

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>sample</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="area"></div>
</body>
</html>

data.json

[
  { "ja" : "日曜日", "en" : "sunday"},
  { "ja" : "月曜日", "en" : "monday"},
  { "ja" : "火曜日", "en" : "tuesday"},
  { "ja" : "水曜日", "en" : "wednesday"},
  { "ja" : "木曜日", "en" : "thursday"},
  { "ja" : "金曜日", "en" : "friday"},
  { "ja" : "土曜日", "en" : "saturday"}
]

script.js

window.onload = function(){
  let xhr = new XMLHttpRequest();
  xhr.open('GET', './data.json');
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");

  // イベントの設定
  xhr.onreadystatechange = () => {
    // 状態が変化すると関数が呼び出されます。
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      // リクエストの終了。ここの処理を実行します。
      const jsonObj = JSON.parse(xhr.responseText);
      for (let item of jsonObj) {
        document.getElementById("area").innerHTML += `<p>${item.ja}<\p>`;
      }
    }
  };

  xhr.send();
}

XMLHttpRequest Level 2

XMLHttpRequest Level 2 が実装されているブラウザであれば、onreadystatechange でなく onload を使って次のように書けます。

2014年11月18日に Level 2 が廃止され、Level 1 に統合されています。

window.onload = function(){
  let xhr = new XMLHttpRequest();
  xhr.open('GET', './data.json');
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

  xhr.onload = function(){
    const jsonObj = JSON.parse(xhr.responseText);
    for (let item of jsonObj) {
      document.getElementById("area").innerHTML += `<p>${item.ja}<\p>`;
    }
  }

  xhr.send();
}

サンプル

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>sample</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Main Page</h1>
    <button id="btn" type="button">button</button>
    <div id="area"></div>
</body>
</html>

ajax.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>ajax.html</title>
</head>
<body>
  <div id="ajax-view">
    <h1>Ajax Page</h1>
  </div>
</body>
</html>

script.js

window.onload = function(){
  const btn = document.getElementById("btn");
  btn.addEventListener('click', function(){
    // XMLHttpRequest オブジェクトのインスタンスを作成
    let xhr = new XMLHttpRequest();

    xhr.open("GET","./ajax.html", true);
    xhr.responseType = 'document';

    xhr.onreadystatechange = function() {
      if (xhr.readyState == XMLHttpRequest.DONE) {
        let status = xhr.status;
        if (status === 0 || (status >= 200 && status < 400)) {
          var target = xhr.response.getElementById("ajax-view").innerHTML;
          document.getElementById("area").innerHTML = target
        } else {
          alert("HTTP-ERROR: " + status);
        }
      }
    }
    xhr.send();
  });
}

JSONファイルを取得して表示する

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>sample</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Main Page</h1>
    <button id="btn" type="button">button</button>
    <div id="area"></div>
</body>
</html>

data.json

[
  { "ja" : "日曜日", "en" : "sunday"},
  { "ja" : "月曜日", "en" : "monday"},
  { "ja" : "火曜日", "en" : "tuesday"},
  { "ja" : "水曜日", "en" : "wednesday"},
  { "ja" : "木曜日", "en" : "thursday"},
  { "ja" : "金曜日", "en" : "friday"},
  { "ja" : "土曜日", "en" : "saturday"}
]

script.js

window.onload = function(){
  const btn = document.getElementById("btn");
  btn.addEventListener('click', function(){
    // XMLHttpRequest オブジェクトのインスタンスを作成
    let xhr = new XMLHttpRequest();

    xhr.open("GET","./data.json");

    xhr.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        const jsonObj = JSON.parse(xhr.responseText);
        for (let item of jsonObj) {
          document.getElementById("area").innerHTML += item.ja
        }
      }
    }
    xhr.send();
  });
}