Ajax（非同期通信） 使い方基本

◎Ajaxとは

非同期にクライアントとサーバで間の通信を行える仕組み。
リロードをする事なく、必要なデータのみ受信することができる。

非同期通信とは

非同期通信は画面の遷移のない通信。
非同期処理は、前の処理を終わりを待たずに、処理を進めていく。

それに対して、
同期処理は一瞬画面が白くなって、画面が切り替わる。
同期処理は、順番に一つ一つ処理を終わらせていく。

Ajaxのメリット

・リンクをクリックした際のレスポンス待ち時間の体感時間が少くできる。

・必要な部分の情報のみを取得変更し、必要なときに更新可能の為高速に動作する。

◎Ajaxを使う

getとpostで記述方法が異なる為、個別に記述しています。

準備

Ajaxを簡単に使うためのライブラリ「axios」をHTML内で読み込みます。

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

GET通信

[GET通信]１：　サーバー側からの受け取りのみの場合

[例]
ajax.phpでechoした物を、index.htmlで受け取る

ajax.php

<!-- サーバー側 -->
<?php
echo "<div>あああああ</div><div>いいいいい</div><div>ううううう</div>";
?>

index.html

<!-- クライアント側 -->
axios.get('[ajax.php']').then(function (response) {
  //通信OK時の処理
  console.log(response.data);
}).catch(function (error) {
 //通信Error時の処理
 console.log(error);
}).then(function () {
　　//OKの場合とErrorの場合どちらでも最後に実行したい処理
 console.log("Last");
});

[index.html 一部解説][index.html 一部解説]

axios.get('[通信先]').then(function (サーバー側から受け取ったデータがここの変数に入る) {

[GET通信]２：サーバー側へデータを渡してから、データを受け取る場合

index.htmlからオブジェクトをajax.phpへ送信。
↓
ajax.phpで受け取ったデータをJson形式に変更し、echo する。
↓
index.htmlでjsonデータを受け取る

index.html

<!-- クライアント側 -->
<script>
    //送信データを用意 (オブジェクト)
    const data = {
        id:'value1',mode:"value2",type:"value3"
    };

    //Ajax（非同期通信） 第二引数に送るもの axiosがjsonをオブジェクトに勝手に変換してくれる!!
    axios.get('ajax_get.php', {params:data})
    .then(function (response) {
        //通信OK時の処理
        console.log(response.data);
    }).catch(function (error) {
        //通信Errorの場合の処理
        console.log(error);
    }).then(function () {
        //OKの場合とErrorの場合どちらでも最後に実行したい処理
        console.log("Last");
    });
</script>

ajax.php

<!-- サーバー側 -->
<?php
//POSTパラメータを取得
$id   = $_GET["id"];
$mode = $_GET["mode"];
$type = $_GET["type"];

//jsonに変換
$json = '[
    {
      "id":"'.$id.'",
      "mode":"'.$mode.'",
      "type":"'.$type.'"
    },
    {
     "id":"'.$id.'",
     "mode":"'.$mode.'",
     "type":"'.$type.'"
    }
]';

//作成したJSON文字列をリクエストしたファイルに返す
echo $json;
exit;
?>

[index.html一部解説]
getの第一引数には、通信先のファイルを指定。
第二引数には、送るデータを指定。

axios.get('ajax_get.php', {params:data}).then(function (response) {

POST通信

[POST通信]１：サーバー側へデータを渡してから、データを受け取る場合

<!-- クライアント側 -->
//送信データをparam変数にセット
    const params = new URLSearchParams();//送信準備
    params.append('id',   'value1'); //paramsに追加
    params.append('mode', 'value2');
    params.append('type', 'value3');

//axiosでAjax送信
    axios.post('ajax_post.php',params).then(function (response) {
        //通信OK時の処理
        console.log(response.data);
    }).catch(function (error) {
        //通信Error時の処理
        console.log(error);
    }).then(function () {
        //OKの場合とErrorの場合どちらでも最後に実行したい処理
        console.log("Last");
    });

[一部解説]
postの第一引数には、「送信先」
第二引数には「送るデータ」を入れる。

axios.post('ajax_post.php',params)

[POST通信]２： Cookie情報を利用したい場合

<!-- クライアント側 -->
//送信データを用意
    const params = new URLSearchParams();
    params.append('id', 'value1');
    params.append('mode', 'value2');
    params.append('type', 'value3');

//axiosでCookie情報が必要な場合に必要
    const axiosPost = axios.create({
        xsrfHeaderName: 'X-CSRF-Token',
        withCredentials: true
    });

//axiosでAjax送信
    axiosPost.post('ajax_post_cookie.php',params).then(function (response) {
        //通信OK時の処理
        console.log(response.data);
    }).catch(function (error) {
        //通信Error時の処理
        console.log(error);
    }).then(function () {
        //OKの場合とErrorの場合どちらでも最後に実行したい処理
        console.log("Last");
    });

◎送信受信の確認方法　デベロッパーツール

データの送受信の内容を確認する。

[ブラウザの検証画面を開く]→[Networkタブを開く]→
[Payload]→[Response]→[Preview]の順に中身を確認すると流れが分かりやすい。

名前	表示内容
Payload	リクエストで渡したパラメータを確認(axiosで渡したデータの一覧)
Response	通信先から返ってきたデータを確認（phpから返ってきた結果）
Preview	JSONなどのAPIレスポンスを整形された状態を確認(データとしてはResponseと同じもの)

送受信の確認例

オブジェクトをサーバー側へ渡し、サーバー側でjsonに変換して返す場合
(対象のデータ)

const data = {id:'value1',mode:"value2",type:"value3"};

[Payload表示]

//サーバー側へ渡したデータ
id: value1
mode: value2
type: value3

[Response表示]

//サーバー側から返ってきたデータそのままの状態(Json形式のまま)
[
    {
      "id":"value1",
      "mode":"value2",
      "type":"value3"
    }
]

[Preview表示]

//ブラウザに実際に表示される状態(axiosでjson→オブジェクトに自動で整形された状態)　
0: {id: "value1", mode: "value2", type: "value3"}

終わりに

[Twitter]
https://mobile.twitter.com/tatsuki_kt