服务器端入门

欢迎来到 MDN 初学者服务器端编程课程!在本文的第一部分,我们将从较高的层面了解服务器端编程,回答诸如“什么是服务器端编程?”、“它与客户端编程有何区别?”以及“为什么它如此有用?”等问题。阅读完本文后,您将了解通过服务器端编码为网站提供的额外功能。

先决条件 对 Web 服务器的基本了解。
目标 熟悉什么是服务器端编程、它能做什么以及它与客户端编程有何区别。

大多数大型网站都使用服务器端代码在需要时动态显示不同的数据,通常是从存储在服务器上的数据库中提取数据,并通过某些代码(例如 HTML 和 JavaScript)发送到客户端进行显示。

也许服务器端代码最显著的好处是它允许您为个别用户定制网站内容。动态网站可以根据用户的偏好和习惯突出显示更相关的内容。它还可以通过存储个人偏好和信息来简化网站的使用,例如重复使用存储的信用卡信息来简化后续付款。

它甚至可以允许与网站用户互动,通过电子邮件或其他渠道发送通知和更新。所有这些功能都能实现更深层次的用户互动。

在现代 Web 开发领域,学习服务器端开发是强烈推荐的。

什么是服务器端网站编程?

Web 浏览器使用**超文本传输协议**(HTTP)与Web 服务器通信。当您点击网页上的链接、提交表单或运行搜索时,浏览器会向目标服务器发送一个**HTTP 请求**。

请求包括一个标识受影响资源的 URL、定义所需操作的方法(例如获取、删除或发布资源),并可能包含编码在 URL 参数中的其他信息(通过查询字符串发送的字段-值对),作为 POST 数据(由HTTP POST 方法发送的数据),或包含在关联的cookie中。

Web 服务器等待客户端请求消息,在消息到达时处理它们,并使用**HTTP 响应**消息回复 Web 浏览器。响应包含一个状态行,指示请求是否成功(例如,成功时的“HTTP/1.1 200 OK”)。

对请求的成功响应的主体将包含请求的资源(例如,一个新的 HTML 页面或图像),然后 Web 浏览器可以显示该资源。

静态网站

下图显示了静态网站的基本 Web 服务器架构(静态网站是指无论何时请求特定资源,都从服务器返回相同硬编码内容的网站)。当用户想要导航到某个页面时,浏览器会发送一个指定其 URL 的 HTTP “GET” 请求。

服务器从其文件系统中检索请求的文档,并返回包含该文档和成功状态(通常为 200 OK)的 HTTP 响应。如果由于某种原因无法检索文件,则会返回错误状态(请参阅客户端错误响应服务器错误响应)。

A simplified diagram of a static web server.

动态网站

动态网站是指某些响应内容是动态生成的,仅在需要时生成。在动态网站上,HTML 页面通常通过将数据从数据库插入 HTML 模板中的占位符来创建(这是一种比使用静态网站更有效地存储大量内容的方法)。

动态网站可以根据用户提供的信息或存储的偏好返回 URL 的不同数据,并且可以在返回响应的过程中执行其他操作(例如发送通知)。

支持动态网站的大部分代码必须在服务器上运行。创建此代码称为“服务器端编程”(有时也称为“后端脚本”)。

下图显示了动态网站的简单架构。与上图一样,浏览器向服务器发送 HTTP 请求,然后服务器处理这些请求并返回相应的 HTTP 响应。

静态资源的请求以与静态网站相同的方式处理(静态资源是指不会更改的任何文件,通常包括:CSS、JavaScript、图像、预先创建的 PDF 文件等)。

A simplified diagram of a web server that uses server-side programming to get information from a database and construct HTML from templates. This is the same diagram as is in the Client-Server overview.

对动态资源的请求则会被转发 (2) 到服务器端代码(在图中显示为Web 应用程序)。对于“动态请求”,服务器会解释请求,从数据库中读取所需的信息 (3),将检索到的数据与 HTML 模板组合 (4),并发送包含生成的 HTML 的响应 (5,6)。

服务器端和客户端编程是否相同?

现在让我们将注意力转向服务器端和客户端编程中涉及的代码。在每种情况下,代码都大不相同。

  • 它们具有不同的目的和关注点。
  • 它们通常不使用相同的编程语言(例外情况是 JavaScript,它可以在服务器端和客户端使用)。
  • 它们在不同的操作系统环境中运行。

