客户端编程和服务器端编程有什么区别?

570

我有这段代码:

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

    var baz = <?php echo 42; ?>;
    alert(baz);
</script>
为什么这段代码没有将"bar"写入我的文本文件,而是弹出"42"的提示框?注意:此前版本的问题明确涉及服务器端的PHP和客户端的JavaScript。无论哪种语言在客户端运行,哪种语言在服务器端运行(即使它们是相同的语言),问题和解决方案的本质都是相同的,请在查看特定语言的答案时考虑到这一点。
3个回答

530

您的代码分为两个完全独立的部分,即服务器端客户端

                    |
               ---------->
              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>

第一步,PHP执行在<?php ?>标签之间的所有代码。结果如下:

Step 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 种可能性。


2
您也可以使用window.open打开第二个页面,或者使用iframe加载页面。 - jcubic
1
将WebSockets添加到通信方法列表中可能是值得的。 - Quentin
如果用jQuery更新下拉列表的值,当用户进行第二步表单提交并通过“提交”按钮将数据提交到服务器并加载一个新页面时,jQuery更新的值能够传递给PHP控制器吗?还是因为它是通过jQuery添加到DOM中,所以在PHP中不可见?@deceze - FabricioG
@Fabricio 从<form>数据创建一个HTTP请求并发送到服务器。您可以使用Javascript操纵表单,使其包含不同的数据。是的,如果在提交时它是表单的一部分,那么该数据将成为生成的HTTP请求的一部分;无论它是否在原始HTML中或是通过Javascript添加的。 - deceze
你说 它只是将 " + foo + " 写入了一个文件,那么这个文件现在应该存储在服务器的文件系统中某个地方吧?因为在你的回答中没有明确说明,所以有点不太清楚。 - Greenonline
需要注意的是,我们不仅有PHP,同时还有在服务器端运行的JavaScript——Node.js。因此,你可以在客户端和服务器端都运行JavaScript。然而,这两个环境是完全不同的。例如,在客户端,你可以访问window对象(即当前的HTML页面),但出于安全原因,你不能直接访问本地文件系统。而在服务器端则相反。 - Wernfried Domscheit

189
To determine why PHP code doesn't work in JavaScript code, we need to understand what client-side and server-side languages are and how they work. Server-side languages (such as PHP) retrieve records from databases, maintain state over the stateless HTTP connection, and perform many actions that require security. These programs reside on the server and their source code is never exposed to the user.

Image from wikipedia_http://en.wikipedia.org/wiki/File:Scheme_dynamic_page_en.svg image attr

所以你可以轻松地看到,服务器端语言处理HTTP请求并对其进行处理,正如@deceze所说,PHP在服务器上执行并输出一些HTML和可能的JavaScript代码,作为响应发送到客户端,在那里HTML被解释并执行JavaScript。 另一方面,客户端语言(如JavaScript)驻留在浏览器中并在浏览器中运行。 客户端脚本通常指在Web上由用户的Web浏览器客户端执行而不是服务器端的计算机程序类。
JavaScript对用户可见并且很容易被修改,因此对于安全问题,我们不能依赖JavaScript。
因此,当您在服务器上进行HTTP请求时,服务器首先仔细阅读PHP文件以查看是否有需要执行的任务,并向客户端发送响应。再次,正如@deceze所说,*一旦PHP完成输出响应,脚本就会结束,直到新的HTTP请求进来才会再次发生。*

图形表示

图片来源

如果我需要调用PHP,我该怎么办?这取决于您需要如何做:重新加载页面或使用AJAX调用。

  1. 您可以通过重新加载页面并发送HTTP请求来实现。
  2. 您可以使用JavaScript进行AJAX调用-这不需要重新加载页面。

好的阅读材料:

  1. 维基百科:服务器端脚本
  2. 维基百科:客户端脚本
  3. Madara Uchiha:客户端和服务器端编程的区别

38
您的JavaScript将在客户端执行,而不是在服务器上执行。这意味着foo不会在服务器端被评估,因此其值无法写入服务器上的文件。
最好的思考方式是将该过程视为动态生成文本文件。您生成的文本只有在浏览器解释它之后才变成可执行的代码。仅使用<?php标记之间的内容在服务器上进行评估。
顺便说一下,习惯于在HTML或JavaScript中嵌入随机的PHP逻辑可能会导致非常复杂的代码。我从痛苦的经历中得知。

4
您的回答提到了解释器,这一点值得注意。然而,JavaScript 可以在服务器环境中进行编译和运行,并且也可以被服务器解释。 - Brett Caswell

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接