SQL見るだけクエリ#138 PHPとAJAXで非同期通信　HTTP_X_REQUESTED_WITHヘッダーで判定

PHPとAJAXで非同期通信、HTTP_X_REQUESTED_WITHヘッダーで判定する例を解説してみようと思います。

この記事を読むと（約5分）
PHPとAJAXで非同期通信する際に、HTTP_X_REQUESTED_WITHヘッダーで判定をする方法をイメージできます。

HTTP_X_REQUESTED_WITHヘッダーで判定

まず、PHPを使用してサーバーサイドのコードを書きます。

<?php
// server.php

// AJAXリクエストかどうかを確認
if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest') {
    // AJAXリクエストを処理する

    // データ処理のシミュレーション
    $result = 'こんにちは、' . $_GET['name'] . 'さん！'; // 'name'をクエリパラメータとして受け取ると仮定

    // レスポンスをクライアントに返す
    echo $result;
} else {
    // 非AJAXリクエストの処理（オプション）
    echo 'このエンドポイントはAJAXリクエストのみ受け付けます。';
}
?>

上記のPHPコードでは、リクエストがAJAXリクエストかどうかをHTTP_X_REQUESTED_WITHヘッダーを調べることで確認します。もしAJAXリクエストであれば、リクエストを処理します（この例では受け取った名前とあいさつを連結しています）そしてレスポンスをクライアントに送信します。次に、JavaScriptとAjaxを使ったクライアントサイドのコードに移ります。

<!DOCTYPE html>
<html>
<head>
    <title>非同期通信の例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            // フォームの送信を処理
            $('#myForm').submit(function(e) {
                e.preventDefault(); // デフォルトのフォーム送信を防止

                // 入力値を取得
                var name = $('#nameInput').val();

                // サーバーに対してAjaxリクエストを送信
                $.ajax({
                    url: 'server.php',
                    type: 'GET',
                    data: { name: name },
                    success: function(response) {
                        // サーバーのレスポンスを表示
                        $('#result').text(response);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <h1>非同期通信の例</h1>
    <form id="myForm">
        <label for="nameInput">名前を入力してください：</label>
        <input type="text" id="nameInput">
        <button type="submit">送信</button>
    </form>
    <div id="result"></div>
</body>
</html>

クライアントサイドのコードでは、ユーザーが名前を入力してフォームを送信すると、jQueryの$.ajax()関数を使用してサーバーに対して非同期リクエストを送信します。 urlパラメータには、サーバーサイドのPHPファイル（この例ではserver.php）を指定します。typeパラメータは'GET'に設定し、dataパラメータには名前をクエリパラメータとして渡します。 AJAXリクエストが成功した場合、サーバーからのレスポンスはsuccessコールバック関数で受け取り、結果はresultというIDを持つ

要素に表示されます。以上で終了です！このコードを使用すると、ユーザーが名前を入力してフォームを送信すると、クライアントはサーバーに対して非同期リクエストを送信し、サーバーはリクエストを処理してレスポンスを返します。その結果、ページ全体のリロードをせずに、クライアント側にレスポンスが表示されます。

SQL見るだけクエリ#138 PHPとAJAXで非同期通信 HTTP_X_REQUESTED_WITHヘッダーで判定

HTTP_X_REQUESTED_WITHヘッダーで判定

SQL見るだけクエリ#138 PHPとAJAXで非同期通信　HTTP_X_REQUESTED_WITHヘッダーで判定