web-dev-qa-db-ja.com

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

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

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

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

テキストファイルに「バー」を書き込まず、「42」を警告するのはなぜですか？

NB：この質問の以前のリビジョンは、サーバー上のPHPとクライアント上のJavaScriptについて明示的でした。問題と解決策の本質は、1つがクライアントで実行され、もう1つがサーバーで実行されている場合のany言語のペアの場合と同じです。特定の言語についての回答が表示されたら、これを考慮に入れてください。

javascriptphpclient-sideserver-side
451
deceze

コードは、サーバー側とクライアント側の2つの完全に別個の部分に分割されます。

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

両者はHTTPリクエストとレスポンスを介して通信します。 PHPはサーバー上で実行され、HTMLを出力します。HTMLが解釈され、JavaScriptが実行されるクライアントに応答として送信される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 リクエスト。これは、サーバーに対して通常のHTTPリクエスト（1や2など）を行うJavaScriptテクニックですが、現在のページを離れることはありません。

これらの方法の詳細を説明する質問

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

426
deceze

PHPコードがJavaScriptコードで機能しない理由を判断するには、何クライアント側およびサーバー側言語は、そしてそれらがどのように機能するか。

サーバー側言語（PHPなど）：データベースからレコードを取得し、 ステートレスHTTPconnection 、およびセキュリティを必要とする多くのことを行います。これらはサーバー上に常駐し、これらのプログラムのソースコードがユーザーに公開されることはありません。

Image from wikipedia_http://en.wikipedia.org/wiki/File:Scheme_dynamic_page_en.svgイメージ属性

したがって、サーバー側の言語はHTTPリクエストを処理して処理し、@ decezeが言ったように、PHPがサーバー上で実行され、HTML、およびJavaScriptコードを出力します。クライアントへの応答。HTMLが解釈され、JavaScriptが実行されます。

一方、クライアント側言語（JavaScriptなど）はブラウザーに存在し、ブラウザーで実行されます。 クライアント側のスクリプティングは、通常、serverの代わりに、ユーザーのWebブラウザによってクライアント側で実行されるWeb上のコンピュータープログラムのクラスを指します-側。

JavaScriptはユーザーに表示され、簡単に変更できるため、セキュリティの観点からJavaScriptに依存しないでください。

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

Graphical representation

画像ソース

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

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

グッドリード：

  1. Wikipedia：サーバー側スクリプト
  2. Wikipedia：クライアント側スクリプト
  3. うちはマダラ：クライアント側とサーバー側のプログラミングの違い
155
NullPoiиteя

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

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

ところで、HTMLまたはJavascriptにPHPロジックのランダムな部分を埋め込む習慣を作ると、コードが非常に複雑になる可能性があります。辛い経験から話しています。

27
NitayArt

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

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

3
chandrashekar.n

私はそれを簡単な方法で説明しようとします。

クライアント側は、ユーザーに表示されるものであり、ブラウザに表示されるコードです。

クライアント側プログラミングには、HTML（HTML、HTML5、DHTML）、CSS（CSS、CSS3）およびJavaScript（JavaScript、ES5、ES6、ES7、TypeScript、JQuery、ReactJs、AngularJs、BackboneJsまたはその他のJavaScriptフロントエンドフレームワーク）が含まれます。

クライアント側のプログラミングは、「ページがどのように表示されるか」と、ブラウザ上でのその動作に焦点を当てています。

  1. HTMLは私たちが見ているものです。
  2. CSSはそのデザイン（カラー、フローティング画像、パディングなど）を決定します。
  3. JavaScriptモニターページ情報。すべてのAPI呼び出しとDOMを介したデータの維持は、JavaScriptによって行われます。

サーバー側のプログラミングには、クライアント側にデータを提供するコードが含まれています。ユーザーはサーバー側を見ることができません。

サーバー側のプログラミングには、プログラミング言語（Java、PHP、.Net、C＃、C、C++、NodeJSなど）、データベース（SQL、Oracle、MySql、PostgreySql、No-Sql、MongoDBなど）、サードパーティAPI（Rest、Soap） ）、 ビジネスの論理。

サーバー側プログラミングでは、「クライアント側でデータを利用可能にする方法」に焦点を当てています。

  1. サーバー側言語は、データベース、サードパーティAPI、ファイルシステム、ブロックチェーンなどの異なるデータソース間の通信を担当します。これらの言語は、クライアント側と対話するための特定のAPIを維持します。
  2. データベースは情報の保存を担当します。
  3. ビジネスロジックは、「データの使用方法とデータの処理方法」を定義します。

サーバー側から提供されるAPIを介したサーバー側からのクライアント側の要求データまたはデータの保存要求。このデータの要求と応答は、REST AP​​I、SOAP AP​​IなどのHTTP/FTPプロトコルに従って行われます。

0
NAVIN