客户端和服务器端编程有啥区别？

Posted 2023-02-24

技术标签:

【中文标题】客户端和服务器端编程有啥区别？【英文标题】：What is the difference between client-side and server-side programming?客户端和服务器端编程有什么区别？ 【发布时间】：2012-12-12 13:03:00 【问题描述】：

我有这个代码：

<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。对于任何对语言，当一种语言运行在客户端而另一种语言运行在服务器时（即使它们是相同的语言），问题和解决方案的本质本质是相同的。当您看到有关特定语言的答案时，请考虑到这一点。

【问题讨论】：

【参考方案1】：

您的代码被分成两个完全独立的部分，服务器端和客户端。

                    |
               ---------->
              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 变量不在任何地方使用。

在客户端开始执行任何 JavaScript 之前，所有 PHP 代码都在服务器上执行。 JavaScript 可以与之交互的响应中没有任何 PHP 代码。

要调用一些 PHP 代码，客户端必须向服务器发送一个新的 HTTP 请求。这可以使用以下三种可能的方法之一来实现：

一个链接，它会导致浏览器加载一个新页面。表单提交，将数据提交到服务器并加载新页面。 AJAX 请求，这是一种 Javascript 技术，用于向服务器发出常规 HTTP 请求（如 1. 和 2. will），但不会离开当前页面。

Here's a question outlining these method in greater detail

您还可以使用 JavaScript 让浏览器使用 window.location 打开一个新页面或提交一个表单，模拟可能性 1. 和 2。

【讨论】：

您也可以使用window.open 打开第二个页面或使用 iframe 加载页面。可能值得将 WebSockets 添加到通信方法列表中。如果让我们说下拉值通过 jquery 更新。当用户执行第 2 步时。通过“提交”按钮将数据提交到服务器并加载新页面的表单提交是否能够将 jquery 更新的值传递给 php 中的控制器？或者它们是否对 php 不可见，因为它是通过 jquery 添加到 dom 的？ @deceze @Fabricio 将从<form> 数据创建 HTTP 请求并发送到服务器。您可以使用 Javascript 操作表单以使它们包含不同的数据。是的，如果在提交时该数据是表单的正确部分，那么该数据将成为生成的 HTTP 请求的一部分；无论是在原始 HTML 中还是在之后通过 Javascript 添加都没有关系。【参考方案2】：

要确定为什么 PHP 代码在 JavaScript 代码中不起作用，我们需要了解 客户端 和 服务器端语言是，以及它们是如何工作的。

服务器端语言（PHP 等）：它们从数据库中检索记录，通过 stateless HTTP connection 维护状态，并执行许多需要安全的事情。它们驻留在服务器上，这些程序永远不会将其源代码暴露给用户。

_{image attr}

所以你可以很容易地看到服务器端语言处理 HTTP 请求并处理它们，并且，正如@deceze 所说，PHP 在服务器上执行并输出一些 HTML，也许还有 JavaScript 代码，这些代码作为响应客户端，其中解释 HTML 并执行 JavaScript。

另一方面，客户端语言（如 JavaScript） 驻留在浏览器中并在浏览器中运行。 客户端脚本通常是指网络上的一类计算机程序，由用户的网络浏览器在客户端执行，而不是服务器端。 p>

JavaScript 对用户是可见的并且可以很容易地修改，所以对于安全性我们不能依赖 JavaScript。

所以当你向服务器发出HTTP请求时，服务器首先会仔细读取PHP文件，看是否有需要执行的任务，然后向客户端发送响应。同样，正如@deceze 所说，*一旦 PHP 完成输出响应，脚本就会结束，服务器上不会发生任何事情，直到新的 HTTP 请求进来。*

_{Image source}

那么现在如果我需要调用 PHP 该怎么办？这取决于您需要如何执行此操作：通过重新加载页面或使用 AJAX 调用。

HTTP

好读：

Wikipedia : Server-side scripting Wikipedia : Client-side scripting Madara Uchiha : Difference between client side and server side programming

【讨论】：

【参考方案3】：

您的 Javascript 将在客户端而不是服务器上执行。这意味着foo 不会在服务器端进行评估，因此它的值无法写入服务器上的文件。

考虑这个过程的最佳方式是动态生成一个文本文件。您生成的文本只有在浏览器解释后才成为可执行代码。只有您放置在 <?php 标记之间的内容才会在服务器上进行评估。

顺便说一句，养成在 HTML 或 Javascript 中嵌入随机 PHP 逻辑片段的习惯可能会导致代码非常复杂。我是从痛苦的经历中说出来的。

【讨论】：

您的回答值得注意，因为它提到了/a interpeter。但是，javascript可以在服务器环境中编译和运行，也可以由服务器进行交互。【参考方案4】：

在 Web 应用程序中，每个任务都以请求和响应的方式执行。

客户端编程使用带有 Java 脚本及其框架的 html 代码，库在 Internet Explorer、Mozilla、chrome 浏览器中执行。在java场景中服务器端编程 servlet 在 Tomcat、web-logic、j boss、WebSphere 服务器中执行