JavaScript 2020/10/06 (更新日:2023/01/10)

【Javascript】Ajaxを使ってデータをやりとりする方法を紹介

今回は素のjavascriptを使って、Ajaxを使ってサーバーサイド(sever.php)とのデータのやり取りする方法を紹介します。

今回Ajaxを行うファイル構成を確認してみよう
GETでデータのやり取りをしよう
POSTでデータのやり取りをしよう

Ajaxを行うファイル構成を確認してみよう

index.php
script.js
style.css
server.php

シンプルに同じ階層にすべてのファイルをおいています。お使いの環境に合わせてurlを変更する必要があります。

共通のHTMLとCSS

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Ajax</title>
     <link rel="stylesheet" href="style.css">
     
</head>
<body>

     <div class="container">
          <div class="button">Ajax</div>
     </div>

     <script src="script.js"></script>
</body>
</html>

.container {
     display: flex;
     justify-content: center;
     width: 100%;
     height: 100vh;
     align-items: center;
}

.button {
     padding: 1rem 2rem;
     background: #ccc;
     color: #fff;
     cursor: pointer;
}

GETでデータのやり取りをしよう

const button = document.querySelector('.button');

button.addEventListener('click', function() {

     var req = new XMLHttpRequest();
     req.onreadystatechange = function () {
          if (req.readyState == 4 && req.status == 200) {
               console.log(this.response);
          }
     };
     req.open('GET', './server.php?data=test', true);
     req.send();
});

11：同じ階層にあるserver.phpにGETでdata testの文字列を送信している。

通信に成功すると、8：server.phpから返ってきた値をthis.responseで取得できる。

サーバー側(server.php)の処理、今回は送られてきたデータをそのまま帰すだけにしています。

<?php
if ($_GET['data'] && !empty($_GET['data'])) {
     echo $_GET['data'];//test
}

POSTでデータのやり取りをしよう

const button = document.querySelector('.button');

button.addEventListener('click', function() {

     var req = new XMLHttpRequest();
     req.onreadystatechange = function () {
          if (req.readyState == 4 && req.status == 200) {
               var data = JSON.parse(this.response);
               console.log(data);
          }
     };
     req.open('POST', './server.php', true);
     req.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');

     var names = [{
          name: '佐藤'
     },{
          name: '鈴木'
     }];

     names = JSON.stringify(names);
     req.send(`data=${names}`);
});

8〜9 通信に成功すると、サーバーサイドから送られてきたJSON型のデータを配列に変換し、ログに出力しています。

13：POSTで送信する場合は、エンティティヘッダーを用意する必要があります。

15~19今回は配列を作成し、21~22 JSON形式の型に変換して、サーバーサイド(server.php)にデータを送信します。

<?php

if ($_POST['data'] && !empty($_POST['data'])) {
     $data = json_decode($_POST['data']);

     $tanaka = array('name' => '田中');
     array_push($data, $tanaka);

     $data = json_encode($data);

     echo $data;
};

サーバーサイドでは、送られてきたJSON形式のデータを配列の型に変換し、6〜7新たに配列にデータを追加し、再度 9：JSON形式に変換し、11：お繰り返しています。

実行結果