Qual é a diferença entre a programação do lado do cliente e do servidor?

498

Eu tenho este código:

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

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

Por que isso não grava "barra" no meu arquivo de texto, mas alerta "42"?


NB: As revisões anteriores desta pergunta eram explicitamente sobre PHP no servidor e JavaScript no cliente. A natureza essencial do problema e das soluções é a mesma para qualquer par de idiomas quando um está sendo executado no cliente e o outro no servidor (mesmo que sejam o mesmo idioma). Leve isso em consideração quando vir respostas sobre idiomas específicos.

deceze
fonte

Respostas:

460

Seu código é dividido em duas partes totalmente separadas, o lado do servidor e o lado do cliente .

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

Os dois lados se comunicam via solicitações e respostas HTTP. O PHP é executado no servidor e gera algum código HTML e talvez JavaScript que é enviado como resposta ao cliente onde o HTML é interpretado e o JavaScript é executado. Depois que o PHP concluir a saída da resposta, o script será encerrado e nada acontecerá no servidor até que uma nova solicitação HTTP seja recebida.

O código de exemplo é executado assim:

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

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

Etapa 1, o PHP executa todo o código entre as <?php ?>tags. O resultado é este:

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

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

A file_put_contentschamada não resultou em nada, apenas escreveu "+ foo +" em um arquivo. A <?php echo 42; ?>chamada resultou na saída "42", que agora está no local em que esse código costumava estar.

Agora, esse código HTML / JavaScript resultante é enviado ao cliente, onde é avaliado. A alertchamada funciona, enquanto a foovariável não é usada em nenhum lugar.

Todo o código PHP é executado no servidor antes que o cliente comece a executar qualquer JavaScript. Não existe nenhum código PHP na resposta com a qual o JavaScript possa interagir.

Para chamar algum código PHP, o cliente precisará enviar uma nova solicitação HTTP para o servidor. Isso pode acontecer usando um dos três métodos possíveis:

  1. Um link, que faz com que o navegador carregue uma nova página.
  2. Um envio de formulário, que envia dados ao servidor e carrega uma nova página.
  3. Uma solicitação AJAX , que é uma técnica Javascript para fazer uma solicitação HTTP regular para o servidor (como 1. e 2. will), mas sem sair da página atual.

Aqui está uma pergunta descrevendo esses métodos com mais detalhes

Você também pode usar o JavaScript para fazer o navegador abrir uma nova página usando window.locationou enviando um formulário, emulando as possibilidades 1. e 2.

deceze
fonte
1
Você também pode abrir a segunda página usando window.openou carregar uma página usando um iframe.
jcubic
Pode valer a pena adicionar WebSockets à lista de métodos de comunicação.
Quentin
E se, digamos, os valores suspensos forem atualizados via jquery. Quando o usuário executa a etapa 2. Um envio de formulário, que envia dados ao servidor e carrega uma nova página, via botão "Enviar", os valores atualizados do jquery poderiam ser passados ​​para um controlador em php? Ou eles não seriam visíveis para o php desde que foi adicionado ao dom via jquery? @deceze
FabricioG
@Fabricio Uma solicitação HTTP será criada a partir dos <form>dados e enviada ao servidor. Você pode manipular formulários usando Javascript para que eles contenham dados diferentes. Sim, esses dados farão parte da solicitação HTTP resultante se fizerem parte do formulário corretamente quando estiverem sendo enviados; não importa se estava no HTML original ou foi adicionado posteriormente via Javascript.
deceze
163

Para determinar por que o código PHP não funciona no código JavaScript , precisamos entender o que são as linguagens do lado do cliente e do servidor e como elas funcionam.

Linguagens do lado do servidor (PHP etc.) : Eles recuperam registros de bancos de dados, mantêm o estado pela conexão HTTP sem estado e fazem muitas coisas que exigem segurança. Eles residem no servidor, esses programas nunca têm seu código-fonte exposto ao usuário.

Imagem de wikipedia_http: //en.wikipedia.org/wiki/File: Scheme_dynamic_page_en.svg atr de imagem

Assim, você pode ver facilmente que as linguagens do servidor lidam com solicitações HTTP e as processam, e, como disse @dezeze, o PHP é executado no servidor e gera algum código HTML e talvez JavaScript, que é enviado como resposta ao cliente, onde o HTML é interpretado e o JavaScript é executado.

Por outro lado, os idiomas do cliente (como JavaScript) residem no navegador e são executados no navegador. Os scripts do lado do cliente geralmente se referem à classe de programas de computador na Web executados no lado do cliente, pelo navegador da web do usuário, em vez do lado do servidor .

O JavaScript é visível para o usuário e pode ser facilmente modificado, portanto, para itens de segurança, não devemos confiar no JavaScript.

Portanto, quando você faz uma solicitação HTTP no servidor, o servidor primeiro lê o arquivo PHP com cuidado para verificar se há alguma tarefa que precisa ser executada e envia uma resposta ao lado do cliente. Novamente, como o @deceze disse: * Depois que o PHP terminar a saída da resposta, o script termina e nada acontecerá no servidor até que uma nova solicitação HTTP seja recebida . *

Representação gráfica

Fonte da imagem

Então agora o que posso fazer se precisar chamar PHP? Depende de como você precisa fazer isso: recarregando a página ou usando uma chamada AJAX.

  1. Você pode fazer isso recarregando a página e enviando uma solicitação HTTP
  2. Você pode fazer uma chamada AJAX com JavaScript - isso não requer recarregar a página

Boa leitura:

  1. Wikipedia: Script do lado do servidor
  2. Wikipedia: Script do lado do cliente
  3. Madara Uchiha: Diferença entre a programação do lado do cliente e do servidor
NullPoiиteя
fonte
30

Seu Javascript será executado no cliente, não no servidor. Isso significa que foonão é avaliado no lado do servidor e, portanto, seu valor não pode ser gravado em um arquivo no servidor.

A melhor maneira de pensar nesse processo é como se você estivesse gerando um arquivo de texto dinamicamente. O texto que você está gerando apenas se torna código executável quando o navegador o interpreta. Somente o que você coloca entre as <?phptags é avaliado no servidor.

A propósito, criar o hábito de incorporar partes aleatórias da lógica do PHP em HTML ou Javascript pode levar a códigos seriamente complicados. Falo por experiência dolorosa.

NitayArt
fonte
3
Sua resposta aqui é digna de nota, pois faz menção ao / a intérprete. No entanto, o javascript pode ser compilado e executado em um ambiente de servidor e também pode ser interceptado por um servidor.
Brett Caswell
3

No aplicativo da Web, todas as tarefas são executadas de uma maneira de solicitação e resposta.

A programação do lado do cliente é com código html com script Java e suas estruturas, as bibliotecas são executadas nos navegadores Internet Explorer, Mozilla e Chrome. No cenário java, os servlets de programação do lado do servidor são executados nos servidores Tomcat, web-logic, j boss, WebSphere

chandrashekar.n
fonte