¿Cuál es la diferencia entre la programación del lado del cliente y del lado del servidor?


498

Tengo este codigo:

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

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

¿Por qué esto no escribe "barra" en mi archivo de texto, sino alertas "42"?


NB: Las revisiones anteriores de esta pregunta fueron explícitamente sobre PHP en el servidor y JavaScript en el cliente. La naturaleza esencial del problema y las soluciones es la misma para cualquier par de idiomas cuando uno se ejecuta en el cliente y el otro en el servidor (incluso si son del mismo idioma). Tenga esto en cuenta cuando vea respuestas que hablan sobre idiomas específicos.

Respuestas:


460

Su código se divide en dos partes completamente separadas, el lado del servidor y el lado del cliente .

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

Las dos partes se comunican a través de solicitudes y respuestas HTTP. PHP se ejecuta en el servidor y genera un código HTML y quizás JavaScript que se envía como respuesta al cliente donde se interpreta el HTML y se ejecuta el JavaScript. Una vez que PHP haya terminado de enviar la respuesta, el script finaliza y no pasará nada en el servidor hasta que llegue una nueva solicitud HTTP.

El código de ejemplo se ejecuta así:

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

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

Paso 1, PHP ejecuta todo el código entre <?php ?>etiquetas. El resultado es este:

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

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

La file_put_contentsllamada no resultó en nada, simplemente escribió "+ foo +" en un archivo. La <?php echo 42; ?>llamada resultó en la salida "42", que ahora está en el lugar donde solía estar ese código.

Este código HTML / JavaScript resultante ahora se envía al cliente, donde se evalúa. La alertllamada funciona, mientras que la foovariable no se usa en ningún lado.

Todo el código PHP se ejecuta en el servidor antes de que el cliente incluso comience a ejecutar JavaScript. No queda ningún código PHP en la respuesta con la que JavaScript pueda interactuar.

Para llamar a algún código PHP, el cliente deberá enviar una nueva solicitud HTTP al servidor. Esto puede suceder usando uno de los tres métodos posibles:

  1. Un enlace, que hace que el navegador cargue una nueva página.
  2. Un envío de formulario, que envía datos al servidor y carga una nueva página.
  3. Una solicitud AJAX , que es una técnica de Javascript para realizar una solicitud HTTP regular al servidor (como 1. y 2. lo hará), pero sin salir de la página actual.

Aquí hay una pregunta que describe estos métodos con mayor detalle

También puede usar JavaScript para hacer que el navegador abra una nueva página usando window.locationo enviar un formulario, emulando las posibilidades 1. y 2.


1
También puede abrir una segunda página usando window.openo cargar una página usando un iframe.
jcubic

Puede valer la pena agregar WebSockets a la lista de métodos de comunicación.
Quentin

¿Qué pasa si, digamos, los valores desplegables se actualizan a través de jquery? Cuando el usuario realiza el paso 2. Un envío de formulario, que envía datos al servidor y carga una nueva página, a través del botón "Enviar" ¿los valores actualizados de jquery podrían pasarse a un controlador en php? ¿O no serían visibles para php ya que se agregó a la dom a través de jquery? @deceze
FabricioG

@Fabricio Se creará una solicitud HTTP a partir de los <form>datos y se enviará al servidor. Puede manipular formularios usando Javascript para que contengan datos diferentes. Sí, esos datos serán parte de la solicitud HTTP resultante si es parte del formulario cuando se envía; no importa si estaba en el HTML original o si se agregó después a través de Javascript.
Fallecimiento

163

Para determinar por qué el código PHP no funciona en el código JavaScript , necesitamos comprender qué son los idiomas del lado del cliente y del servidor , y cómo funcionan.

Lenguajes del lado del servidor (PHP, etc.) : recuperan registros de bases de datos, mantienen el estado a través de la conexión HTTP sin estado y hacen muchas cosas que requieren seguridad. Residen en el servidor, estos programas nunca tienen su código fuente expuesto al usuario.

Imagen de wikipedia_http: //en.wikipedia.org/wiki/File: Scheme_dynamic_page_en.svg imagen attr

Por lo tanto, puede ver fácilmente que los lenguajes del lado del servidor manejan las solicitudes HTTP y las procesan, y, como dijo @deceze, PHP se ejecuta en el servidor y genera un código HTML, y tal vez JavaScript, que se envía como respuesta al cliente, donde se interpreta el HTML y se ejecuta JavaScript.

Por otro lado, los idiomas del lado del cliente (como JavaScript) residen en el navegador y se ejecutan en el navegador. Las secuencias de comandos del lado del cliente generalmente se refieren a la clase de programas de computadora en la web que se ejecutan del lado del cliente, por el navegador web del usuario, en lugar del lado del servidor .

JavaScript es visible para el usuario y se puede modificar fácilmente, por lo que, por cuestiones de seguridad, no debemos confiar en JavaScript.

Entonces, cuando realiza una solicitud HTTP en el servidor, el servidor primero lee el archivo PHP cuidadosamente para ver si hay alguna tarea que deba ejecutarse, y envía una respuesta al lado del cliente. De nuevo, como dijo @deceze, * Una vez que PHP haya terminado de enviar la respuesta, el script finaliza y no pasará nada en el servidor hasta que llegue una nueva solicitud HTTP . *

Representación grafica

Fuente de imagen

Entonces, ¿qué puedo hacer si necesito llamar a PHP? Depende de cómo necesite hacerlo: ya sea volviendo a cargar la página o usando una llamada AJAX.

  1. Puede hacerlo volviendo a cargar la página y enviando una solicitud HTTP
  2. Puede realizar una llamada AJAX con JavaScript; esto no requiere la recarga de la página

Buena lectura:

  1. Wikipedia: secuencias de comandos del lado del servidor
  2. Wikipedia: secuencias de comandos del lado del cliente
  3. Madara Uchiha: diferencia entre la programación del lado del cliente y del lado del servidor

30

Su Javascript se ejecutará en el cliente, no en el servidor. Esto significa que foono se evalúa en el lado del servidor y, por lo tanto, su valor no se puede escribir en un archivo en el servidor.

La mejor manera de pensar en este proceso es como si estuviera generando un archivo de texto dinámicamente. El texto que está generando solo se convierte en código ejecutable una vez que el navegador lo interpreta. Solo lo que coloque entre <?phpetiquetas se evalúa en el servidor.

Por cierto, el hábito de incorporar piezas aleatorias de lógica PHP en HTML o Javascript puede conducir a un código muy complicado. Hablo por experiencia dolorosa.


3
Su respuesta aquí es notable ya que hace mención al / a interpeter. Sin embargo, javascript puede compilarse y ejecutarse en un entorno de servidor, y también puede ser interpelado por un servidor.
Brett Caswell

3

En la aplicación web, cada tarea se ejecuta de una manera de solicitud y respuesta.

La programación del lado del cliente es con código html con script Java y sus marcos, las bibliotecas se ejecutan en Internet Explorer, Mozilla, navegadores Chrome. En el escenario de Java, los servlets de programación del lado del servidor se ejecutan en los servidores Tomcat, web-logic, j boss, WebSphere

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.