从一个简单的编程脚本来认识客户端和服务器端的区别

首先来看一下代码：

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

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

以上代码可以分为两个完全独立的部分，即服务器端和客户端。js代码是在客户端执行，而php代码是在服务器端执行。

其执行流程图如下：

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

双方通过HTTP请求和响应进行通信。PHP在服务器上执行，并输出一些HTML和 代码，作为对客户端的响应，HTML被解释并执行 。一旦PHP完成输出响应，脚本就会结束，并且在新的HTTP请求进入之前，服务器上不会发生任何事情。

下面我们来分析以上脚本的执行流程：

第1步，PHP执行<?php ?>之间的所有代码。结果是这样的：

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

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

该file_put_contents函数在这里没有影响到任何结果，它只是将“+ foo +”字符串写入foo.txt文本中。该<?php echo 42; ?>调用产生了输出“42”。

此时的HTML / 代码被发送到客户端，并执行。alert方法弹出变量baz的值，即42，而foo变量没有做任何处理。

所有PHP代码都在服务器上执行并且比 代码先执行。 脚本在执行的时候，是不会有任何php代码的。

要调用一些PHP代码，客户端将不得不向服务器发送一个新的HTTP请求。这里有三种方法：

1. 链接，重新加载新页面。
2. 表单提交，将数据提交到服务器并加载新页面。
3. 一个AJAX请求，它是一种向服务器发送定期HTTP请求的 技术，但不离开当前页面。