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


498

我有以下代码:

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

Answers:


460

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

                    |
               ---------->
              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呼叫并没有导致任何东西,它只是写了“+富+”到文件中。该<?php echo 42; ?>调用导致输出“ 42”,该输出现在位于该代码以前所在的位置。

现在,此生成的HTML / JavaScript代码将发送到客户端,并在此进行评估。该alert调用有效,而该foo变量未在任何地方使用。

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

要调用一些PHP代码,客户端将必须向服务器发送新的HTTP请求。使用以下三种可能的方法之一可能会发生这种情况:

  1. 链接,使浏览器加载新页面。
  2. 表单提交,它将数据提交到服务器并加载新页面。
  3. 一个AJAX请求,这是一个JavaScript技术,使一个普通的HTTP请求到服务器(如1和2会),而无需离开当前页面。

这是一个更详细地概述这些方法的问题

您还可以使用JavaScript来window.location模拟或建立可能性1.和2.,从而使浏览器使用或提交表单来打开新页面。


1
您也可以window.open使用iframe 打开第二页或使用iframe加载页面。
jcubic '16

将WebSockets添加到通信方法列表中可能是值得的。
昆汀

如果让下拉值通过jquery更新怎么办?当用户执行第2步时。通过“ Submit”按钮将表单提交到服务器并加载新页面的表单提交,是否可以将jQuery更新的值传递给php中的控制器?还是因为通过jquery将它添加到dom中,所以它们对php不可见?@deceze
FabricioG

@Fabricio将根据<form>数据创建HTTP请求并将其发送到服务器。您可以使用Javascript处理表单,使它们包含不同的数据。是的,如果提交时该数据正确属于表单,则该数据将成为结果HTTP请求的一部分;不管它是原始HTML还是随后通过Javascript添加。
deceze

163

为了确定PHP代码为什么不能在JavaScript代码中运行,我们需要了解什么是客户端服务器端语言,以及它们如何工作。

服务器端语言(PHP等):它们从数据库检索记录,通过无状态HTTP连接维护状态,并执行许多需要安全性的工作。它们驻留在服务器上,这些程序永远不会向用户公开其源代码。

图片来自Wikipedia_http://en.wikipedia.org/wiki/File:Scheme_dynamic_page_en.svg 图像属性

因此,您可以轻松地看到服务器端语言处理并处理了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. Wikipedia:服务器端脚本
  2. Wikipedia:客户端脚本
  3. Madara Uchiha:客户端和服务器端编程之间的区别

30

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

考虑此过程的最佳方法是好像正在动态生成文本文件。您生成的文本仅在浏览器解释后成为可执行代码。<?php服务器上只会评估您在标签之间放置的内容。

顺便说一句,养成在HTML或Javascript中嵌入随机PHP代码逻辑的习惯会导致代码复杂化。我从痛苦的经历中发言。


3
您在这里的回答很引人注目,因为它提到了/一个干扰者。但是,javascript可以在服务器环境中编译和运行,并且也可以由服务器插入。
布雷特·卡斯韦

3

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

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.