PHP - AJAX と PHP

AJAX（Asynchronous JavaScript and XML）は、ページ全体を再読み込みすることなく、サーバーとデータを交換するための技術です。

AJAX は、ページ全体を再読み込みする必要なくウェブページの一部を更新できる技術であり、バックグラウンドでサーバーとデータを交換し、ウェブページの一部のコンテンツを更新することができます。

AJAX により、ウェブページはコンテンツの一部を動的に更新でき、より高速なユーザーエクスペリエンスを提供します。

AJAX は通常、XMLHttpRequest オブジェクトを使用してバックグラウンドでサーバーと通信しますが、fetch API などの最新の方法を使用することもできます。

詳細については、以下を参照してください：AJAX チュートリアル

AJAX の動作原理

  • リクエストの送信：ユーザーは何らかの方法（ボタンのクリックなど）で AJAX リクエストをトリガーします。
  • リクエストの作成：JavaScript がサーバーと通信するための XMLHttpRequest オブジェクトを作成します。
  • リクエストの送信：XMLHttpRequest オブジェクトを介してサーバーにリクエストを送信します。
  • サーバー処理：サーバーはリクエストを受信した後、データ処理を行います。
  • レスポンスの返却：サーバーは処理結果をクライアントに返します。
  • ページの更新：JavaScript はサーバーのレスポンスを受信した後、ウェブページの該当部分を更新します。

PHP で AJAX を使用する手順

1. フロントエンド：JavaScript が AJAX リクエストを開始します。

XMLHttpRequest または fetch を使用して PHP サーバーにリクエストを送信します。

2. バックエンド：PHP がリクエストを受信して処理します。

PHP は AJAX リクエストのデータを取得し、結果を返します。

3. フロントエンド：PHP が返したデータを処理します。

JavaScript を使用して、PHP から受信したレスポンスデータを解析して表示します。

PHP で AJAX を使用する

1. HTML と JavaScript を作成する：まず、AJAX リクエストを送信するための HTML ページと JavaScript コードが必要です。

例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AJAX Example</title>
    <script>
        function sendRequest() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                   document.getElementById("result").innerHTML = xhr.responseText;
                }
            };
            xhr.open("GET", "your_php_file.php?param=value", true);
            xhr.send();
        }
    </script>
</head>
<body>
    <button onclick="sendRequest()">Send AJAX Request</button>
    <div id="result"></div>
</body>
</html>

2. PHP スクリプトを作成する：サーバー側では、リクエストを処理してデータを返す PHP ファイルが必要です。

例

<?php
if (isset($_GET['param'])) {
    // リクエストパラメータを処理する
    $param = $_GET['param'];
    // 何らかの操作を実行する...
    // レスポンスを返す
    echo "Received parameter: " . $param;
}
?>

3. リクエストを送信する：ユーザーがボタンをクリックすると、JavaScript 関数 sendRequest が呼び出され、XMLHttpRequest オブジェクトを作成してサーバーにリクエストを送信します。

4. レスポンスを処理する：サーバーはリクエストを処理した後、結果をクライアントに返します。クライアント側の JavaScript コードはレスポンスのステータスを確認し、ステータスが 200（リクエスト成功）の場合にページのコンテンツを更新します。

AJAX PHP の例

次の例では、ユーザーが入力ボックスに文字を入力したときに、ウェブページが Web サーバーとどのように通信するかを示します：

例

入力ボックスに名前を入力してみてください（例：Anna）：

名前：

戻り値：



例の解説 - HTML ページ

ユーザーが上記の入力ボックスに文字を入力すると、"showHint()" 関数が実行されます。この関数は "onkeyup" イベントによってトリガーされます：

例

<html>
<head>
<script>
function showHint(str)
{
        if (str.length==0)
        {
                document.getElementById("txtHint").innerHTML="";
                return;
        }
        if (window.XMLHttpRequest)
        {
// IE7+、Firefox、Chrome、Opera、Safari ブラウザで実行されるコード
                xmlhttp=new XMLHttpRequest();
        }
        else
        {      
// IE6、IE5 ブラウザで実行されるコード
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
                }
        }
        xmlhttp.open("GET","gethint.php?q="+str,true);
        xmlhttp.send();
}
</script>
</head>
<body>