在浏览器中运行的代码称为客户端代码,主要关注于改进渲染的网页的外观和行为。这包括选择和设置 UI 组件的样式、创建布局、导航、表单验证等。相比之下,服务器端网站编程主要涉及选择哪个内容作为对请求的响应返回到浏览器。服务器端代码处理诸如验证提交的数据和请求、使用数据库存储和检索数据以及根据需要向客户端发送正确的数据等任务。

客户端代码使用HTMLCSSJavaScript编写,它在 Web 浏览器中运行,并且对底层操作系统(包括对文件系统的访问权限有限)的访问权限很少或没有。

Web 开发人员无法控制每个用户可能使用什么浏览器来查看网站——浏览器对客户端代码功能提供了不一致的兼容性级别,客户端编程面临的挑战之一是以优雅的方式处理浏览器支持的差异。

服务器端代码可以用任意数量的编程语言编写——流行的服务器端 Web 语言示例包括 PHP、Python、Ruby、C# 和 JavaScript (NodeJS)。服务器端代码可以完全访问服务器操作系统,并且开发人员可以选择他们希望使用的编程语言(以及特定版本)。

开发人员通常使用Web 框架编写代码。Web 框架是函数、对象、规则和其他代码结构的集合,旨在解决常见问题、加快开发速度并简化特定领域中面临的不同类型的任务。

同样,虽然客户端和服务器端代码都使用框架,但它们的领域非常不同,因此框架也不同。客户端 Web 框架简化了布局和展示任务,而服务器端 Web 框架提供了许多您可能需要自己实现的“常见”Web 服务器功能(例如,对会话的支持、对用户和身份验证的支持、简单的数据库访问、模板库等)。

注意:客户端框架通常用于帮助加快客户端代码的开发速度,但您也可以选择手动编写所有代码;事实上,如果您只需要一个小型简单的网站 UI,则手动编写代码可能会更快更有效。

相反,您几乎永远不会考虑在没有框架的情况下编写 Web 应用程序的服务器端组件——从头开始实现像 HTTP 服务器这样的重要功能在 Python 中非常困难,但像 Django 这样的 Python Web 框架提供了一个开箱即用的 HTTP 服务器,以及其他非常有用的工具。

您可以在服务器端做什么?

服务器端编程非常有用,因为它允许我们高效地传递为个别用户量身定制的信息,从而创造更好的用户体验。

像亚马逊这样的公司使用服务器端编程来构建产品搜索结果、根据客户偏好和之前的购买习惯提供有针对性的产品建议、简化购买流程等。

银行使用服务器端编程来存储账户信息,并仅允许授权用户查看和进行交易。其他服务,如 Facebook、Twitter、Instagram 和维基百科,使用服务器端编程来突出显示、共享和控制对有趣内容的访问。

下面列出了一些服务器端编程的常见用途和好处。您会注意到它们之间有一些重叠!

高效的信息存储和传递

想象一下亚马逊上有多少产品,以及 Facebook 上发布了多少帖子?为每个产品或帖子创建一个单独的静态页面将完全不切实际。

服务器端编程允许我们改为将信息存储在数据库中,并动态构建和返回 HTML 及其他类型的文件(例如 PDF、图像等)。还可以返回数据(JSONXML 等),以便由相应的客户端 Web 框架渲染(这减少了服务器的处理负担以及需要发送的数据量)。

服务器不仅限于发送来自数据库的信息,还可以返回软件工具的结果或来自通信服务的数据。内容甚至可以针对接收它的客户端设备类型进行定位。

由于信息存储在数据库中,因此也可以更轻松地与其他业务系统共享和更新(例如,当产品在线或在商店中出售时,商店可能会更新其库存数据库)。

注意:您无需费力地就能看出服务器端代码对高效存储和传递信息的好处。

  1. 访问亚马逊或其他电子商务网站。
  2. 搜索一些关键词,并注意即使结果不同,页面结构也不会改变。
  3. 打开两个或三个不同的产品。再次注意,它们具有相同的结构和布局,但不同产品的內容是从数据库中提取的。

对于一个常见的搜索词(例如“鱼”),您可以看到数百万个返回结果。使用数据库可以有效地存储和共享这些结果,并且可以在一个地方控制信息的展示方式。

