【初心者向け】Ajaxを使ってPHPからデータを受け取る方法を解説

PHPやJavaScriptを学んでいると、Ajaxや非同期通信という単語を見かけることがあると思います。

何やら格好いい感じがするAjaxですが、どのようなものなのか、ということは簡単には想像できないのではないかと思います。

そこで今回は、Ajaxとは何か、PHPとあわせて使うにはどのようにすれば良いのか、ということについて解説します。

1 Ajaxとは何か
2 そもそも「非同期通信」って何？
3 Ajaxのメリット
4 Ajaxの手順
5 AjaxとPHPを使ったサンプルプログラムの説明
6 まとめ

Ajaxとは何か

Ajaxとは正式名称Asynchronous JavaScript + XMLの略語で、JavaScriptの組み込みクラスXMLHttpRequestを利用した非同期通信のことを指します。

では、非同期通信について、詳しく説明します。

そもそも「非同期通信」って何？

そもそも非同期通信とはどのようなものでしょう。非同期なので「同期しない通信」ということですが、簡単にはピンとこないと思いますので、わかりやすい例をいくつか紹介します。

Google マップ

みなさん、一度はGoogleマップを使ったことがあると思います。スクロールさせれば画面に表示されてなかった地図が次々と表示されますし、拡大縮小も簡単にできて、とても便利ですよね。

Googleマップは世界中の地図情報を一度にまとめて読み込んでいるのでしょうか？いえ、そんなことはありません。

どうしてスクロールさせるだけで、それまで見えてなかった地図が表示されるのかというと、スクロールの動作に合わせて必要なデータをサーバーに要求して、受け取ったデータを地図として表示しているからです。

Twitter

Twitterも一度は見かけたことがあると思います。いろいろなつぶやきが、画面をスクロールさせるたびに次々に表示されますよね。

つぶやきのデータも一度にまとめて読み込む……ということはありません。仕組みはGoogleマップと同様です。

つまり非同期通信とは？

GoogleマップとTwitter。どちらも共通している点があることはすでにお気づきではないかと思います。

それは、どちらも今見ているページから移動していないという点です。つまり、ページを移動せずに必要なデータを送受信することを非同期通信と呼んでいるのです。

Ajaxのメリット

ここで、Ajaxのメリットについて触れてみたいと思います。

ページを移動すればサーバーからデータを受け取って新しい情報を表示できるのに、なぜわざわざAjaxという仕組みを使うのでしょう。それには次のような理由があるからです。

必要最小限のデータを受け取るだけで、新しい情報を表示できる。
受け取るデータが少ないので、結果を表示するまでの待ち時間が少なくて済む。
データを受け取るまでの間に他の作業や操作ができる。
待ち時間が減り、他の作業ができることで、利用者の利便性が上がる。

他にもいくつか理由がありますが、代表的なものを挙げてみました。

Ajaxの登場によって、利用者の利便性は格段に向上しました。今ではなくてはならないもの、といっても良いくらいに、いろいろなところでAjaxが使われています。

Ajaxの手順

それでは、Ajaxの手順について説明します。

ページ上で何かのイベントが発生します。
イベントを起点にJavaScriptとXMLHttpRequestを使って、サーバーにリクエストを送信します。
リクエストを受信したサーバーは、何かの処理を実行して結果を返します。
サーバーからXML形式やJSON形式で受け取ったデータをもとに、DOMを操作してページを更新します。

AjaxはJavaScriptの組み込みオブジェクト（API）であるXMLHttpRequestを利用します。

このXMLHttpRequestを利用して、直接サーバーとデータをやり取りするのですが、そのデータ形式はAjaxの名前が示す通りXML形式を使うのが基本です。

ただし、XML形式以外のデータもやり取りできるため、データ量が少なくて済むJSON形式のデータを使うのが主流となっています。

サーバーから受け取ったデータはDOMをとおして、ページに反映、更新させます。

以上がAjaxの手順ですが、実際にどのようにプログラムを組むとどうなるか、次の章で説明します。

XMLHttpRequestとは

XMLHttpRequestとはサーバーとHTTPで通信するためのJavaScriptのAPIです。名前にXMLがついていますが、JSON形式のデータでも使えます。

XMLとは

XMLとはExtensible Markup Languageの略で、拡張可能なマークアップ言語です。テキストベースで、見た目がHTMLに似ています。データを記述するのに適しています。

JSONとは

JSONとはJavaScript Object Notationの略で、JavaScriptのオブジェクトの書き方を元にしたデータ定義方法です。テキストベースのデータフォーマットで、JavaScriptのオブジェクト記法で定義するため、XMLと比べてわかりやすく、データ量が少なくて済むというメリットがあります。

DOMとは

DOMとはDocument Object Model の略で、JavaScriptからHTMLやXML文書を自在に操作するためのインターフェースです。

AjaxとPHPを使ったサンプルプログラムの説明

では、実際にAjaxの動作を体験してみましょう。サンプルとして果物の値段を表示するプログラムを用意しました。動作イメージは次のようになります。

STEP.1
果物を選びます
セレクトボックスを選ぶとイベントが発生します。
STEP.2
セレクトボックスの値をサーバーに送ります
サーバーへ送るデータはJSON形式にエンコードします。
STEP.3
サーバーのプログラムが動作します
受け取ったJSON型式のデータをデコードして処理を実行し、結果をJSON形式で作成して返却します。
サーバーからデータを受け取り、値段を表示します

役割をわかりやすくするために、プログラムは3本のソースに分けました。それぞれの役割は次のようになります。

ページを表示するためのHTMLファイル
Ajaxの実体となるJavaScriptファイル
サーバー側の処理となるPHPファイル

HTMLファイルについて

