JavaScriptの3種類のAjax実装サンプル(JavaScript、jQuery、axios)

# はじめに
「とりあえず動く簡単なAjaxの実装サンプルがあればいいなぁ〜」と思い、この記事を書きました。
各サンプルをコピーして、カスタマイズし、テストや学習に役立てていただけると幸いです。

サンプルのurl、「[https://httpbin.org](https://httpbin.org)」については[こちら](https://qiita.com/sameyasu/items/adacceb8a1bee893599b)の記事をご参考にしてください。

# ただのJavaScriptのAjax実装サンプル
```main_js.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>ajaxテスト(js)</title>
</head>
<body>
  <p>ajaxテスト(js)</p>
  <input id="button-get" type="button" value="テスト(GET通信)">
  <input id="button-post" type="button" value="テスト(POST通信)">
  
  <script>
      // テスト(GET通信)ボタンクリック時のイベント
      document.getElementById("button-get").onclick = function () {
          // XMLHttpRequestオブジェクトのインスタンスを生成
          let xhr = new XMLHttpRequest();
  
          // 通信を監視するイベントハンドラを設定
          xhr.onreadystatechange = function () {
              // 通信完了時
              if (xhr.readyState === 4) {
                  if (xhr.status === 200) {
                      // 正常レスポンス
                      console.log(xhr.response);
                  } else {
                      console.log("通信エラー");
                  }
              }
          }
  
          // レスポンスの形式を指定
          xhr.responseType = "json"
          // リクエストメソッドとリクエスト先を設定(クエリパラメータで渡したい値を指定)
          xhr.open("GET", "https://httpbin.org/get?param1=p1&param2=p2");
          // リクエスト送信
          xhr.send();
      };
  
      // テスト(POST通信)ボタンクリック時のイベント
      document.getElementById("button-post").onclick = function () {
          // XMLHttpRequestオブジェクトのインスタンスを生成
          let xhr = new XMLHttpRequest();
  
          // 通信を監視するイベントハンドラを設定
          xhr.onreadystatechange = function () {
              // 通信完了時
              if (xhr.readyState === 4) {
                  if (xhr.status === 200) {
                      // 正常レスポンス
                      console.log(xhr.response);
                  } else {
                      console.log("通信エラー");
                  }
              }
          }
  
          // レスポンスの形式を指定
          xhr.responseType = "json";
          // リクエストメソッドとリクエスト先を設定
          xhr.open("POST", "http://httpbin.org/post");
          // HTTPリクエストヘッダを設定
          xhr.setRequestHeader("content-type", "application/json");
          // リクエスト送信(渡したい値を引数で指定)
          xhr.send('{"param1" : "p1", "param2" : "p2"}');
      };
  </script>
</body>
</html>
```
# jQueryのAjax実装サンプル
```main_jq.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>ajaxテスト(jquery)</title>
</head>
<body>
  <p>ajaxテスト(jquery)</p>
  <input id="button-get" type="button" value="テスト(GET通信)">
  <input id="button-post" type="button" value="テスト(POST通信)">
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
      // テスト(GET通信)ボタンクリック時のイベント
      $("#button-get").click(
          function () {
              $.ajax({
                  // 渡したいデータをurlのクエリパラメータで指定
                  url: "https://httpbin.org/get?param1=p1&param2=p2",
                  type: "GET",
                  dataType: "json"
              })
                  .done(function (data, testStatus, jqXHR) {
                      // 正常レスポンス
                      console.log(data);
                  })
                  .fail(function (jqXHR, textStatus, erorThrown) {
                      console.log("通信エラー");
                  });
          }
      );
  
      // テスト(POST通信)ボタンクリック時のイベント
      $("#button-post").click(
          function () {
              $.ajax({
                  url: "https://httpbin.org/post",
                  type: "POST",
                  dataType: "json",
                  // 渡したいデータを指定
                  data: {"param1" : "p1", "param2" : "p2"}
              })
                  .done(function (data, testStatus, jqXHR) {
                      // 正常レスポンス
                      console.log(data);
                  })
                  .fail(function (jqXHR, textStatus, erorThrown) {
                      console.log("通信エラー");
                  });
          }
      );
  </script>
</body>
</html>
```
# axiosのAjax実装サンプル
※axiosについては[こちら](https://qiita.com/ksh-fthr/items/2daaaf3a15c4c11956e9)をご参照ください。

```main_ax.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>ajaxテスト(axios)</title>
</head>
<body>
  <p>ajaxテスト(axios)</p>
  <input id="button-get" type="button" value="テスト(GET通信)">
  <input id="button-post" type="button" value="テスト(POST通信)">
  
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
  
      // テスト(GET通信)ボタンクリック時のイベント
      document.getElementById("button-get").onclick = function () {
          // 渡したいデータをurlのクエリパラメータで指定
          axios.get("https://httpbin.org/get?param1=p1&param2=p2")
              .then(function (response) {
                  // 正常レスポンス
                  console.log(response.data);
              })
              .catch(function (error) {
                  console.log("通信エラー");
              });
      };
  
      // テスト(POST通信)ボタンクリック時のイベント
      document.getElementById("button-post").onclick = function () {
          // 渡したいデータをurlのクエリパラメータで指定
          axios.post("https://httpbin.org/post", {"param1" : "p1", "param2" : "p2"})
              .then(function (response) {
                  // 正常レスポンス
                  console.log(response.data);
              })
              .catch(function (error) {
                  console.log("通信エラー");
              });
      };
  </script>
</body>
</html>
```