自定义用户体验

服务器可以存储和使用有关客户端的信息,以提供便捷且定制的用户体验。例如,许多网站存储信用卡信息,以便无需再次输入详细信息。像 Google Maps 这样的网站可以使用保存的或当前的位置提供路线信息,并使用搜索或旅行历史记录突出显示搜索结果中的本地企业。

对用户习惯进行更深入的分析可以用于预测他们的兴趣并进一步自定义响应和通知,例如提供您可能想在地图上查看的先前访问过或热门地点的列表。

注意:Google Maps 会保存您的搜索和访问历史记录。经常访问或经常搜索的地点会比其他地点更突出显示。

Google 搜索结果根据之前的搜索进行优化。

  1. 访问Google 搜索
  2. 搜索“足球”。
  3. 现在尝试在搜索框中输入“收藏”,并观察自动完成搜索预测。

巧合?绝非如此!

控制对内容的访问

服务器端编程允许网站限制对授权用户的访问,并仅提供用户有权查看的信息。

现实世界的例子包括社交网络网站,这些网站允许用户确定谁可以查看他们发布到网站上的内容,以及谁的内容出现在他们的信息流中。

注意:考虑其他内容访问受控的真实示例。例如,如果您访问银行的在线网站,您能看到什么?登录您的帐户 - 您还能看到和修改哪些其他信息?哪些信息只有银行才能更改?

存储会话/状态信息

服务器端编程允许开发人员利用会话——基本上,这是一种机制,允许服务器存储与网站当前用户相关的信息,并根据这些信息发送不同的响应。

例如,这允许网站知道用户之前已登录并显示其电子邮件或订单历史记录的链接,或者可能保存简单游戏的状态,以便用户可以再次访问网站并从离开的地方继续。

注意:访问一个采用订阅模式的新闻网站并打开多个标签页(例如 The Age)。在几个小时/几天内继续访问该网站。最终,您将开始被重定向到解释如何订阅的页面,并且您将无法访问文章。此信息是存储在 Cookie 中的会话信息的示例。

通知和通信

服务器可以通过网站本身或通过电子邮件、短信、即时消息、视频对话或其他通信服务发送通用或用户特定的通知。

一些示例包括

  • Facebook 和 Twitter 发送电子邮件和短信通知您新的通信。
  • 亚马逊定期发送产品电子邮件,建议您可能感兴趣的与之前购买或查看的产品类似的产品。
  • Web 服务器可能会向站点管理员发送警告消息,提醒他们服务器内存不足或用户活动可疑。

注意:最常见的通知类型是“注册确认”。选择您感兴趣的任何大型网站(Google、Amazon、Instagram 等),并使用您的电子邮件地址创建一个新帐户。您将很快收到一封电子邮件确认您的注册,或要求您确认以激活您的帐户。

数据分析

网站可能会收集大量有关用户的数据:他们搜索的内容、他们购买的内容、他们推荐的内容、他们在每个页面停留的时间。服务器端编程可用于根据对这些数据的分析来优化响应。

例如,亚马逊和谷歌都根据之前的搜索(和购买)投放产品广告。

注意:如果您是 Facebook 用户,请访问您的主信息流并查看帖子流。请注意,一些帖子并非按数字顺序排列——特别是,“点赞”较多的帖子通常比最近的帖子排在更前面。

还可以查看您正在查看的广告类型——您可能会看到在其他网站上查看的内容的广告。Facebook 用于突出显示内容和广告的算法可能有点神秘,但很明显,它确实取决于您的喜好和观看习惯!

总结

恭喜,您已完成关于服务器端编程的第一篇文章。

您现在已经了解到服务器端代码是在 Web 服务器上运行的,其主要作用是控制发送给用户的信息(而客户端代码主要处理将这些数据结构化和呈现给用户)。

您还应该理解它之所以有用,是因为它允许我们创建能够高效地传递为各个用户定制的信息的网站,并且对您作为服务器端程序员可能能够做的一些事情有一个很好的了解。

最后,您应该了解服务器端代码可以用多种编程语言编写,并且您应该使用 Web 框架来简化整个过程。

在以后的文章中,我们将帮助您为您的第一个网站选择最佳的 Web 框架。在这里,我们将更详细地介绍主要的客户端-服务器交互。