HTMLファイルは非常にシンプルな構成です。Ajaxを動作させる起点としてセレクトボックスを、サーバーから受け取ったデータを表示するテキストボックスを用意しています。

セレクトボックスの選択肢を変更すると、onchangeイベントに書かれたgetData()が呼ばれます。結果はテキストボックスに表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Ajax動作サンプル</title>
    <script type="text/javascript" src="ajax.js"></script>
</head>
<body>
    <h1>Ajax動作サンプル</h1>
    <form method="" action="" onsubmit="return false" >
        <select name="Fruits" id="Fruits" onchange="getData()">
            <option value="">果物を選択</option>
            <option value="1">リンゴ</option>
            <option value="2">バナナ</option>
            <option value="3">イチゴ</option>
        </select>
        <input type="text" name="Result" id="Result" value="選択してください">
        <h2></h2>
    </form>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Ajax動作サンプル</title>

</head>

<body>

<h1>Ajax動作サンプル</h1>

<option value="">果物を選択</option>

</select>

</form>

</body>

</html>

特に難しいことはやっていないのであまり説明することはないのですが、AjaxはUTF-8がデフォルトなため、HTMLファイルもcharsetでUTF-8を指定しているところは気を付けてください。

JavaScritpについて

JavaScriptファイルには関数getData()を用意しています。この関数はセレクトボックスのonchangeイベントから呼ばれ、セレクトボックスの値をJSON形式に加工して、サーバーに送信します。
また、サーバーから値を受け取り、テキストボックスの中身を変更する処理も関数内に記述しています。

function getData() {
  document.getElementById("Result").value = "問い合わせ中です…";
  var data = {
    "code": document.getElementById("Fruits").value
  }
  var json = JSON.stringify(data);
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "ajax.php");
  xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=UTF-8");
  xhr.send(json);
  xhr.onreadystatechange = function () {
    try {
      if (xhr.readyState == 4) {
        if (xhr.status == 200) {
          var result = JSON.parse(xhr.response);
          document.getElementById("Result").value = result.value == 0 ? "選択してください" : result.value;
        } else {
        }
      } else {
      }
    } catch (e) {
    }
  };
}

function getData() {

document.getElementById("Result").value = "問い合わせ中です…";

var data = {

"code": document.getElementById("Fruits").value

}

var json = JSON.stringify(data);

var xhr = new XMLHttpRequest();

xhr.open("POST", "ajax.php");

xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=UTF-8");

xhr.send(json);

xhr.onreadystatechange = function () {

try {

if (xhr.readyState == 4) {

if (xhr.status == 200) {

var result = JSON.parse(xhr.response);

document.getElementById("Result").value = result.value == 0 ? "選択してください" : result.value;

} else {

}

} else {

}

} catch (e) {

}

};

}

2行目: テキストボックスにデータの問い合わせ中がわかるように、テキストボックスにメッセージを設定します。
3行目から6行目: サーバーへ送るデータを用意します。JSON.stringify()でJavaScriptのデータをJSON文字列に変換します。
7行目から10行目: サーバーにリクエストを送信する処理です。
7行目でXMLHttpRequestオブジェクトを利用してブラウザとサーバー間で通信するために、インスタンスを作成します。
8行目から10行目でXMLHttpRequestの接続を開き、指定したURLに情報をPOSTします。
11行目以降: 受け取ったデータをもとにテキストボックスに値を設定する処理です。
ここでは処理が正常終了した流れのみ記述していますが、実際はエラー処理を含めたプログラムを組む必要があります。

PHPファイルについて

PHPファイルはリクエストを受信して、受け取った値でデータを用意し、返却する処理を記述しています。

<?php
    sleep(1);
    $request = json_decode(file_get_contents("php://input"), true);
    $value = 0;
    switch ($request['code']) {
        case "1":
            $value = 200;
            break;
        case "2":
            $value = 100;
            break;
        case "3":
            $value = 150;
            break;
    }
    $result =[
        "value" => $value,
    ];
    $json = json_encode($result, JSON_UNESCAPED_UNICODE);
    header("Content-Type: application/json; charset=UTF-8");
    echo $json;
    exit;

<?php

sleep(1);

$request = json_decode(file_get_contents("php://input"), true);

$value = 0;

switch ($request['code']) {

case "1":

$value = 200;

break;

case "2":

$value = 100;

break;

case "3":

$value = 150;

break;

}

$result =[

"value" => $value,

];

$json = json_encode($result, JSON_UNESCAPED_UNICODE);

header("Content-Type: application/json; charset=UTF-8");

echo $json;

exit;

3行目: POSTされたJSONデータを取り出して、連想配列形式にデコードします。
4行目から18行目: 返却するデータを用意します。サンプルのためSwitchで分岐して、値を決めています。
19行目: 返却するデータをJSON形式にエンコードしているところです。JSON_UNESCAPED_UNICODEのオプションでマルチバイトUnicode文字をそのままの形式で扱うようにしています。
20行目から22行目: データを返却します。PHPプログラムではJSON形式で値を返すため、ヘッダ情報は忘れずに記述します。ここでもcharset=UTF-8を忘れないように指定します。
値を返した後はPHPプログラムの動作は不要になるので、22行目のexitで動作を終了させます。

実際に動作させてみる

では、実際にプログラムを動かしてみたらどうなるか、動画を見てみましょう。

どうですか？セレクトボックスの果物を選ぶと、値段が表示されるのがお分かりいただけたと思います。

まとめ

いかがでしたか？今回はAjaxとは何か、PHPとあわせて使うにはどのようにすれば良いのか、ということについて解説しました。

Ajaxはウェブの世界では避けて通れないものです。手順さえわかれば、あとは応用するだけでいろいろなことができます。

頑張って身に付けてください。

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。