客户端与服务器端编程有什么差别

原文 标签 IT工具网 javascript

原问题:What is the difference between client-side and server-side programming?

提问者给了一段代码:

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

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

问,为什么file_put_contents('foo.txt', ' + foo + ');并没有把bar写进foo.txt,而浏览器端却执行了alert(42);

问题很基础,但却非常典型,因为它是一个web程序的最核心流程。对于web程序员来说,是必须要了解的。

Web请求处理

典型的web请求是用户在终端浏览器上打开一个url,然后等待一会儿,看到对应的页面内容。

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

解释一下其中的数据流:

  • 用户在浏览器输入http://domain.com/a.php,回车
  • domain.com对应的web server处理这个http request
    • 找到a.php
    • 调用php-cgi来解析a.php中的php脚本,也就是<?php //code ?>
    • a.php中的php脚本将被转换为纯文字,成为页面中其他html/javascript的一部分
    • web server将不包含php脚本的a.php返回给客户端,里面只包含html/css/javascript,这样客户端浏览器可以正常解析
  • 客户端浏览器解析a.php中的html/css/javascript代码

问题解答

我们把原问题对应到上面的数据流,web server端的a.php内容为:

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

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

web server的php-cgi解析a.php,执行file_put_contents('foo.txt', ' + foo + ');时,该php语句中的foo是未定义的,因为php-cgi看不到前面的JavaScript代码。因此这行php代码的执行结果是把' + foo + '写到foo.txt里。

web server返回给客户端浏览器的a.php的内容为:

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

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

在进行web应用编程时,一定要分清楚你的脚本是在什么环境下执行。

扩展 - Isomorphic JavaScript

SPA(Single-page application)应用曾经火过,但因为众所周知的缺陷,导致后来火又灭了。

作为对SPA的改进,提出了Isomorphic JavaScript的概念,主要就是不单纯由浏览器完成所有工作,服务器端也同样完成业务逻辑和页面渲染。同时前台后台还能共用代码。

这个方向非常不错,但最大的问题,也是跟上面的问题一样,需要在程序中分清楚当前到底是在server side还是client side。

Airbnb在2013年发布了Rendr,它是一个不错的Isomorphic框架,有兴趣的可以试试。

相关文章:

java通过对象属性对常规对象的ArrayList进行排序

在Java中声明数组

javascript - 在HTML5的javascript中加载时如何停止功能并设置其他功能运行

javascript - python vs javascript中的插入排序

java初始化静态map

java如何用一行代码初始化一个ArrayList

javascript - 为您的网站异步加载 Google 翻译小部件的方法?

javascript - 在React中渲染DOM

java 产生指定范围的随机数

javascript - 如果至少一个输入具有值或选择更改了默认值,则启用/禁用切换按钮