В чем разница между программированием на стороне клиента и на стороне сервера?

498

У меня есть этот код:

<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 на клиенте. Основная сущность проблемы и решения одинаковы для любой пары языков, когда один работает на клиенте, а другой на сервере (даже если это один и тот же язык). Пожалуйста, примите это во внимание, когда увидите ответы, говорящие о конкретных языках.

децезе
источник

Ответы:

460

Ваш код разделен на две совершенно отдельные части: на стороне сервера и на стороне клиента .

                    |
               ---------->
              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. В ответе не осталось PHP-кода, с которым мог бы взаимодействовать JavaScript.

Чтобы вызвать некоторый код PHP, клиент должен будет отправить новый HTTP-запрос на сервер. Это может произойти с использованием одного из трех возможных методов:

  1. Ссылка, которая заставляет браузер загрузить новую страницу.
  2. Отправка формы, которая отправляет данные на сервер и загружает новую страницу.
  3. AJAX запрос, который является методом Javascript , чтобы сделать регулярный запрос HTTP на сервер (например , 1. и 2. воли), но , не покидая текущую страницу.

Вот вопрос с изложением этих методов более подробно

Вы также можете использовать JavaScript, чтобы браузер открывал новую страницу, используя window.locationили отправляя форму, эмулируя возможности 1. и 2.

децезе
источник
1
Вы также можете открыть вторую страницу с помощью window.openили загрузить страницу с помощью iframe.
jcubic
Возможно, стоит добавить WebSockets в список способов коммуникации.
Квентин
Что если, скажем, выпадающие значения обновляются через jquery. Когда пользователь выполняет шаг 2. Отправка формы, которая передает данные на сервер и загружает новую страницу, с помощью кнопки «Отправить», сможет ли обновленные значения jquery быть переданы контроллеру в php? Или они не будут видны php, так как он был добавлен в дом через jquery? @deceze
FabricioG
@Fabricio HTTP-запрос будет создан из <form>данных и отправлен на сервер. Вы можете манипулировать формами, используя Javascript, чтобы они содержали разные данные. Да, эти данные будут частью результирующего HTTP-запроса, если они правильно являются частью формы при отправке; не имеет значения, было ли это в оригинальном HTML или добавлено впоследствии через Javascript.
deceze
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. Вы можете сделать AJAX-вызов с JavaScript - это не требует перезагрузки страницы

Хорошо читать:

  1. Википедия: Серверные скрипты
  2. Википедия: скрипты на стороне клиента
  3. Мадара Учиха: Разница между программированием на стороне клиента и на стороне сервера
NullPoiиteя
источник
30

Ваш Javascript будет выполняться на клиенте, а не на сервере. Это означает, что fooон не оценивается на стороне сервера, и поэтому его значение не может быть записано в файл на сервере.

Лучший способ подумать об этом процессе - создать динамический текстовый файл. Текст, который вы генерируете, становится исполняемым кодом только после того, как браузер его интерпретирует. Только то, что вы помещаете между <?phpтегами, оценивается на сервере.

Кстати, привычка встраивать случайные фрагменты логики PHP в HTML или Javascript может привести к получению сложного кода. Я говорю из мучительного опыта.

NitayArt
источник
3
Ваш ответ заслуживает внимания, поскольку в нем упоминается интерпретатор. Тем не менее, javascript может быть скомпилирован и запущен в серверной среде, а также может обрабатываться сервером.
Бретт Касвелл
3

В веб-приложении каждая задача выполняется в форме запроса и ответа.

Программирование на стороне клиента осуществляется с помощью HTML-кода с использованием скрипта Java и его структур, библиотеки выполняются в Internet Explorer, Mozilla, браузерах Chrome. В сценарии java сервлеты программирования на стороне сервера выполняются в серверах Tomcat, web-logic, j boss, WebSphere

chandrashekar.n
источник