关于javascript:客户端和服务器端编程有什么区别?

What is the difference between client-side and server-side programming?

我有这个代码:

1
2
3
4
5
6
7
8
<script type="text/javascript">
    var foo = 'bar';
    <?php
        file_put_contents('foo.txt', ' + foo + ');
    ?>

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

为什么这不会在我的文本文件中写入"bar",但警告"42"?

注意:此问题的早期修订明确是关于服务器上的PHP和客户端上的JavaScript。 当一个语言在客户端上运行而另一个在服务器上运行时(即使它们是相同的语言),问题和解决方案的本质是相同的。 当你看到有关特定语言的答案时,请考虑到这一点。


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
                    |
               ---------->
              HTTP request
                    |
+--------------+    |    +--------------+
|              |    |    |              |
|    browser   |    |    |  web  server |
| (JavaScript) |    |    |  (PHP etc.)  |
|              |    |    |              |
+--------------+    |    +--------------+
                    |
  client side       |      server side
                    |
               <----------
          HTML, CSS, JavaScript
                    |

双方通过HTTP请求和响应进行通信。 PHP在服务器上执行并输出一些HTML和JavaScript代码,这些代码作为响应发送到解释HTML并执行JavaScript的客户端。一旦PHP完成输出响应,脚本就会结束,在新的HTTP请求进入之前,服务器上什么都不会发生。

示例代码执行如下:

1
2
3
4
5
6
7
8
<script type="text/javascript">
    var foo = 'bar';
    <?php
        file_put_contents('foo.txt', ' + foo + ');
    ?>

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

第1步,PHP执行标记之间的所有代码。结果是这样的:

1
2
3
4
5
<script type="text/javascript">
    var foo = 'bar';

    var baz = 42;
    alert(baz);

file_put_contents调用没有产生任何结果,它只是将"+ foo +"写入文件中。 调用导致输出"42",现在位于该代码的位置。

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

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

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

  • 一个链接,导致浏览器加载新页面。
  • 表单提交,将数据提交到服务器并加载新页面。
  • 一个AJAX请求,它是一种Javascript技术,可以向服务器发出常规HTTP请求(如1.和2.将),但不会离开当前页面。
  • 这是一个更详细地概述这些方法的问题

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


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

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

    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请求进入之前,服务器上什么都不会发生。*

    Graphical representation

    Image source

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

  • 您可以通过重新加载页面并发送HTTP请求来完成此操作
  • 您可以使用JavaScript进行AJAX调用 - 这不需要重新加载页面
  • 好读:

  • 维基百科:服务器端脚本
  • 维基百科:客户端脚本
  • Madara Uchiha:客户端和服务器端编程之间的区别

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

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

    顺便说一句,养成在HTML或Javascript中嵌入随机PHP逻辑片段的习惯会导致严重错综复杂的代码。我说的是痛苦的经历。


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

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


    我将尝试以简单的方式解释它。

    客户端是用户在浏览器上看到/看到的代码。

    客户端编程包括HTML(HTML,HTML5,DHTML),CSS(CSS,CSS3)和JavaScript(JavaScript,ES5,ES6,ES7,TypeScript,JQuery,ReactJs,AngularJs,BackboneJs或任何其他JavaScript前端框架)。

    客户端编程侧重于"页面将如何显示"及其在浏览器上的行为。

  • HTML就是我们所看到的。
  • CSS决定其设计(颜色,浮动图像,填充等)。
  • JavaScript监控页面信息。所有API调用和通过DOM维护数据都是通过JavaScript完成的。
  • 服务器端编程包括向客户端提供数据的代码。用户永远无法看到服务器端。

    服务器端编程涉及编程语言(Java,PHP,.Net,C#,C,C ++,NodeJS等),数据库(SQL,Oracle,MySql,PostgreySql,No-Sql,MongoDB等),第三方API(休息,肥皂) ), 商业逻辑。

    服务器端编程侧重于"如何为客户端提供数据"。

  • 服务器端语言负责不同数据源之间的通信,如数据库,第三方API,文件系统,区块链等。这些语言为客户端维护某些API以进行交互。
  • 数据库负责存储信息。
  • 业务逻辑定义了"如何使用数据以及如何处理数据"。
  • 客户端请求数据或存储数据的请求,从服务器端通过服务器端提供的API。此请求和数据响应通过遵循REST API,SOAP API等HTTP / FTP协议来完成。