<p><b>入力ボックスに名前を入力してください：</b></p>
<form>
名前：<input type="text" onkeyup="showHint(this.value)">
</form>
<p>戻り値：<span id="txtHint"></span></p>

</body>
</html>

ソースコードの説明：

入力ボックスが空の場合（str.length==0）、この関数は txtHint プレースホルダーの内容をクリアし、関数を終了します。

入力ボックスが空でない場合、showHint() は以下の手順を実行します：

  • XMLHttpRequest オブジェクトを作成する
  • サーバーのレスポンス準備完了時に実行される関数を作成する
  • サーバー上のファイルにリクエストを送信する
  • URL の末尾に追加されたパラメータ（q）（入力ボックスの内容を含む）に注意してください。

上記の JavaScript によって呼び出されるサーバーページは、"gethint.php" という名前の PHP ファイルです。

"gethint.php" 内のソースコードは名前の配列をチェックし、対応する名前をブラウザに返します：

例

<?php
// 名前を配列に格納する
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";

// リクエスト URL から q パラメータを取得する
$q=$_GET["q"];

// 一致する値があるかどうかを検索する、q>0 の場合
if (strlen($q) > 0)
{
        $hint="";
        for($i=0; $i<count($a); $i++)
        {
                if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
                {
                        if ($hint=="")
                        {
                                $hint=$a[$i];
                        }
                        else
                        {
                                $hint=$hint." , ".$a[$i];
                        }
                }
        }
}

// 一致する値がない場合、出力を "no suggestion" に設定する
if ($hint == "")
{
        $response="no suggestion";
}
else
{
        $response=$hint;
}

// 戻り値を出力する
echo $response;
?>

解説：JavaScript がテキストを送信した場合（つまり strlen($q) > 0）、以下が発生します：

  1. JavaScript が送信した文字に一致する名前を検索する
  2. 一致するものが見つからない場合、レスポンス文字列を "no suggestion" に設定する
  3. 一致する名前が1つ以上見つかった場合、すべての名前でレスポンス文字列を設定する
  4. レスポンスを "txtHint" プレースホルダーに送信する

fetch と PHP を使用した AJAX の実装

HTML + JavaScript:

例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX with PHP Example</title>
</head>
<body>

<h1>AJAX Example</h1>
<button id="ajaxButton">Get Data from PHP</button>
<div id="result"></div>

<script>
    document.getElementById('ajaxButton').addEventListener('click', function() {
// AJAX リクエストを送信する
        fetch('server.php', {
method: 'POST', // POST リクエストを使用
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ message: "Hello from client" })
        })
.then(response => response.json()) // JSON として解析
        .then(data => {
document.getElementById('result').innerHTML = data.response; // ページを更新
        })
        .catch(error => console.error('Error:', error));
    });
</script>

</body>
</html>

PHP サーバー（server.php）：

例

<?php
// JSON をサポートするようレスポンスヘッダーを設定
header('Content-Type: application/json');

// AJAX リクエストの入力データを取得
$request = json_decode(file_get_contents("php://input"), true);

// データを処理してレスポンスを返す
if ($request['message'] === "Hello from client") {
    $response = array('response' => 'Hello from PHP server!');
} else {
    $response = array('response' => 'Invalid message');
}

// 結果をクライアントに返す
echo json_encode($response);
?>

説明：

  1. フロントエンド：ユーザーがボタンをクリックすると、JavaScript はfetch()POST リクエストを送信し、server.php、JSON データも送信します。
  2. バックエンド：PHP サーバーはクライアントが送信したリクエストを読み取り、処理後に JSON レスポンスを返します。
  3. レスポンス処理：JavaScript は PHP サーバーのレスポンスを受信した後、ページのコンテンツを更新します。

PHP Ajax クロスドメイン問題の解決策

非同期リクエストでクロスドメインが必要な場合は、以下を参照してください：PHP Ajax クロスドメイン問題の解決策。

その他の拡張