クライアント側とサーバー側のプログラミングの違いは何ですか?


498

私はこのコードを持っています:

<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について明示的に行われていました。問題と解決策の本質的な性質は、一方がクライアントで実行され、もう一方がサーバーで実行されている場合、どの言語ペアで同じです(同じ言語であっても)。特定の言語について話している回答が表示された場合は、これを考慮に入れてください。

回答:


460

コードは、サーバー側クライアント側の 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. ブラウザーに新しいページをロードさせるリンク。
  2. サーバーにデータを送信し、新しいページをロードするフォーム送信。
  3. AJAXの JavaScriptの技術をある要求は、(1および2意志のような)が、現在のページを離れることなく、サーバーに通常のHTTP要求を行います。

これらの方法をより詳細に概説する質問があります

JavaScriptを使用して、ブラウザで新しいページを開いwindow.locationたり、フォームを送信したりして、可能性1および2をエミュレートすることもできます。


1
またwindow.open、iframeを使用して2番目のページを開いたり、iframeを使用してページをロードしたりすることもできます。
jcubic

通信方法のリストにWebSocketを追加する価値があるかもしれません。
クエンティン2016

ドロップダウン値がjqueryを介して更新されるとしましょう。ユーザーがステップ2を実行すると、「送信」ボタンを介してサーバーにデータを送信し、新しいページをロードするフォーム送信が、jqueryで更新された値をphpのコントローラーに渡すことができるでしょうか?または、jqueryを介してdomに追加されたため、phpに表示されませんか?@deceze
FabricioG

@Fabricio <form>データからHTTPリクエストが作成され、サーバーに送信されます。JavaScriptを使用してフォームを操作し、異なるデータを含めることができます。はい、そのデータは、送信時にフォームの一部として適切であれば、結果のHTTPリクエストの一部になります。元のHTMLに含まれていたか、Javascriptを介して後で追加されたかは関係ありません。
だます

163

PHPコードがJavaScriptコードで機能しない理由を判別するには、クライアント側サーバー側の言語とは何か、およびそれらがどのように機能するかを理解する必要があります

サーバーサイド言語(PHPなど):データベースからレコードを取得し、ステートレスHTTP接続を介して状態を維持し、セキュリティを必要とする多くのことを行います。これらはサーバーに常駐し、これらのプログラムはソースコードをユーザーに公開しません。

wikipedia_http://en.wikipedia.org/wiki/File:Scheme_dynamic_page_en.svgからの画像 画像属性

そのため、サーバー側の言語がHTTPリクエストを処理して処理することを簡単に確認できます。@ decezeが言ったように、PHPはサーバー上で実行され、クライアントに応答として送信されるHTMLとJavaScriptコードを出力します。 HTMLが解釈され、JavaScriptが実行されます。

一方、クライアント側言語(JavaScriptなど)はブラウザーに常駐し、ブラウザーで実行されます。クライアントサイドスクリプティングとは、通常、サーバーサイドではなく、ユーザーのウェブブラウザによってクライアントサイドで実行されるウェブ上のコンピュータープログラムのクラスを指します

JavaScriptはユーザーに表示され、簡単に変更できるため、セキュリティのためにJavaScriptに依存することはできません。

したがって、サーバーでHTTP要求を行うと、サーバーはまずPHPファイルを注意深く読み取り、実行する必要のあるタスクがあるかどうかを確認し、クライアント側に応答を送信します。繰り返しますが、@ decezeが言ったように、* PHPが応答の出力を完了すると、スクリプトは終了し、新しいHTTPリクエストが着信するまでサーバー上で何も起こりません。*

グラフ表示

画像ソース

では、PHPを呼び出す必要がある場合はどうすればよいでしょうか。それは、ページをリロードするか、AJAX呼び出しを使用するかによって異なります。

  1. これを行うには、ページをリロードしてHTTPリクエストを送信します
  2. JavaScriptでAJAX呼び出しを行うことができます-これはページの再読み込みを必要としません

良い読み:

  1. ウィキペディア:サーバーサイドスクリプト
  2. ウィキペディア:クライアント側のスクリプト
  3. うちはマダラ:クライアント側とサーバー側のプログラミングの違い

30

JavaScriptはサーバーではなくクライアントで実行されます。これはfoo、サーバー側で評価されないため、その値をサーバー上のファイルに書き込むことができないことを意味します。

このプロセスについて考える最良の方法は、テキストファイルを動的に生成する場合と同じです。生成するテキストは、ブラウザーが解釈した後にのみ実行可能コードになります。<?phpタグの間に配置したものだけがサーバーで評価されます。

ちなみに、PHPロジックのランダムな部分をHTMLまたはJavaScriptに埋め込む習慣を付けると、コードが非常に複雑になります。辛い経験から語ります。


3
ここでの回答は注目すべき点です。ただし、javascriptはサーバー環境でコンパイルして実行でき、サーバーからも傍受できます。
Brett Caswell 2015年

3

Webアプリケーションでは、すべてのタスクが要求と応答の方法で実行されます。

クライアント側のプログラミングは、Javaスクリプトとそのフレームワークを含むHTMLコードを使用し、ライブラリはInternet Explorer、Mozilla、Chromeブラウザで実行されます。Javaシナリオでは、サーバー側プログラミングサーブレットがTomcat、web-logic、j boss、WebSphereサーバーで実行されます

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.