Jaka jest różnica między programowaniem po stronie klienta a programowaniem po stronie serwera?

498

Mam ten kod:

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

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

Dlaczego to nie zapisuje „paska” w moim pliku tekstowym, ale ostrzega „42”?


NB: Wcześniejsze wersje tego pytania dotyczyły wyraźnie PHP na serwerze i JavaScript na kliencie. Zasadnicza natura problemu i rozwiązań jest taka sama dla każdej pary języków, gdy jeden działa na kliencie, a drugi na serwerze (nawet jeśli są one tym samym językiem). Weź to pod uwagę, gdy zobaczysz odpowiedzi mówiące o konkretnych językach.

deceze
źródło

Odpowiedzi:

460

Twój kod jest podzielony na dwie całkowicie oddzielne części, po stronie serwera i po stronie klienta .

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

Obie strony komunikują się za pośrednictwem żądań i odpowiedzi HTTP. PHP jest uruchamiane na serwerze i generuje kod HTML, a może kod JavaScript, który jest wysyłany w odpowiedzi na klienta, w którym HTML jest interpretowany i JavaScript jest wykonywany. Gdy PHP zakończy wysyłanie odpowiedzi, skrypt kończy się i nic się nie dzieje na serwerze, dopóki nie pojawi się nowe żądanie HTTP.

Przykładowy kod działa w następujący sposób:

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

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

Krok 1, PHP wykonuje cały kod między <?php ?>znacznikami. Rezultat jest następujący:

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

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

file_put_contentsWezwanie nie spowodowało niczego, po prostu napisał „+ foo +” do pliku. <?php echo 42; ?>Wezwanie spowodowało wyjście „42”, który jest teraz w miejscu, gdzie ten kod kiedyś.

Wynikowy kod HTML / JavaScript jest teraz wysyłany do klienta, gdzie jest oceniany. alertWezwanie działa, gdy foozmienna nie jest stosowany wszędzie.

Cały kod PHP jest wykonywany na serwerze, zanim klient zacznie nawet wykonywać JavaScript. W odpowiedzi nie ma kodu PHP, z którym JavaScript mógłby współpracować.

Aby wywołać jakiś kod PHP, klient będzie musiał wysłać nowe żądanie HTTP do serwera. Może się to zdarzyć przy użyciu jednej z trzech możliwych metod:

  1. Link, który powoduje, że przeglądarka ładuje nową stronę.
  2. Formularz, który przesyła dane do serwera i ładuje nową stronę.
  3. AJAX żądanie, która jest techniką JavaScript, żeby uczynić regularny żądanie HTTP do serwera (jak będzie 1. i 2.), ale bez opuszczania bieżącej strony.

Oto pytanie szczegółowo opisujące tę metodę

Możesz także użyć JavaScript, aby przeglądarka otworzyła nową stronę za pomocą window.locationlub przesłała formularz, emulując możliwości 1. i 2.

deceze
źródło
1
Możesz także otworzyć drugą stronę za pomocą window.openlub załadować stronę za pomocą elementu iframe.
jcubic 25.04.16
Warto dodać WebSockets do listy metod komunikacji.
Quentin,
Co jeśli powiedzmy, że rozwijane wartości są aktualizowane za pomocą jquery. Gdy użytkownik zrobi krok 2. Przesłanie formularza, który przesyła dane do serwera i ładuje nową stronę, za pomocą przycisku „Prześlij”, czy zaktualizowane wartości jquery mogłyby być przekazywane do kontrolera w php? A może nie byłyby widoczne dla php, ponieważ został dodany do dom poprzez jquery? @deceze
FabricioG
@Fabricio Żądanie HTTP zostanie utworzone z <form>danych i wysłane na serwer. Możesz manipulować formularzami za pomocą Javascript, aby zawierały różne dane. Tak, dane te będą częścią wynikowego żądania HTTP, jeśli będą częścią formularza podczas przesyłania; nie ma znaczenia, czy był w oryginalnym HTML, czy dodany później przez Javascript.
deceze
163

Aby ustalić, dlaczego kod PHP nie działa w kodzie JavaScript , musimy zrozumieć, jakie są języki strony klienta i serwera i jak one działają.

