[解決済み] クライアントサイドとサーバーサイドのプログラミングの違いは何ですか？

質問

このようなコードがあります。

<script type="text/javascript">
    var foo = 'bar';
    <?php
        file_put_contents('foo.txt', ' + foo + ');
    ?>

    var baz = <?php echo 42; ?>;
    alert(baz);
</script>

なぜ、テキストファイルに "bar" を書き込まず、"42" を警告するのでしょうか？

注：この質問の以前の改訂版では、サーバー上のPHPとクライアント上のJavaScriptについて明示的に説明していました。問題と解決策の本質的な性質は、以下のものでも同じです。 いずれも 一方がクライアントで、他方がサーバーで動作している場合（同じ言語であっても）、2つの言語のペアを使用します。特定の言語について述べている回答がある場合は、この点を考慮してください。

解決方法は？

あなたのコードは、全く別の2つの部分に分かれています。 サーバーサイド と クライアント側 .

                    |
               ---------->
              HTTP request
                    |
+--------------+    |    +--------------+
|              |    |    |              |
|    browser   |    |    |  web  server |
| (JavaScript) |    |    |  (PHP etc.)  |
|              |    |    |              |
+--------------+    |    +--------------+
                    |
  client side       |      server side
                    |
               <----------
          HTML, CSS, JavaScript
                    |

両者はHTTPリクエストとレスポンスで通信します。PHPはサーバー上で実行され、いくつかのHTMLと多分JavaScriptのコードを出力し、それがクライアントへの応答として送られ、そこでHTMLが解釈され、JavaScriptが実行されます。PHPがレスポンスを出力し終わると、スクリプトは終了し、新しいHTTPリクエストが来るまではサーバー上では何も起こりません。

例のコードはこのように実行されます。

<script type="text/javascript">
    var foo = 'bar';
    <?php
        file_put_contents('foo.txt', ' + foo + ');
    ?>

    var baz = <?php echo 42; ?>;
    alert(baz);
</script>

ステップ1では、PHPは以下の間のすべてのコードを実行します。 <?php ?> タグを使用します。その結果、こうなります。

<script type="text/javascript">
    var foo = 'bar';

    var baz = 42;
    alert(baz);
</script>

は file_put_contents の呼び出しは何の結果にもならず、ただファイルに " + foo + " を書き込んだだけでした。また <?php echo 42; ?> を呼び出すと "42" が出力され、そのコードが以前あった場所にある。

このようにしてできたHTML/JavaScriptのコードは、今度はクライアントに送られ、そこで評価されることになります。その際 alert の呼び出しは機能しますが foo 変数はどこにも使われていません。

すべてのPHPコードは、クライアントがJavaScriptの実行を開始する前に、サーバー上で実行されます。レスポンスには、JavaScript がやりとりできる PHP コードは残っていません。

ある PHP コードを呼び出すには、クライアントはサーバーに新たな HTTP リクエストを送信する必要があります。これは、3つの方法のうちの1つで実現できます。

1. リンク。ブラウザに新しいページを読み込ませる。
2. フォーム送信。サーバーにデータを送信し、新しいページを読み込みます。
3. を意味します。 AJAX リクエストは、Javascript のテクニックで、サーバーに通常の HTTP リクエストを行いますが (1. や 2. がそうするように)、現在のページを離れることはありません。

これらの方法をより詳しく説明した質問はこちらです。

また、JavaScriptを使用して、ブラウザに新しいページを開かせることもできます。 window.location やフォームの送信など、1.と2.の可能性をエミュレートすることができます。