JavaScript でHTTP(S)リクエストを送信する

1. このページの目的

JavaScript でHTTP(S)リクエストを送信する。

利用するAPI

  1. XMLHttpRequest
    • axios を利用する(axios は XMLHttpRequests を利用するライブラリ)。
  2. Fetch API
    • そのまま使う。

2. デモ準備

HTTP(S)リクエストの送信先のコード(PHP)

データ取得先のURLでは、PHPでJSONを返している。

PHP コード

<?php
$arr = [
  'id'    => 10,
  'name'  => 'bar',
  'age'   => 33,
  'hobby' => 'guitar'
];
header('Content-Type: application/javascript; charset=utf-8');
echo json_encode($arr);

cross origin の場合

クロスオリジンの場合は、以下のHTTPレスポンスヘッダを出力してXHR通信を許可している(CORS)。

PHP コード

header("Access-Control-Allow-Origin: https://misc.laboradian.com");

3. デモ

(1) デモ: XMLHttpRequest (axios), same origin

結果

JavaScript コード

const out1Elm = document.querySelector('#out1');
document.querySelector('#btn1').addEventListener('click', () => {
  axios.get('/js-test/http-request/1/user.php')
    .then(response => {
       out1Elm.textContent = JSON.stringify(response.data);
    })
    .catch(error => {
      console.error(error);
    })
    .finally(() => {
      // skip
    });
});

(2) デモ: XMLHttpRequest (axios), async/await, same origin

結果

JavaScript コード

const out2Elm = document.querySelector('#out2');
document.querySelector('#btn2').addEventListener('click', async () => {
  try {
    const response = await axios.get('/js-test/http-request/1/user.php');
    out2Elm.textContent = JSON.stringify(response.data);
  } catch (error) {
    console.error(error);
  }
});

(3) デモ: XMLHttpRequest (axios), async/await, cross origin

結果

JavaScript コード

const out3Elm = document.querySelector('#out3');
document.querySelector('#btn3').addEventListener('click', () => {
  (async () => {
    try {
      const response = await axios.get('https://lara-misc.appspot.com/json/user/');
      out3Elm.textContent = JSON.stringify(response.data);
    } catch (error) {
      console.error(error);
    }
  })();
});

(4) デモ: Fetch API, same origin

結果

JavaScript コード

const out4Elm = document.querySelector('#out4');
document.querySelector('#btn4').addEventListener('click', () => {
  fetch('/js-test/http-request/1/user.php', {
      method: "GET",
      mode: "cors"
    })
    .then(response => {
      if (response.ok) {
        return response.json();
      }
      throw new Error('Network response was not ok.');
    })
    .then(resJson => {
      out4Elm.textContent = JSON.stringify(resJson);
    })
    .catch(error => {
      console.error(error);
    })
});

(5) デモ: Fetch API, cross origin

結果

JavaScript コード

const out6Elm = document.querySelector('#out5');
document.querySelector('#btn5').addEventListener('click', () => {
  fetch('https://lara-misc.appspot.com/json/user/', {
      method: "GET",
      mode: "cors"
    })
    .then(response => {
      if (response.ok) {
        return response.json();
      }
      throw new Error('Network response was not ok.');
    })
    .then(resJson => {
      out5Elm.textContent = JSON.stringify(resJson);
    })
    .catch(error => {
      console.error(error);
    })
});

(6) デモ: Fetch API, json().then(), same origin

結果

JavaScript コード

const out6Elm = document.querySelector('#out6');
document.querySelector('#btn6').addEventListener('click', () => {
  fetch('/js-test/http-request/1/user.php', {
      method: "GET",
      mode: 'cors'
    })
    .then((response) => {
      if (response.ok) {
        return response.json().then(resJson => {
          out6Elm.textContent = JSON.stringify(resJson);
        });
      }
      throw new Error('Network response was not ok.');
    })
    .catch(error => {
      console.error(error);
    })
});

(7) デモ: Fetch API, async/await, same origin

結果

JavaScript コード

const out7Elm = document.querySelector('#out7');
document.querySelector('#btn7').addEventListener('click', async () => {
  try {
    const response = await fetch('/js-test/http-request/1/user.php', {
      method: "GET",
      mode: 'cors'
    });

    if (response.ok) {
      const resJson = await response.json();
      out7Elm.textContent = JSON.stringify(resJson);
    } else {
      throw new Error('Network response was not ok.');
    }

  } catch (error) {
    console.error(error);
  }
});

4. メモ

5. 参考