Języki po stronie serwera (PHP itp.) : Pobierają rekordy z baz danych, utrzymują stan przez bezpaństwowe połączenie HTTP i robią wiele rzeczy, które wymagają bezpieczeństwa. Znajdują się na serwerze, programy te nigdy nie mają dostępu do kodu źródłowego dla użytkownika.

Zdjęcie z wikipedia_http: //en.wikipedia.org/wiki/Plik: Scheme_dynamic_page_en.svg image attr

Dzięki temu możesz łatwo zobaczyć, że języki po stronie serwera obsługują żądania HTTP i przetwarzają je, a jak powiedział @deceze, PHP jest wykonywane na serwerze i generuje trochę HTML, a może kod JavaScript, który jest wysyłany w odpowiedzi na klienta, gdzie HTML jest interpretowany i JavaScript jest uruchamiany.

Z drugiej strony języki po stronie klienta (takie jak JavaScript) znajdują się w przeglądarce i działają w przeglądarce. Skrypty po stronie klienta ogólnie odnoszą się do klasy programów komputerowych w Internecie, które są uruchamiane po stronie klienta przez przeglądarkę internetową użytkownika, a nie po stronie serwera .

JavaScript jest widoczny dla użytkownika i może być łatwo modyfikowany, więc dla bezpieczeństwa nie możemy polegać na JavaScript.

Kiedy więc wysyłasz żądanie HTTP na serwerze, serwer najpierw dokładnie odczytuje plik PHP, aby sprawdzić, czy są jakieś zadania, które należy wykonać, i wysyła odpowiedź po stronie klienta. Ponownie, jak powiedział @deceze: * Gdy PHP zakończy wysyłanie odpowiedzi, skrypt kończy się i nic się nie stanie na serwerze, dopóki nie pojawi się nowe żądanie HTTP . *

Reprezentacja graficzna

Źródło obrazu

Co teraz mogę zrobić, jeśli muszę zadzwonić do PHP? To zależy od tego, jak musisz to zrobić: albo przeładowując stronę, albo używając wywołania AJAX.

  1. Możesz to zrobić, ponownie ładując stronę i wysyłając żądanie HTTP
  2. Możesz wykonać wywołanie AJAX za pomocą JavaScript - nie wymaga to ponownego ładowania strony

Dobra lektura:

  1. Wikipedia: Skrypty po stronie serwera
  2. Wikipedia: Skrypty po stronie klienta
  3. Madara Uchiha: Różnica między programowaniem po stronie klienta i po stronie serwera
NullPoiиteя
źródło
30

JavaScript zostanie uruchomiony na kliencie, a nie na serwerze. Oznacza to, że foonie jest ono oceniane po stronie serwera, a zatem jego wartości nie można zapisać do pliku na serwerze.

Najlepszym sposobem na zastanowienie się nad tym procesem jest dynamiczne generowanie pliku tekstowego. Wygenerowany tekst staje się kodem wykonywalnym dopiero po jego zinterpretowaniu przez przeglądarkę. Tylko to, co umieszczasz między <?phptagami, jest oceniane na serwerze.

Nawiasem mówiąc, nawyk osadzania losowych elementów logiki PHP w HTML lub JavaScript może prowadzić do poważnie zawiłego kodu. Mówię z bolesnego doświadczenia.

NitayArt
źródło
3
Twoja odpowiedź tutaj jest godna uwagi, ponieważ wspomina o tłumaczu. Jednak javascript może być kompilowany i uruchamiany w środowisku serwerowym, a także interpretowany przez serwer.
Brett Caswell
3

W aplikacji internetowej każde zadanie wykonuje się w formie zapytania i odpowiedzi.

Programowanie po stronie klienta odbywa się za pomocą kodu HTML ze skryptem Java i jego strukturami, biblioteki działają w przeglądarce Internet Explorer, Mozilli, przeglądarkach Chrome. W scenariuszu Java serwlety programowania po stronie serwera są wykonywane w Tomcat, web-logic, j boss, WebSphere severs

chandrashekar.n
źródło