実際には、これを行うにはいくつかの方法があります。あるものは他の方法よりも多くのオーバーヘッドを必要とし、あるものは他の方法よりも優れていると考えられています。

順不同:

1. AJAX を使用して、サーバーから必要なデータを取得します。
2. データをページのどこかにエコーし、JavaScript を使用して DOM から情報を取得します。
3. データを JavaScript に直接エコーします。

この記事では、上記の各方法を検討し、それぞれの長所と短所、および実装方法を見ていきます。

1. AJAXを使用してサーバーから必要なデータを取得する

サーバー側スクリプトとクライアント側スクリプトが完全に分離されているため、この方法が最適であると考えられています。

長所

• レイヤー間の分離の改善- 明日 PHP の使用をやめて、サーブレット、REST API、またはその他のサービスに移行する場合でも、JavaScript コードをあまり変更する必要はありません。
• より読みやすく- JavaScript は JavaScript、PHP は PHP です。2 つを混在させなければ、どちらの言語でもより読みやすいコードが得られます。
• 非同期データ転送が可能- PHP から情報を取得するには、時間とリソースが大量にかかる場合があります。情報を待ったり、ページをロードしたり、いつでも情報を入手したりしたくない場合があります。
• データはマークアップ上に直接存在しません。つまり、マークアップには追加データが含まれず、JavaScript のみがそれを認識します。

短所

• 遅延- AJAX は HTTP リクエストを作成し、HTTP リクエストはネットワーク経由で伝送されるため、ネットワーク遅延が発生します。
• 状態- 別の HTTP リクエストで取得されたデータには、HTML ドキュメントを取得した HTTP リクエストからの情報は含まれません。この情報が必要になる場合があります (たとえば、フォームの送信に応じて HTML ドキュメントが生成される場合)。必要な場合は、何らかの方法で転送する必要があります。ページにデータを埋め込むことを除外した場合 (この手法を使用している場合は除外しています)、競合状態が発生する可能性のある Cookie/セッションに制限されます。

実装例

AJAX では、PHP が出力を生成するページと、JavaScript がその出力を取得するページの 2 つのページが必要です。

データを取得する.php

/* Do some operation here, like talk to the database, the file-session
 * The world beyond, limbo, the city of shimmers, and Canada.
 *
 * AJAX generally uses strings, but you can output JSON, HTML and XML as well.
 * It all depends on the Content-type header that you send with your AJAX
 * request. */

echo json_encode(42); // In the end, you need to `echo` the result.
                      // All data should be `json_encode`-d.

                      // You can `json_encode` any value in PHP, arrays, strings,
                      // even objects.

<!-- snip -->
<script>
    fetch("get-data.php")
        .then((response) => {
            if(!response.ok){ // Before parsing (i.e. decoding) the JSON data,
                              // check for any errors.
                // In case of an error, throw.
                throw new Error("Something went wrong!");
            }

            return response.json(); // Parse the JSON data.
        })
        .then((data) => {
             // This is where you handle what to do with the response.
             alert(data); // Will alert: 42
        })
        .catch((error) => {
             // This is where you handle errors.
        });
</script>
<!-- snip -->

<!-- snip -->
<div id="dom-target" style="display: none;">
    <?php
        $output = "42"; // Again, do some operation, get the output.
        echo htmlspecialchars($output); /* You have to escape because the result
                                           will not be valid HTML otherwise. */
    ?>
</div>
<script>
    var div = document.getElementById("dom-target");
    var myData = div.textContent;
</script>
<!-- snip -->

<!-- snip -->
<script>
    var data = <?php echo json_encode("42", JSON_HEX_TAG); ?>; // Don't forget the extra semicolon!
</script>
<!-- snip -->